高度相同的嵌套flexbox用于嵌套项目 [英] Nested flexbox with same height for nested items

问题描述

我正在尝试实施卡片模式(类似于材料设计)使用flexbox进行布局.每张卡都有标题和内容，并使用flexbox进行排列.

卡的宽度固定，因此，如果标头较长，则会自动换行，从而使标头变长.问题是我希望连续的每张卡看起来都一致，所以我希望连续的每张标头都具有相同的高度.

借助外部flexbox，卡的高度已经一致.我不知道如何使页眉的高度一致.

基本布局是:

<div class="flex-container">
    <div class="flex-item">
        <div class="flex-header">
            My header
        </div>
        <div class="flex-content">
            My content
        </div>
    </div>

    <div class="flex-item">
        <div class="flex-header">
            My header
        </div>
        <div class="flex-content">
            My content
        </div>
    </div>    
</div>

Flexbox CSS:

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item {
  width: 200px;
  margin: 10px;

  display: flex;
  flex-flow: column;
}

.flex-header {
  background-color: navy;
  font-size: 2em;
}

.flex-content {
}

我还有一个示例 codepen .

解决方案

所需的行为在只有一个HTML界面(即表格)中是唯一的.为了避免所有人对使用表格进行布局的烦恼和讲解，请尝试使用值为

<div class="flex-container">
    <div class="flex-item">
        <div class="flex-header">
            My header
        </div>
        <div class="flex-content">
            My content
        </div>
    </div>

    <div class="flex-item">
        <div class="flex-header">
            My header
        </div>
        <div class="flex-content">
            My content
        </div>
    </div>    
</div>

的display属性:

1. table
2. table-row
3. table-cell

要使用这些值，请阅读此.

CODEPEN

I am trying to implement a card pattern (similar to material design) making use of flexbox for layout. Each card has a header and a content and uses flexbox to arrange them.

Cards have a fixed width so if a header is long it will wrap, making that header longer. The problem is I want each card in a row to look consistent, so I want each header in a row to have the same height.

The height of the card is already consistent thanks to the outer flexbox. I don't know how to make the headers' height consistent.

the basic layout is:

<div class="flex-container">
    <div class="flex-item">
        <div class="flex-header">
            My header
        </div>
        <div class="flex-content">
            My content
        </div>
    </div>

    <div class="flex-item">
        <div class="flex-header">
            My header
        </div>
        <div class="flex-content">
            My content
        </div>
    </div>    
</div>

Flexbox css:

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item {
  width: 200px;
  margin: 10px;

  display: flex;
  flex-flow: column;
}

.flex-header {
  background-color: navy;
  font-size: 2em;
}

.flex-content {
}

I also have an example codepen.

解决方案

The behavior you want is unique found in only one HTML Interface which is the table. In order to avoid all the gripes and lecturing from everyone about using a table for layout, try using the display properties with the values of:

1. table
2. table-row
3. table-cell

For use of these values read this.

CODEPEN

这篇关于高度相同的嵌套flexbox用于嵌套项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！