Flexbox 大小均匀的元素，无论内容如何

Posted 2023-03-06

【中文标题】Flexbox 大小均匀的元素，无论内容如何

【英文标题】：Flexbox evenly sized elements regardless of contents

【发布时间】：2015-11-01 18:07:47

【问题描述】：

如何让每个方块的大小都一样？？？

Preview Issue on JSBIN | View Issue Code on JSBIN

我正在使用 flexbox 来创建网格布局。大多数网格单元没有内容，而一些网格单元确实有内容。当一个单元格有内容时，它会把所有东西都扔掉。 我怎样才能确保所有单元格都与内容无关？

html

我有三行，每行有三个单元格。只有中心单元格的中间行包含子级。

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div>
  <div></div>
  <div><span>contains span</span></div>
  <div></div>
</div>

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

在 css 中，中心空间比其他方格大。

body, html 
  height: 100%;


body 
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;


body>div 
  display: flex;


body>div>div 
  border: solid 1px blue;


div 
  flex-grow: 1;


body>div:nth-child(2)>div:nth-child(2) 
  display: flex;
  align-items: center;
  justify-content: center;

【参考方案1】：

您应使用flex-basis 指定灵活项的初始长度。

body, html 
  height: 100%;


body 
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;


body>div 
  display: flex;


body>div>div 
  border: solid 1px blue;


div 
  flex-grow: 1;
   flex-basis: 80px; /*set the initial length*/


body>div:nth-child(2)>div:nth-child(2) 
  display: flex;
  align-items: center;
  justify-content: center;

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div>
  <div></div>
  <div><span>contains span asdsa asd asd asd asdsad ads asd sad</span></div>
  <div></div>
</div>

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：

为什么是 80px？当宽度取决于浏览器大小时，你怎么知道 80px？

可能是百分比。不一定是px，但我只是举个例子

设置flex-basis: 0 如果你只想均匀分布就可以了

flex-basis: 0 是解决这个问题的关键。谢谢@Icycool

【参考方案2】：

您正在使用flex-grow: 1。这意味着弹性项目的初始宽度将是其内容的宽度，然后可用空间将平均分配。

但是，您希望弹性项目具有相同的宽度，因此您希望忽略其内容的宽度。您可以通过

flex: 1;

另外，Flexbox 引入了auto 作为min-width 的初始值。在某些情况下，这可能会产生不同的宽度，因此为了安全起见，最好添加min-width: 0 或将overflow 设置为除visible 之外的任何内容

body,
html 
  height: 100%;

body 
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;

body > div 
  display: flex;

body > div > div 
  border: solid 1px blue;

div 
  flex: 1;
  min-width: 0;

body > div:nth-child(2) > div:nth-child(2) 
  display: flex;
  align-items: center;
  justify-content: center;

<div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div><span>contains span</span></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：

这是一个很好的解决方案，因为flex 是简写； flex-grow、flex-shrink 和 flex-basis。这些的默认值是；分别为 0、1 和自动。所以一般的解决方案是：flex-grow: 1; flex-shrink: 1; flex-basis: 0;。注意flex-basis是0，而不是默认的auto，因为如果你给flex设置了一个单一的数值，那么默认就真的像1 0（和省略flex-basis一样）。建议使用简写版本。

【参考方案3】：

只需设置 33% flex-basis

  body>div>div 
      border: solid 1px blue;
      flex: 0 0 33%;
    

body, html 
  height: 100%;


body 
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;


body>div 
  display: flex;


body>div>div 
  border: solid 1px blue;
  flex: 0 0 33%;


div 
  flex-grow: 1;


body>div:nth-child(2)>div:nth-child(2) 
  display: flex;
  align-items: center;
  justify-content: center;

   <div>
      <div></div>
      <div><span>contains span</span></div>
      <div></div>
    </div>
   <div>
      <div></div>
      <div></div>
      <div></div>
    </div>
      
   <div>
      <div></div>
      <div></div>
      <div></div>
    </div>