CSS：フレックスボックス内のフレックスボックス

フレックスボックスで少し遊んでいて、列と行のコンテナを組み合わせたいと思っていました。私が持っている質問は次のとおりです。CSS：フレックスボックス内のフレックスボックス

なぜ列内に配置された行要素がフレックスコンテナの幅全体に及んでいないのですか？

のコード例を次に示しますjs-fiddle

HTML：任意の助け

/* CSS: */ 
 

 
.flex-container { 
 
    color: blue; 
 
    background-color:yellow; 
 
    text-decoration: bold; 
 
    text-size: 1em; 
 
    display: flex; 
 
    justify-content:space-between; 
 
    align-items:center; 
 
} 
 
.horizontal { 
 
    flex-direction:row; 
 
    background-color: red; 
 
} 
 

 
.vertical { 
 
    flex-direction:column; 
 
}

<body> 
 
    <div class="flex-container vertical"> 
 
    <div class=flex-item>1 </div> 
 
    <div class=flex-item>2 </div> 
 
    <div class="flex-container horizontal" > 
 
    <div class=flex-item>3a </div> 
 
    <div class=flex-item>3b </div> 
 
    <div class=flex-item>3c </div> 
 
    </div> 
 
    <div class=flex-item>4 </div> 
 
    <div class=flex-item>5 </div> 
 
    </div> 
 
</body>

感謝を！

出典

2016-11-29 Raphael Kleindienst

あなた '.horizontal'コンテナは十分な幅ではありませんので。 'width：100％;'を追加します。 – Roberrrt

それはかなり簡単でした;）私はそれを試したと思った.. –

Hehe、すみません。コーヒーはまだ蹴られていない。また、幅が自動的に制限されない理由もわからないので、解決策が見つかるまでコメントとして投稿します。 – Roberrrt

これは、Flexboxの仕組みのためです。

.horizontalコンテナはフレックスチャイルドそのものなので、他のチャイルドのサイズに自動的に調整されます。 .horizontalの子である、オーバーフローするコンテンツのためのスペースのみを許可する。

手動によるアイテムのために作成された空間になります幅を適用し、justify-content: space-betweenがでキックします

ソリューションは、以下のルール変更：。

.horizontal { 
    flex-direction: row; 
    background-color: red; 
    width: 100%; 
}

出典

2016-11-29 10:35:17 Roberrrt

ありがとう、これは望ましい結果をもたらします。 Danieldからの解決策も幅広い行を生成しますが、要素は中心整列されていません –

をあなたが上align-items:center;を設定しているので、フレックスコンテナは、中心に置くことに加えて、アイテムは必要最小限のスペースしか占有しません。

このプロパティを設定していない場合は、デフォルト値のstretchが入力され、項目は全幅を占めます。

次に、@Michael_Bのようにフレキシブルアイテムにalign-self:centerを適用すると、アイテムをクロス軸に合わせることができます。

.flex-container { 
 
    color: blue; 
 
    background-color: yellow; 
 
    text-decoration: bold; 
 
    text-size: 1em; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.horizontal { 
 
    flex-direction: row; 
 
    background-color: red; 
 
} 
 

 
.vertical { 
 
    flex-direction: column; 
 
} 
 

 
.flex-item { 
 
    align-self: center; 
 
    /* center each flex item along the cross axis */ 
 
    text-align: center; 
 
    /* horizontally center content within flex item */ 
 
}

<body> 
 
    <div class="flex-container vertical"> 
 
    <div class=flex-item>1 </div> 
 
    <div class=flex-item>2 </div> 
 
    <div class="flex-container horizontal"> 
 
     <div class=flex-item>3a </div> 
 
     <div class=flex-item>3b </div> 
 
     <div class=flex-item>3c </div> 
 
    </div> 
 
    <div class=flex-item>4 </div> 
 
    <div class=flex-item>5 </div> 
 
    </div> 
 
</body>

出典

2016-11-29 11:27:32 Danield

'.horizontal'に' align-items：stretch'を適用するのがなぜうまくいかないのですか？ – Roberrrt

@Roberrrt発生するストレッチが**クロス軸**であることに注意する必要がある点を除いて、 '動作'します。フレックス方向が列の場合、ストレッチは水平方向に、フレックス方向がローの場合伸びが垂直に起こる – Danield

この答えは推論を釘付けにする。純粋なフレックスソリューションの場合、コンテナから 'align-items：center'を削除します。センタリングしたいフレックスアイテムに 'align-self：center'を追加します。ミドルアイテム（3a/b/c）はデフォルトで伸縮します：https://jsfiddle.net/cq0ecd5u/2/ –

CSS：フレックスボックス内のフレックスボックス

答えて

関連する問題