CSS Flex更改文本元素的顺序定位

时间：2015-06-27 06:45:20

标签： html css flexbox

flex如何影响文本元素的定位和顺序？

在一个简单的例子中

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <header>
    <h1>My Site Name</h1>
    <br>
    <p>Welcome to the website</p>
  </header>
  <h1>Hello Plunker!</h1>
</body>

</html>

header {
    display: flex;
    width: 100%;
    height: 100px;
    background-color: green;

}

h1, p {
    display: inline;
    text-align: justify;
    color: white;
}

如果我注释掉flex我会得到预期的文本显示顺序

My Site Name
Welcome to the website

然而，在启用flex的情况下，我得到了

                            Welcome to the website
My Site Name

plnkr flex

修改 根据下面显示问题的答案，这是一个解决方案

header h1, p {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    background-color: green;
    justify-content: center;
    color: white;
    padding: 0;
    margin: 0;
}

1 个答案:

答案 0 :(得分：3)

这可能有点帮助： h1 highlighted with chrome dev

当你有display:flex时，你正在创建一个包含3个子元素的flexbox：

  • <h1>
  • 包含单个换行符的匿名文本元素
  • <p>

这些元素从左到右排列，匿名文本元素的宽度和高度为0。如果我在<br>：

之前和之后放置可打印文本，这就是它的样子

text around br

相关问题
最新问题