flexbox列中的高度相等吗？ [英] Equal height sections within flexbox columns?

问题描述

我将flexbox列用于基本的布局。下面有标题，图像和列表。列表必须带有边框，并且内容可以不同。可以在没有JavaScript的情况下使列表部分的高度相等吗？还是需要用JS计算最大截面高度并将其应用于其他人？

这就是我想要的：

这就是我所拥有的：

  .columns {display：flex;}。col {margin-left：20px;} ul {margin：0; } .list {padding：24px;边框：1像素蓝色；}  

 < div class = 列> < div class = col> < h3>标题< / h3> < div class = list> < ul> < li>列表项目< / li> < li>列表项目< / li> < / ul> < / div> < / div> < div class = col> < h3>标题< / h3> < div class = list> < ul> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < / ul> < / div> < / div>< / div>  

解决方案

由于两列都在同一个flex容器中，是的，仅使用CSS，列表框的高度可以相同（基于最高内容）。

< pre $ = snippet-code-css lang-css prettyprint-override> .columns {display：flex;}。col {display：flex; / *新* / flex-direction：列; / * new * / margin-left：20px;}。list {flex：1; / *新* /填充：24px;边框：1像素蓝色；} ul {边距：0；}

 < div class = columns> < div class = col> < h3>标题< / h3> < div class = list> < ul> < li>列表项目< / li> < li>列表项目< / li> < / ul> < / div> < / div> < div class = col> < h3>标题< / h3> < div class = list> < ul> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < / ul> < / div> < / div>< / div>  

还有更多示例：

jsFiddle演示

  .columns {display：flex;}。col {display ： 柔性; / *新* / flex-direction：列; / * new * / margin-left：20px;}。list {flex：1; / *新* /填充：24px;边框：1像素蓝色；} ul {边距：0；}  

 < div class = columns> < div class = col> < h3>标题< / h3> < div class = list> < ul> < li>列表项目< / li> < li>列表项目< / li> < / ul> < / div> < / div> < div class = col> < h3>标题< / h3> < div class = list> < ul> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < / ul> < / div> < / div>< / div>< br>< div class = columns> < div class = col> < h3>标题< / h3> < div class = list> < ul> < li>列表项目< / li> < li>列表项目< / li> < / ul> < / div> < / div> < div class = col> < h3>标题< / h3> < div class = list> < ul> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < / ul> < / div> < / div>< / div>< br>< div class = columns> < div class = col> < h3>标题< / h3> < div class = list> < ul> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < li>列表项目< / li> < / ul> < / div> < / div> < div class = col> < h3>标题< / h3> < div class = list> < ul> < li>列表项目< / li> < li>列表项目< / li> < / ul> < / div> < / div>< / div>  

I'm using flexbox columns for a pretty basic layout. There is a header, image and a list below. List must have a border and can have varying contents. Is it possible to have those list sections equal height based on the biggest without JavaScript? Or one needs to calculate the biggest section height with JS and apply it to others?

This is what I want:

This is what I have:

.columns {
  display: flex;
}

.col {
  margin-left: 20px;
}

ul {
  margin: 0; 
}

.list {
  padding: 24px;
  border: 1px solid blue;
}

<div class="columns">

  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

</div>

解决方案

Since both columns are inside the same flex container, yes, the list boxes can be the same height (based on the tallest content) using only CSS.

.columns {
  display: flex;
}

.col {  
  display: flex;          /* new */
  flex-direction: column; /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

Here are a few more examples:

jsFiddle demo

.columns {
  display: flex;
}

.col {
  display: flex;           /* new */
  flex-direction: column;  /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                 /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

<br>

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

<br>

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>        
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

这篇关于flexbox列中的高度相等吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！