时间戳

首页 > 解决方案 > 如何在 flexbox 布局中每行显示 4 个 div？

html - 如何在 flexbox 布局中每行显示 4 个 div？

问题描述

我试图每行显示 4 个框。box1 box2 box3 box4. 我只使用 flexbox 方法。下面是我正在使用的 HTML 和 CSS 代码。 

.parent {
  display: flex;
  flex-wrap: wrap;
}

.parent>.child {
  flex: 1 0 21%;
}
<div class="parent">
  <div class="child box1">A Child</div>
  <div class="child">
    <div class="box2">B Child 1</div>
    <div class="box3">B Child 2</div>
    <div class="box4">B Child 3</div>
    <div class="box5">B Child 4</div>
    <div class="box6">B Child 5</div>
    <div class="box7">B Child 6</div>
  </div>
  <div class="child box8"></div>
</div>

但是div1并div8没有定位。

标签： htmlcss

解决方案

这是根据div他们在一行中占据的空间调整每行的孩子宽度的方法：

您需要选择每一个div，结果将基于flex-grow您设置的所有属性编号的平均值。

请注意，该属性 是flex: 和 的 组合。flex-growflex-basis flex-shrink

你可以在 css-tricks.com 上阅读更多关于使用 CSS 的Flexbox

.container {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: lightgray;
  text-align: center;
}

.row>div:nth-child(1) {
  border: 1px solid black;
  flex: 1;
  margin: 2px;
}

.row>div:nth-child(2) {
  border: 1px solid black;
  flex: 2;
  margin: 2px;
}

.row>div:nth-child(3) {
  border: 1px solid black;
  flex: 1;
  margin: 2px;
}

.row>div:nth-child(4) {
  border: 1px solid black;
  flex: 3;
  margin: 2px;
}
<div class="container">
  <div class="row">
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
  </div>
  <div class="row">
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
  </div>
</div>

推荐阅读