如何使用 flexbox 设置 div 的宽度答案

【问题标题】：How to set divs width with flexbox如何使用 flexbox 设置 div 的宽度
【发布时间】：2021-01-06 16:44:49
【问题描述】：

我正在使用带有多个 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>

【问题讨论】：

标签： html css layout flexbox

【解决方案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>

【讨论】：

【解决方案2】：

如果您希望元素 full 始终占据页面的整个宽度，则将 out of 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>

【讨论】：

【解决方案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>

【讨论】：