Question

我有一个flex div，如下所示，但按钮与下面的框不对齐。

如何在保持弯曲的同时使它们彼此对齐（从顶部到底部）？

任何想法都有帮助。谢谢！

.flex {
  display: flex;
}
.flex-child {
  flex: 1 1 auto;
  margin-right: 5px;
}
.boxed-flex {
  flex: 1 1 auto;
  margin-right: 5px;
  border: 4px solid green;
}

<div class="flex">
  <button class="flex-child" onclick="circumfrance()">Circumfrance</button>
  <button class="flex-child" onclick="area()">Area</button>
  <button class="flex-child" onclick="diameter()">Radius &rarr; Diameter</button>
  <button class="flex-child" onclick="radius()">Diameter &rarr; Radius</button>
</div>

<div class="flex">
  <div class="boxed-flex">
    <strong><p id="circumfrance"style="color:purple;"></p></strong>
  </div>
  <div class="boxed-flex">
    <strong><p id="area"style="color:purple;"></p></strong>
  </div>
  <div class="boxed-flex">
    <strong><p id="diameter"style="color:purple;" ></p></strong>
  </div>
  <div class="boxed-flex">
    <strong><p id="radius" style="color:purple;"></p></strong>
  </div>
</div>

Answer 1

您正在使用flex: 1 1 auto调整弹性项目的大小。这是：

的简写

flex-grow: 1
flex-shrink: 1
flex-basis: auto

问题是最后一个组成部分。

使用flex-basis: auto，您可以根据广告的宽度调整项目大小。但按钮和绿色框的宽度不同。因此，列不对齐。

相反，请使用flex: 1 1 0（与flex: 1相同）。

这会将flex-basis设置为0.现在，这些项目将简单地在容器中均匀分配可用空间。

＆＃13;

.flex {
  display: flex;
}
.flex-child {
  flex: 1;
  margin-right: 5px;
}
.boxed-flex {
  flex: 1;
  margin-right: 5px;
  border: 4px solid green;
}

＆＃13;

<div class="flex">
  <button class="flex-child" onclick="circumfrance()">Circumfrance</button>
  <button class="flex-child" onclick="area()">Area</button>
  <button class="flex-child" onclick="diameter()">Radius &rarr; Diameter</button>
  <button class="flex-child" onclick="radius()">Diameter &rarr; Radius</button>
</div>

<div class="flex">
  <div class="boxed-flex">
    <strong><p id="circumfrance"style="color:purple;"></p></strong>
  </div>
  <div class="boxed-flex">
    <strong><p id="area"style="color:purple;"></p></strong>
  </div>
  <div class="boxed-flex">
    <strong><p id="diameter"style="color:purple;" ></p></strong>
  </div>
  <div class="boxed-flex">
    <strong><p id="radius" style="color:purple;"></p></strong>
  </div>
</div>

＆＃13;

Answer 2

只需在按钮类中添加width：0即可。因为，按钮具有默认的自动大小宽度。这样就可以防止自动调整大小。

.flex-child {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex:  1 1 auto;
    -webkit-flex:  1 1 auto;
    -ms-flex:  1 1 auto;
    flex:  1 1 auto;
    margin-right:5px;
    width: 0px;
}

将两行弹性项对齐到列

2 个答案: