flex box

플렉스 박스는 요소 안의 자식태그를 정렬할 때 사용합니다.

정렬하고자 하는 요소들의 부모태그에 css 규칙 중 display 속성 속성값을 flex로 설정하면 됩니다.

	.selector {
    	display: flex;
	}

flex를 적용하지 않은 코드(아래)

<div class="container">
    <div class="red">1</div>
    <div class="blue">2</div>
    <div class="green">3</div>
</div>

위 코드에 link된 CSS 내의 .container 선택자에 display: flex; 규칙을 추가하면

위처럼 .container의 자녀 div 태그들이 더 이상 block으로서 위 아래로 정렬되지 않고 좌우로 정렬됩니다. 두번째 그림처럼 자녀태그들은 부모태그의 content 영역을 채웁니다.

.container 의 height 를 500px로 늘리면

.container 박스모델의 content 영역을 가득 채우면서 정렬됩니다.

플렉스 박스에는 기본축(main-axis)과 교차축(cross-axis)이 있는데 그 안의 요소들은 기본축 방향을 따라 정렬되는 것입니다.

기본축의 방향은 flex-direction 속성으로 변경할 수 있습니다.

flex-direction: row; 좌-우
flex-direction: column; 상-하
flex-direction: row-reverse; 우-좌
flex-direction: column-reverse; 하-상

{display: flex;} 만 입력하면 기본축 방향은 자동으로 좌에서 우로 설정됩니다.
{flex-dirextion: row} 로 자동으로 정해지는 겁니다.

이미지 추가

1번 박스 안에 4번 박스를 추가하고 100px * 100px 이미지를 추가하면

<div class="container">
    <div class="red">
        1
        <div class="yellow">4</div> <!--4번 박스--> 
    </div>
    <div class="blue">2</div>
    <div class="green">3</div>
    <img src="img1.png"> <!--100px * 100px -->
</div>

100px 이미지가 500px .container 높이에 맞춰 늘어난 걸 볼 수 있습니다.

요소의 크기

flex-grow

플렉스박스 안의 요소에 flex-grow 속성을 추가하면 기본축 방향으로 플렉스 박스가 채워지도록 해당 요소의 크기가 늘어납니다.

파란 박스에 flex-grow: 1; 선언을 추가하니 width가 컨테이너를 채울 때까지 늘어났습니다.
flex-grow의 기본 속성값은 0이고 숫자가 클수록 플렉스 박스에서 더 큰 비율을 차지합니다.

flex-shrink

flex-shrink의 속성값도 숫자의 크기에 따라 요소의 크기가 결정됩니다.

1, 2, 3번 박스 모두 width: 100%; 선언 후
2번은 flex-shrink: 3;
3번은 flex-shrink: 2;
선언을 추가한 모습입니다.