Flexbox

Flexbox를 이용할 때 반드시 알아야 하는 것

1. Flexbox의 구성

• flex-container : 정렬이 피룡한 요소를 감싸는 요소 (부모)
• item : 정렬을 적용할 요소 (자식)
  (flex-container와 item에 사용되는 flex 관련 css 속성이 나누어져있음)

2. Flexbox의 축

• 중심축(main축)
• 교차축, 반대축(main축 방향에 따라 바뀜)

html code

<div class="flex-container">
	<div class="item item1">item1</div>
	<div class="item item2">item2</div>
	<div class="item item3">item3</div>
	<div class="item item4">item4</div>
	<div class="item item5">item5</div>
	<div class="item item6">item6</div>
	<div class="item item7">item7</div>
	<div class="item item8">item8</div>
	<div class="item item9">item9</div>
</div>

css code

div{
    border : 1px solid black;
    box-sizing: border-box; 
    /* content + padding + border 합으로 width/height 지정 */
}

.item{
    width: 75px;
    height: 75px;
}

.item1{background-color: red;}
.item2{background-color: orangered;}
.item3{background-color: orange;}
.item4{background-color: yellow;}
.item5{background-color: yellowgreen;}
.item6{background-color: green;}
.item7{background-color: lightblue;}
.item8{background-color: blue;}
.item9{background-color: violet;}

.flex-container {
    height: 700px;
    display: flex;
}

display: flex;

부모한테만 주는 거
item(내부요소)을 감싸는 요소의 형식을 flex 변경
-> item에 자동으로 지정된 margin 요소가 모두 사라지고 content영역만큼의 크기만 가지게 됨
-> inline

flex-direction (부모 전용 속성)

main축의 방향과 시작위치를 지정하는 속성

flex-direction: row;

main 축 행 방향 (가로(row) 기본값)

flex-direction: row-reverse;

행 방향(가로) + 순서 반대

flex-direction: column;

열 방향(세로)
main축이 바뀜

flex-direction: column-reverse;

열 방향(세로) + 순서 반대

flex-wrap (부모 전용 속성)

내부 item들을 포장하는 속성
item들이 강제로 한줄에 배치되게 할지, 한줄을 벗어나 여러 줄로 배치할 것인지 지정

flex-wrap: nowrap;

item을 한줄로 배치 (기본값)

flex-wrap: wrap;

item을 여러 줄로 배치

flex-wrap: wrap-reverse;

item을 여러 줄로 배치(뒤에서 배치)

justify-content

메인축 방향으로 item의 정렬 방법을 조정함
순서는 안 변함

justify-content: flex-start;

main축 방향으로 앞에서부터 정렬 (기본값)

justify-content: flex-end;

main축 방향으로 뒤에서부터 정렬

justify-content: center;

main축 방향으로 가운데 정렬

justify-content: space-around;

item 주위에 메인축 방향 양쪽으로 일정한 크기의 공간을 추가
-> 양끝은 조금, item 중간은 넓게 떨어져있음
-> 브라우저 크기에 따라 변함
(사이사이 간격 같음 양끝 간격은 서로 같지만 사이간격과는 다름)

justify-content: space-evenly;

item이 메인축 내에서 동일한 간격을 가짐
(양끝과 사이사이 간격까지 다 같음)

justify-content: space-between;

양끝쪽을 붙인 상태에서 item들의 간격을 일정하게 정렬시킴

align-items

item들을 교차축 방향으로 정렬하는 방법을 지정하는 속성

align-items: flex-start;

align-items: flex-end;

align-items: center;

Flexbox를 이용한 요소 정가운데 배치하기

html code

<div id="con">
	<div id="center"></div>
</div>

css code

#con {
    display: flex;
    width: 450px;
    height: 450px;

    justify-content: center;
    align-items: center;
}

#center {
    width: 80px;
    height: 80px;
    background-color: red;
}

flex-basis

item의 메인축 방향으로의 기본 점유율(크기)을 지정하는 속성 (자식 요소에 줄 수 있는 속성)

html code

<div class="flex-container">
	<div class="item item1 basis-20">item1</div>
	<div class="item item2 basis-30">item2</div>
	<div class="item item3 basis-50">item3</div>
</div>

css code

.basis-20 { flex-basis: 20%; order: 3; }
.basis-30 { flex-basis: 30%; }
.basis-50 { flex-basis: 50%; order: -1; }

order: 숫자;

order: 0; (기본값)
숫자가 작은 순서대로 배치됨