web-dev-qa-db-ja.com

flexbox

同じ高さの2つの列があり、それらのコンテンツは中央に配置される必要があるので、各divの中央に配置します。

問題：「等しい高さ」と「中央揃え」はそれ自体を除外しているようで、一方が他方と一緒に機能しません。

質問：幅が異なり、高さが等しい2つの列と、各列の中央にコンテンツが配置された行を作成するにはどうすればよいですか？

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

htmlcssflexboxsemantic-ui
11
Raggamuffin

このレイアウトの鍵は、プライマリフレックスコンテナーに同じ高さを適用することです。

次に、フレックスアイテムのネストされたフレックスコンテナーを作成します。これにより、フレックスアイテムのコンテンツを中央に配置できます。

したがって、トップレベルは同じ高さを作成します。 2番目のレベルは中央揃えを行います。

（詳細については、下部の注を参照してください。）

これは、コード構造に基づく例です。

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デモ

フレックスアイテムとそのコンテンツを1つの要素と見なす場合があります。これは正しくありません。

フレックスコンテナーのHTML構造には3つのレベルがあります。

  • コンテナ
  • アイテム
  • コンテンツ

したがって、アイテム内のコンテンツはアイテムを表していません。別の要素を表します。

アイテム内のコンテンツがテキストの場合、それは匿名要素になります。

From flexbox spec：

4。フレックスアイテム

フレックスコンテナーのインフローの各子はフレックスアイテムになり、フレックスコンテナー内に直接含まれる連続する各テキストは匿名フレックスアイテムにラップされます。

そのため、上記のソリューションでは、フレックスアイテムがフレックスコンテナーになります。フレックス項目の子（コンテンツ）でフレックスプロパティを使用できるようにします。

28
Michael_B

要素に高さを与える必要があります

.height {
  height: 300px;
}
.row {
  height: 100%;
}
.row > div {
  height: 100%;
}

更新されたフィドル1

垂直方向に中央揃えにしたい場合は、上に更新します.row > divルール

.row > div {
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

更新されたフィドル2

4
LGSon