我想有两列等高，它们的内容应该居中对齐，因此在每个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>
http://jsfiddle.net/kjjd66zk/1/
此布局的关键是将相等的高度应用于主伸缩容器。
然后，将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容器的HTML结构具有三个级别：
因此，项目内部的内容不代表该项目；它代表一个单独的元素。
如果项目内的内容是文本，则它将成为匿名元素。
从flexbox规范：
4.弹性项目 flex容器的每个流入子元素都将成为一个flex项目，而直接包含在flex容器内的每个连续文本都将包裹在一个匿名flex项目中。
4.弹性项目
flex容器的每个流入子元素都将成为一个flex项目，而直接包含在flex容器内的每个连续文本都将包裹在一个匿名flex项目中。
这就是为什么在上面的解决方案中，flex项变为flex容器。它允许在flex项目（内容）的子项上使用flex属性。
