无论内容如何，如何使每个列标题具有相同大小的 flexbox 布局？ [复制]答案

【问题标题】：How can I have a flexbox layout with each column header the same size regardless of content? [duplicate]无论内容如何，如何使每个列标题具有相同大小的 flexbox 布局？ [复制]
【发布时间】：2020-01-16 22:42:54
【问题描述】：

我想将 3 列（标题和内容）与 CSS 对齐，如下所示：

（标题和内容需要对齐）

我的尝试：https://codepen.io/vanicf01/pen/XWJPRLO?editors=1100#0

HTML - 无法更改：

.container {
  display: flex;
}

.item-a {
  width: 150px;
  background-color: red;
}

.item-b {
  width: 150px;
  background-color: green;
}

.item-c {
  width: 150px;
  background-color: blue;
}

.header {
  background-color: #666666;
  padding: 8px 0 8px 8px;
}

.content {
  border: solid 2px black;
  background-color: yellow;
}

<div class="container">
  <div class="item-a">
    <div class="header">Header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="item-b">
    <div class="header">Bigger header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="item-c">
    <div class="header">The biggest header ever</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

【问题讨论】：

Check out this very good flexbox tutorial. 另一个提示，如果要使用 flexbox，请不要将宽度设置为固定的 px 值。
你想使用 flex 但除了display: flex 之外什么也没做。您可能希望将宽度更改为 %。尝试为您的每个项目设置 5%，您的标题将被修复。您可能还想为标题设置高度 %。
如果你不想要一个固定的标题高度并且你不能改变布局你可能需要一些 js 来做这个
基本上，没有设置固定高度：你不能用 CSS 做到这一点 - stackoverflow.com/questions/56711501/…

标签： html css flexbox

【解决方案1】：

在标题上使用 min 和 max-height，这样它的工作就可以了。

.container {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
        }
        
        .item-a {
            width: 100%;
            background-color: red;
            flex-direction: column;
        }
        
        .item-b {
            width: 100%;
            background-color: green;
            flex-direction: column;
        }
        
        .item-c {
            width: 100%;
            background-color: #00f;
            flex-direction: column;
        }
        
        .header {
            background-color: #666;
            min-height: 60px;
            max-height: 60px;
            padding: 5px 3px 0;
            line-height: 15px;
            font-size: 15px;
        }
        
        .content {
            border: solid 2px black;
            background-color: yellow;
        }

<div class="container">
        <div class="item-a">
            <div class="header">Header</div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </div>
        </div>
        <div class="item-b">
            <div class="header">Bigger header</div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
        </div>
        <div class="item-c">
            <div class="header">The biggest header ever</div>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>

【讨论】：

【解决方案2】：

将 .header 设置为固定高度，如 height: 35px，还添加 display: flex; align-items: center 以垂直对齐它们。然后 .content 添加height: 100%。

.container {
  display: flex;
}

.item-a {
  width: 150px;
  background-color: red;
}

.item-b {
  width: 150px;
  background-color: green;
}

.item-c {
  width: 150px;
  background-color: blue;
}

.header {
  background-color: #666666;
  padding: 8px 0 8px 8px;
  height: 35px;
  display: flex;
  align-items: center;
}

.content {
  border: solid 2px black;
  background-color: yellow;
  height: 100%;
}

<div class="container">
  <div class="item-a">
    <div class="header">Header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="item-b">
    <div class="header">Bigger header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="item-c">
    <div class="header">The biggest header ever</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

试试这个：在内容中添加height: 100%，并在header 和height 中添加flex 和align-items: flex-end;。

.container {
  display: flex;

}

.item-a {
  width: 150px;
  background-color: red;
}

.item-b {
  width: 150px;
  background-color: green;
}

.item-c {
  width: 150px;
  background-color: blue;
}

.header {
  background-color: #666666;
  padding: 8px 0 8px 8px;
  height: 30px;
  display: flex;
  align-items: flex-end;
}

.content {
  border: solid 2px black;
  background-color: yellow;
  height: 100%;
}

<div class="container">
  <div class="item-a">
    <div class="header">Header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="item-b">
    <div class="header">Bigger header</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="item-c">
    <div class="header">The biggest header ever</div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

【讨论】：