在 flexbox 中具有居中内容的等高列 [英] Equal height columns with centered content in flexbox

问题描述

我想要两列等高，它们的内容应该居中对齐，所以在每个 div 的正中央.

问题:等高"和中间对齐"似乎相互排斥，一个不适用另一个.

问题:如何创建具有两列的行，两列的宽度不同，高度相等，并且它们的内容在每列的中间居中?

<!-- 居中对齐"和等高"不喜欢?--><div class="ui 等高居中对齐网格"><div class="row"><div class="十二宽紫柱"><p>文本 文本 文本</p><p>文本 文本 文本</p><p>文本 文本 文本</p><p>文本 文本 文本</p>

<div class="四宽红柱居中对齐"><div class="row">前进</div>

http://jsfiddle.net/kjjd66zk/1/

解决方案

这种布局的关键是对主 flex 容器应用相同的高度.

然后让flex item嵌套flex容器，可以使flex item的内容居中.

因此，顶层创建了相等的高度.第二层做居中.

(请参阅底部的注释了解更多详情.)

以下是基于您的代码结构的示例:

body {高度:300px；/* 用于演示目的 */白颜色;}弹性容器{显示:弹性；/* 主弹性容器 */弹性方向:行；/* 弹性项目的水平对齐(默认值；可以省略)*/对齐项目:拉伸；/* 将对弹性项目应用相同的高度(默认值；可以省略)*/高度:100%；}弹性项目{显示:弹性；/* 嵌套的弹性容器 */弹性方向:列；/* 弹性项目的垂直对齐 */对齐内容:居中；/* 垂直居中 flex 项目 */对齐项目:居中；/* 水平居中 flex 项目 */}弹性项目:第一个孩子{弹性:3；/* 消耗的可用空间是兄弟的 3 倍 */背景颜色:#a333c8；}弹性项目:最后一个孩子{弹性:1；背景颜色:#db2828；}

<flex-item><!-- 也是弹性容器--><p>文本 文本 文本</p><p>文本 文本 文本</p><p>文本 文本 文本</p><p>文本 文本 文本</p></flex-item><flex-item><!-- 也是弹性容器--><div>前进</div></flex-item></flex-container>

jsFiddle 演示

<小时>

人们有时将弹性项目及其内容视为一个元素.这是不正确的.

flex 容器的 HTML 结构分为三个层次:

• 容器
• 项目
• 内容

因此，item里面的内容不代表item；它代表一个单独的元素.

如果项目内的内容是文本，则它成为匿名元素.

来自 flexbox 规范:

<块引用>

4.弹性项目

flex 容器的每个 in-flow 子元素都变成了一个 flex item，并且每个直接包含在 flex 中的连续文本容器被包裹在一个匿名的弹性项目中.

这就是为什么在上面的解决方案中，弹性项目变成了弹性容器.它允许在 flex 项(内容)的子项上使用 flex 属性.

I'd like to have two columns of equal height and their content should be middle aligned, so in the very center of each div.

Problem: 'equal height' and 'middle aligned' seem to exclude themselves, the one doesn't work with the other.

Question: How can I create a row with two columns with different width, equal height and their content centered in the middle of each column?

<!-- '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/

解决方案

The key to this layout is to apply equal heights to the primary flex container.

Then make the flex items nested flex containers, which can center the content of the flex items.

Hence, the top level creates the equal height. The second level does the centering.

(See the note at the bottom for more details.)

Here's an example based on your code structure:

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>

jsFiddle demo

---

People sometimes consider a flex item and its content to be one element. This is not correct.

The HTML structure of a flex container has three levels:

• the container
• the item
• the content

Therefore, the content inside an item does not represent the item; it represents a separate element.

If the content inside an item is text, it becomes an anonymous element.

From the flexbox spec:

4. Flex Items

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.

That's why, in the solution above, the flex item becomes a flex container. It enables the use of flex properties on the children of the flex item (the content).

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