디스플레이 플렉스이 어제

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

가 좋아 그래서 난 그냥 않았다 정렬하고 바닥 글이 완벽하게 잘 작동 나의 랩 ID를 표시 플렉스 퍼팅 중심 없습니다. 오늘 내 레이아웃이 약간 변경 되었기 때문에 그럴 수도 있습니다. 그러나 foot div의 div를 나란히 정렬 할 수는 없습니다. 기본적으로 각 꼬리표는 바닥 글의 한 축을 따라 균등하게 분포 되길 원하지만 현재는 가로로가 아니라 세로로 쌓아 올리고 있습니다.

각 하위는 40이므로 40 X 3 (3 sub divs)의 합계는 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의의를 참조하는 간단한 경우이다.

* { 
 
    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>