Flexbox

Flexbox

행과 열을 이용하여 항목을 배치하는 레이아웃 메소드이다.

 

display : flexbox;

Flexbox는 부모 박스 요소를 통해서 자식 박스의 크기 등을 결정한다.
위 코드를 부모 박스에 선언함으로써 실행이 가능하다.

 

 

<link rel="stylesheet" href=".idea/layout.css">

<main>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
</main>

HTML 코드

<main>이라는 부모 박스 안에 세 개의 <div> 자식 박스가 있다.

div 요소에 별다른 설정이 없어 세로 정렬과 가로로 넓게 공간을 차지하는 것을 볼 수 있다.

main{
    display : flex;
    border : 1px dotted red;

}
div {
    border : 1px solid green;
}

* {
    margin : 10px;
    padding : 10px;
}

위의 HTML 코드에 연결된 CSS 코드에 display : flex를 추가한다.

이처럼 Flexbox를 이용하면 부모 박스를 통해 자식 박스의 요소의 크기 등을 설정 할 수 있다.

 

 

 

Flexbox의 속성

Flexbox에는 부모 요소에 적용해야하는 속성과 자식요소에 적용해야하는 속성이 나뉘어져 있다.

 

부모 요소에 적용하는 속성

flex-direction

자식 요소들을 정렬하는 정렬 축을 정함
기본 설정은 가로 정렬

main{
	display : flex;
    flex-direction : row; 가로 정렬
    flex-direction : column; 세로 정렬
    flex-direction : row-reverse; 가로 정렬(오른쪽에서 왼쪽)
    flex-direction : column-reverse; 세로 정렬(아래에서 위) 
    }

 

flex-wrap 

하위 요소의 크기가 상위 요소의 크기보다 크면 자동으로 줄바꿈을 해줌

main{
    display : flex;
    flex-wrap : nowrap; 기본값
    flex-wrap : wrap; 자동 줄바꿈
    flex-wrap : wrap-reverse; 아래에서 위로 줄바꿈
}

 

justify-content

자식 요소들을 축의 수평 방향으로 정렬함

main{
	justify-content : flex-start; 왼쪽 정렬
    justify-content : flex-end; 오른쪽 정렬
    justify-content : center; 가운데 정렬
    justify-content : space-between; 요소 간 정렬
    justify-content : space-around; 공간 기준 정렬
    }

• flex-direction : column일 경우, 좌우 정렬에서 상하 정렬로 바뀜
• flex-direction : row-reverse일 경우, flex-start가 오른쪽 정렬, flex-end가 왼쪽 정렬

align-items 

자식 요소들을 축의 수직 방향으로 정렬함

main{
	display : flexbox;
    align-items : stretch; 자식 요소의 높이를 컨테이너 높이와 같게 만들고 배치
    align-items : flex-start; 위로 정렬
    align-items : flex-end; 아래로 정렬
    align-items : center; 가운데 정렬
    align-items : baseline; 자식 요소를 컨테이너의 기준선에 배치
    }

• flex-direction : column일 경우, strech는  길이 → 넓이, 상하 → 좌우, 가로 기준선 → 세로 기준선
• flex-direction : row-reverse일 경우, flex-start가 아래로 정렬, flex-end가 위로 정렬

 

자식 요소에 적용하는 속성

flex 속성의 값

flex : <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)> 기본 순서
flex : 0 1 auto 기본값

flex-grow : 0;
flex-shrink : 1;
flex-basis : auto; 이 방식으로도 표현 가능

 

맨위의 HTML 문서에 아래의 CSS코드를 연결해보자.

main{
    display : flex;
    border : 1px dotted red;
}

div {
    border : 1px solid green;
}

* {
    margin : 10px;
    padding : 10px;
}

#box1 {
    flex : 1 1 auto;
}
#box2 {
    flex : 0 1 auto;
}
#box3 {
    flex : 0 1 auto;
}

box1의 grow 값만 1로 설정했다.

grow 값이 0일 때는 팽창하지 않지만, 1일 때는 화면에 맞게 팽창함을 알 수 있다.

 

#box1 {
    flex : 3 1 auto;
}
#box2 {
    flex : 2 1 auto;
}
#box3 {
    flex : 1 1 auto;
}

이번에는 box1의 grow  값을 3, box2는 2, box1은 1로 설정해보았다.

 

box들이 순서대로 3:2:1의 비율로 변경된 것을 확인할 수 있다.

 

 

flex-basis 

 위 CSS 코드의 box1, 2, 3에 속성값으로 0을 주게 되면 absolute flex item이 되어 상위 container를 기준으로 크기가 결정된다. 따라서 완벽한 1 : 1 : 1 비율이 된다.

 

그러나, auto로 두게 되면 콘텐츠의 크기에 사이즈가 결정되므로 언제나 완벽한 1 : 1 : 1의 비율이 되지 않는다.