如何使用flexbox设置div宽度

Question

我正在使用带有几个div元素(它们都具有相同的高度)的flexbox构建布局。我想让它们占据整个页面的宽度或一半，在最后一种情况下，我会有两个相邻的块，两者都有50%的宽度，以便仍然填充整个页面的宽度。

问题是，当我使用flexbox时，似乎有什么东西覆盖了块的宽度，只将它们推入一行，但我想让它们排成几行。

你能帮我弄明白我做错了什么吗？谢谢!

​

.container {
  width:100vw;
  height: auto;
  display: flex;
  flex-direction: row;
}
.element {
  height: 300px;
  padding: 30px;
  box-sizing: border-box;
}
.full {
  width: 100%;
}
.half {
  width: 50%;
}
#element-1 {
  background-color: pink;
}
#element-2 {
  background-color: wheat;
}
#element-3 {
  background-color: cadetBlue;
}
#element-4 {
  background-color: IndianRed;
}

<div class="container">
  <div class="element full" id="element-1">
    <h1>Title Here</h1>
  </div>
  <div class="element half" id="element-2">
    <h1>Title Here</h1>
  </div>
  <div class="element half" id="element-3">
    <h1>Title Here</h1>
  </div>
  <div class="element full" id="element-4">
    <h1>Title Here</h1>
  </div>
</div>

​

Answer 1

您需要通过添加flex-wrap:wrap来告诉元素进行包装。

​

.container {
  width:100vw;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
}
.element {
  height: 100px;
  padding: 30px;
  box-sizing: border-box;
}
.full {
  width: 100%;
}
.half {
  width: 50%;
}
#element-1 {
  background-color: pink;
}
#element-2 {
  background-color: wheat;
}
#element-3 {
  background-color: cadetBlue;
}
#element-4 {
  background-color: IndianRed;
}

<div class="container">
  <div class="element full" id="element-1">
    <h1>Title Here</h1>
  </div>
  <div class="element half" id="element-2">
    <h1>Title Here</h1>
  </div>
  <div class="element half" id="element-3">
    <h1>Title Here</h1>
  </div>
  <div class="element full" id="element-4">
    <h1>Title Here</h1>
  </div>
</div>

​

Answer 2

如果你想要满的元素总是占据整个页面的宽度，把flex容器放在外面会更容易：

<div class="element full" id="element-1">
  <h1>Title Here</h1>
</div>
<div class="container">
  <div class="element half" id="element-2">
    <h1>Title Here</h1>
  </div>
  <div class="element half" id="element-3">
    <h1>Title Here</h1>
  </div>
</div>
<div class="element full" id="element-4">
  <h1>Title Here</h1>
</div>

Answer 3

您可以在元素类中使用float:left，而在容器类中使用display: flex;。

​

.container {
  width:100vw;
  height: auto;
}
.element {
  height: 307px;
  padding: 30px;
  box-sizing: border-box;
  float:left;
}
.full {
  width: 100%;
}
.half {
  width: 50%;
}
#element-1 {
  background-color: pink;
}
#element-2 {
  background-color: wheat;
}
#element-3 {
  background-color: cadetBlue;
}
#element-4 {
  background-color: IndianRed;
}

<div class="container">
  <div class="element full" id="element-1">
    <h1>Title Here</h1>
  </div>
  <div class="element half" id="element-2">
    <h1>Title Here</h1>
  </div>
  <div class="element half" id="element-3">
    <h1>Title Here</h1>
  </div>
  <div class="element full" id="element-4">
    <h1>Title Here</h1>
  </div>
</div>

​