Question

为什么块.b具有不同的宽度？如何设置为相等？

.parent {
  display: flex;
}

.parent>div {
  flex: 1 1 auto;
}

.parent .b {
  display: flex;
}

<div class="parent">
  <div class="cell">
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
  <div>

为什么块<div class="cell">具有不同的宽度？

Answer 1

第二次重新编辑**

您可以做的第一选择就是在父元素上设置flex，因为这只会影响其下的第一个元素，在这种情况下为cell类，我将在单元格类上添加边框这样您就可以看到效果了

  <div class="parent">
      <div class="cell">
        <div class="b"></div>
      </div>
      <div class="cell">
        <div class="b"></div>
      </div>
      <div class="cell">
        <div class="b"></div>
      </div>
      <div class="cell">
        <div class="b"></div>
      </div>
  <div>

.parent {
  display: flex;
  width: 70%;
}

.cell {
  width: 20%;
  height: 100px;
  border: 1px solid orange;
}

在这里您可以设置父级宽度的大小，该大小将是整个屏幕的大小，然后您可以设置.cell子级的宽度，然后它们都将是相同的，但只能是最大父级

**您可以做的第二个选择

这是一个更简单的版本，我添加了3个不同的类来说明如何选择所需的尺寸

<div class="parent">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
<div>

.parent {
  display: flex;
  width: 80%;
  height: 100px;
}

.a {
  flex: 40%;
  border: 1px solid greenyellow;
}
.b {
  flex: 20%;
  border: 1px solid orange;
}
.c {
  flex: 20%;
  border: 1px solid blue;
}

当然，您可以将它们改回来，并把它们全部称为同一类，只分配一个宽度，然后它们都将相同...我希望这会有所帮助

Answer 2

编辑：使用CSS网格并自动调整：

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.parent>div {
  background-color: lightblue;
  margin-left: 5px;
}

<div class="parent">
  <div class="cell">
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
  <div class="cell">>
    <div class="b"></div>
  </div>
</div>

Answer 3

我认为它们的宽度相同。您需要使用此CSS而不是.parent>div选择器

.cell {
  flex: 1 1 auto;
}

.parent {
  display: flex;
}

.cell {
  flex: 1 1 auto;
}

.parent .b {
  display: flex;
  align-items: center;
  justify-content: center;
}

.b {
  height: 50px;
}
.cell:nth-child(1) {
  background: red;
}
.cell:nth-child(2) {
  background: yellow;
}
.cell:nth-child(3) {
  background: green;
}
.cell:nth-child(4) {
  background: teal;
}

<div class="parent">
  <div class="cell">
    <div class="b">hi</div>
  </div>
  <div class="cell">
    <div class="b">hi</div>
  </div>
  <div class="cell">
    <div class="b">hi</div>
  </div>
  <div class="cell">
    <div class="b">hi</div>
  </div>
<div>

如何为flex元素设置相等的宽度？

3 个答案: