HTML/CSS div 가로 배열 3등분, 양옆으로 (flex 속성)

실제 배열에 영향을 주지 않는 css는 html 태그에 박아버렸어요.

 

div를 가로로 나열해볼게요.

기본적으로 div는 display: block; 속성이여서 자동적으로 줄바꿈이 됩니다.

 

<div class="child" style="width: 100px; height: 100px; background: #2E9AFE;">

</div>
<div class="child" style="width: 100px; height: 100px; background: #FA5858;">

</div>
<div class="child" style="width: 100px; height: 100px; background: #81F781;">

</div>

 

가로 3등분

이걸 가로로 배열시켜 볼게요. 우선, 상위 div를 만들어줄거에요.

그다음 flex 속성을 이용해서 가로로 배열시킬건데요.

상위 div에는 display: flex; 를 주고

배열하고자하는 하위 div는 flex 속성의 값으로 유동적으로 각각의 비율을 맞출 수 있어요.

이 예제에서는 모두 간격을 똑같이 할거라 모두 동일하게 flex: 1;로 설정할게요.

 

<div class="parent" style="width: 300px; height: 100px; background: #585858;">
    <div class="child" style="background: #2E9AFE;">

    </div>
    <div class="child" style="background: #FA5858;">

    </div>
    <div class="child" style="background: #81F781;">

    </div>
</div>

 

.parent {
    display: flex;
}
.child {
    flex: 1;
}

 

양옆 배치

태그를 하나 빼버리면 두개로 나란히 배치가 될거에요.

너비를 조정하고 싶을 땐 상위 div의 width 값을 조정하면 됩니다.

 

<div class="parent" style="width: 300px; height: 100px; background: #585858;">
    <div class="child" style="background: #2E9AFE;">

    </div>
    <div class="child" style="background: #FA5858;">

    </div>
</div>

 

 

div 너비 크기를 다르게 하고 싶을 때

하위 div의 flex 값을 다르게 주면 되요.

 

<div class="parent" style="width: 300px; height: 100px; background: #585858;">
    <div class="child1" style="background: #2E9AFE;">

    </div>
    <div class="child2" style="background: #FA5858;">

    </div>
</div>

 

.parent {
    display: flex;
}
.child1 {
    flex: 2;
}
.child2 {
    flex: 1;
}