表示フレックスこの昨日

Question

#footer, #container:after{ 
 

 
\t height: 150px; 
 
} 
 

 

 
#footer{ 
 

 
\t background-color: #006699; 
 
\t clear: both; 
 
} 
 

 
#wrap { 
 
\t margin: 0 auto; 
 
\t width: 100%; 
 
\t display: flex; 
 
\t align-items: center; 
 
\t flex-wrap: nowrap; 
 
} 
 

 
#sub { 
 

 
\t padding: 12px; 
 
\t width: 32%; 
 
\t height: 40px; 
 
\t color: white; 
 
\t border-right: solid white 1px; 
 
} 
 

 
.sub:last-child{ 
 

 
\t border: 0px; 
 
}

<div id="footer"> 
 
\t <div class="wrap"> 
 
\t \t <div class="sub">Lorem Ipsum</div> 
 
\t \t <div class="sub">Lorem Ipsum </div> 
 
\t \t <div class="sub">Lorem Ipsum </div> 
 
\t </div> 
 
</div> 
 
\t

は、[OK]をので、私はちょうどでした合わせるとフッタは完全にうまく働いた中で、私のラップIDに表示フレックスを入れて中央に配置されません。今日私のレイアウトは若干変更されているので、それが原因かもしれませんが、フッタIDのdivを並べて並べることはできません。基本的には、各divがフッターの1つの軸に沿って均等に分散されるようにしたいが、現在は水平方向ではなく垂直方向に積み重ねています。

各サブは40なので、40 X 3（3つのサブディビジョン）の合計120は、フッターの全高から遠く150pxです。私はフレックスラップを作りました。なぜこの問題が起こっているのか誰も助けてくれますか？

<div id="footer"> 
    <div class="wrap"> 
     <div class="sub">Lorem Ipsum</div> 
     <div class="sub">Lorem Ipsum </div> 
     <div class="sub">Lorem Ipsum </div> 
    </div> 
</div> 

Answer 1

これは、あなたのCSSのではなくクラスでIDを参照する単純なケースです。

#wrap/#subではなく.wrap/.sub

* { 
 
    box-sizg:border:box; 
 
    } 
 

 
#footer { 
 
    height: 150px; 
 
    background-color: #006699; 
 
} 
 
.wrap { 
 
    display: flex; 
 
    align-items:center; 
 
} 
 
.sub { 
 
    padding: 12px; 
 
    width: 32%; 
 
    height: 40px; 
 
    color: white; 
 
    border-right: solid white 1px; 
 
}

<div id="footer"> 
 
    <div class="wrap"> 
 
    <div class="sub">Lorem Ipsum</div> 
 
    <div class="sub">Lorem Ipsum</div> 
 
    <div class="sub">Lorem Ipsum</div> 
 
    </div> 
 
</div>