在flexbox中居中放置内容的高度相等的列 [英] Equal height columns with centered content in flexbox

问题描述

我希望有两列高度相同的东西，它们的内容应该是中间对齐的，所以在每个div的中间。

问题：等高和中等对齐似乎排除自己，一个不与另一个工作。

问题：如何创建一个两列宽度不等，高度相等，内容居中的列？

 <！ - 'middle aligned'和'equal height'不喜欢彼此？ - > 
< div class =ui等高中心对齐网格> 
< div class =row> 
< div class =十二宽紫色列> 
< p>文字文字文字< / p> 
< p>文字文字文字< / p> 
< p>文字文字文字< / p> 
< p>文字文字文字< / p> 
< / div> 
< div class =四宽红色中间对齐> 
< div class =row>转发< / div> 
 
< / div> 
< / div> 
< / div> 
  

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

解决方案

此布局的关键是然后使Flex项目嵌套在Flex容器中，这可以将Flex项目的内容居中。

$ b

$ b

因此，顶层创建了相同的高度。第二个层次是集中的。

（请参阅底部的注释以获取更多详细信息。）

一个基于你的代码结构的例子：
$ b

body {height：300px; / *用于演示目的* / color：white;} flex-container {display：flex; / *主要柔性容器* / flex-direction：row; / * flex项目的水平对齐（默认值;可以省略）* / align-items：stretch; / *会将相等的高度应用于弹性项目（默认值;可以省略）* / height：100％;} flex-item {display：flex; / *嵌套柔性容器* / flex-direction：column; / * flex项目的垂直对齐* / justify-content：center; / *垂直中心弹性物品* / align-items：center; / *中心水平flex项目* /} flex-item：first-child {flex：3; / *消耗比兄弟更多的空闲空间* / background-color：＃a333c8;} flex-item：last-child {flex：1; < flex-background-color：＃db2828;}

b
$ b

jsFiddle demo

---

人们有时会考虑一个弹性项目，其内容是一个元素。这是不正确的。

一个flex容器的HTML结构有三个层次：

• 容器


• 项目


• 内容

$ b $因此，项目内的内容不代表项目;它代表一个单独的元素。

如果项目中的内容是文本，它将成为匿名元素。

flexbox spec：

4。 Flex项目

flex容器的每个in-flow子项都成为一个flex项目，每个
连续运行的文本是直接包含在一个flex
容器中的一个匿名flex项目中。

这就是为什么在上面的解决方案中， 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屋！