我想要有两个相等高度的列,它们的内容应该是中间对齐的,所以在每个div的正中心.
问题：“等高”和“中间对齐”似乎排除了自己,一个不适用于另一个.
问题：如何创建一个具有两列宽度不同,高度相等且内容集中在每列中间的行？
<!-- 'middle aligned' and 'equal height' don't like each other ? -->
<div class="ui equal height center aligned grid">
<div class="row">
<div class="twelve wide purple column">
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
</div>
<div class="four wide red column middle aligned">
<div class="row">Forward</div>
</div>
</div>
</div>
解决方法
此布局的关键是将相同的高度应用于主要Flex容器.
然后使flex项嵌套flex容器,这可以使flex项的内容居中.
因此,顶层创造了相同的高度.第二级是中心.
(有关详细信息,请参阅底部的注释.)
以下是基于代码结构的示例：
body {
height: 300px; /* for demo purposes */
color: white;
}
flex-container {
display: flex; /* primary flex container */
flex-direction: row; /* horizontal alignment of flex items
(default value; can be omitted) */
align-items: stretch; /* will apply equal heights to flex items
(default value; can be omitted) */
height: 100%;
}
flex-item {
display: flex; /* nested flex container */
flex-direction: column; /* vertical alignment of flex items */
justify-content: center; /* center flex items vertically */
align-items: center; /* center flex items horizontally */
}
flex-item:first-child {
flex: 3; /* consume 3x more free space than sibling */
background-color: #a333c8;
}
flex-item:last-child {
flex: 1;
background-color: #db2828;
}
<flex-container>
<flex-item><!-- also flex container -->
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
<p>Text Text Text</p>
</flex-item>
<flex-item><!-- also flex container -->
<div>Forward</div>
</flex-item>
</flex-container>
人们有时会将flex项目及其内容视为一个元素.这是不正确的.
Flex容器的HTML结构有三个级别：
>容器
>该项目
>内容
因此,项目内的内容不代表项目;它代表一个单独的元素.
如果项目内的内容是文本,则它将成为匿名元素.
来自flexBox规范：
07001
Each in-flow child of a flex container becomes a flex item,and each
contiguous run of text that is directly contained inside a flex
container is wrapped in an anonymous flex item.
