フレックスボックスレイアウト - 4 DIVS + Fullheight DIV

Question

フレックスボックスでこのレイアウトを実現しようとしていますが、黒いスペースはちょうどフルハイトのdivです。

あなたがこれを見ることができるように

は、それが現在のように見えるものです。

HTML

<div class="parent-container"> 
     <div class="cm-text child33"> 
      Developments must<br/> 
      consider the<br/> 
      connection of retail<br/> 
      with adjacent spaces<br/> 
      by focusing on<br/> 
      communicating with<br/> 
      people as communities<br/> 
      contribute in making a<br/> 
      sense of place by<br/> 
      generating life and<br/> 
      animation. 
     </div> 
     <div class="child33"> 
      <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_01.jpg)'}"></div> 
     </div> 
     <div class="child33"> 
      <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_02.jpg)'}"></div> 
     </div> 
     <div class="child33"> 
      <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_03.jpg)'}"></div> 
     </div> 
     <div class="child33" > 
      <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_04.jpg)'}"></div> 
     </div> 
    </div> 

CSS

.parent-container { 
    display: -ms-flexbox; 
    display: flex; 
    font-size: 0; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    height: 100vh; 
    width: 100vw; 
} 

.child33 { 
    position: relative; 
    -ms-flex-positive: 1; 
    flex-grow: 1; 
    height: 50%; 
    width: 33.3%; 
    max-width: calc(100% * (1/3)); 
    margin: 0; 
    position: relative; 
    -ms-flex-flow: nowrap row; 
    -o-flex-flow: nowrap row; 
    flex-flow: nowrap row; 
} 

私は私が間違っているつもりだところ、私は私がする必要がある知ってあまりにもわからないんだけど左手側の高さでdivを作成しますが、レイアウトに近づけて行と折り返しを使って幅と幅を調整する方法について少し混乱しますか？またはラップする列を使用しますか？ガイダンスは高く評価されるだろう。

Answer 1

大きな問題は、あなたがflex-direction: column;を使用する必要があります。私はまた、私たちが問題を見ることができ、実際に動作するコードを入力してくださいcm-text

html, body { 
 
    margin: 0; 
 
} 
 
.parent-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
.cm-text.child33 { 
 
    height: 100%; 
 
    background: black; 
 
    color: white; 
 
} 
 
.child33 { 
 
    height: 50%; 
 
    width: 33.3%; 
 
    max-width: calc(100% * (1/3)); 
 
} 
 
.img-wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: no-repeat center center/cover; 
 
}

<div class="parent-container"> 
 
    <div class="cm-text child33"> 
 
    Developments must<br/> 
 
    consider the<br/> 
 
    connection of retail<br/> 
 
    with adjacent spaces<br/> 
 
    by focusing on<br/> 
 
    communicating with<br/> 
 
    people as communities<br/> 
 
    contribute in making a<br/> 
 
    sense of place by<br/> 
 
    generating life and<br/> 
 
    animation. 
 
    </div> 
 
    <div class="child33"> 
 
    <div class="img-wrapper" style='background-image: url(http://lorempixel.com/100/100/city/1)'></div> 
 
    </div> 
 
    <div class="child33"> 
 
    <div class="img-wrapper" style='background-image: url(http://lorempixel.com/100/100/city/3)'></div> 
 
    </div> 
 
    <div class="child33"> 
 
    <div class="img-wrapper" style='background-image: url(http://lorempixel.com/100/100/city/2)'></div> 
 
    </div> 
 
    <div class="child33" > 
 
    <div class="img-wrapper" style='background-image: url(http://lorempixel.com/100/100/city/4)'></div> 
 
    </div> 
 
</div>

Answer 2

あなたは追加する必要があります：あなたの.parent-containerに

justify-content: flex-end; 

をし、ブロックは、ビューポートの右側に配置されます。

.parent-container { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    font-size: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-color: #000; 
 
} 
 

 
.child33 { 
 
    background-color: royalblue; 
 
    border:1px solid #000; 
 
    position: relative; 
 
    -ms-flex-positive: 1; 
 
    flex-grow: 1; 
 
    height: 50%; 
 
    width: 33.3%; 
 
    max-width: calc(100% * (1/3)); 
 
    margin: 0; 
 
    position: relative; 
 
    -ms-flex-flow: nowrap row; 
 
    -o-flex-flow: nowrap row; 
 
    flex-flow: nowrap row; 
 
}

<div class="parent-container"> 
 
     <div class="cm-text child33"> 
 
     Developments must<br/> 
 
     consider the<br/> 
 
     connection of retail<br/> 
 
     with adjacent spaces<br/> 
 
     by focusing on<br/> 
 
     communicating with<br/> 
 
     people as communities<br/> 
 
     contribute in making a<br/> 
 
     sense of place by<br/> 
 
     generating life and<br/> 
 
     animation. 
 
     </div> 
 
     <div class="child33"> 
 
     <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_01.jpg)'}"></div> 
 
     </div> 
 
     <div class="child33"> 
 
     <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_02.jpg)'}"></div> 
 
     </div> 
 
     <div class="child33"> 
 
     <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_03.jpg)'}"></div> 
 
     </div> 
 
     <div class="child33" > 
 
     <div class="img-wrapper" ng-style="{'background-image':'url(/assets/CM_SQUARE_04.jpg)'}"></div> 
 
     </div> 
 
    </div>