2017-05-16 12 views
1

複数のフレックスコンテナを使用するのは悪い習慣ですが、実際にフレックスアイテムのコンテナはフレックスしていますか?フレックスボックス:複数のコンテナ、フレキシブルアイテムのコンテナ?

ディスプレイに割り当てられるメインのdivが1つあります。flex:次に2つのdivがあり、flex-grow:1が割り当てられ、それぞれが50%ずつ正確に表示されます。

各DIVには内容が多いDIVがありますが、その内容を垂直に揃えたいので、ディスプレイを適用できますか?

多分私はフレックスボックスについて妄想しすぎていますか?

私はフレックスボックスを最近発見しましたが、私にとってはCSSの問題をたくさん修正しているようですので、私はそれをたくさん使っています。

アイデア?

ありがとうございました。あなたは以下のそれを使用することができます

+3

例です。要素は、フレックスチャイルド/アイテムとフレックスコンテナに同時にできます。 – CBroe

+1

あなたはそれを使うことができます、私は実際の例を投稿します。 – LKG

答えて

1

はい、それは絶対に大丈夫です

 .main { 
 
      display: flex; 
 
     } 
 
     .child { 
 
      flex:1; 
 
      border:1px solid tomato; 
 
     } 
 
     .content { 
 
      display: flex; 
 
      justify-content: flex-start; 
 
      align-items: center; 
 
      flex-flow: column nowrap; 
 
     } 
 
     .content-child{ 
 
      padding: 5px; 
 
     }
<div class="main"> 
 
    <div class="child"> 
 
     <div class="content"> 
 
      <div class="content-child"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
      <div class="content-child"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="child"></div> 
 
</div>

関連する問題