화면레이아웃 display:flex

Flex는 Flexible Box, Flexbox 라고 부르기도 합니다.

Flex는 레이아웃 배치 전용 기능으로 고안되었습니다.

​

Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 아래와 같다

<div class="container">

<div class="item">flex1</div>

<div class="item">flex2</div>

<div class="item">flex3</div>

</div>

​

//class

.container{

display: flex;

}

​

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,

자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다.

​

- Flex 배치 방향 설정 (flex-direction)

.container{

flex-direction: row;

/* flex-direction: column; */

/* flex-direction: row-reverse; */

/* flex-direction: column-reverse; */

}

​

flex-direction: row; - 왼쪽정렬에서 오른쪽으로

flex-direction: column; - 아이템들을 아래로

flex-direction: row-reverse; - 오른쪽정렬에서 왼쪽으로

flex-direction: column-reverse; - 아래에서 위로

​

​

- 줄넘김 처리 설정( flex-wrap )

.container{

flex-wrap: nowrap;

/* flex-wrap: wrap; */

/* flex-wrap: wrap-reverse; */

}

flex-wrap: nowrap; // 옆으로 삐져나감

flex-wrap: wrap; //아래로 내려감(맨오른쪽)

flex-wrap: wrap-reverse; //위로 올라감

​

​

***********정렬설정

- justify : 메인축 방향으로 정렬 (양,옆)

- align: 수직축 방향으로 정렬(위,아래)

​

​

- 메인축 방향 정렬(justify-content)

.container {

justify-content: flex-start;

/* justify-content: flex-end; */

/* justify-content: center; */

/* justify-content: space-between; */

/* justify-content: space-around; */

/* justify-content: space-evenly; */

}

justify-content: flex-start; //아이템들을 시작점으로 정렬

​

​

​

​

- 수직축 방향 정렬( align-items )

.container {

align-items: stretch;

/* align-items: flex-start; */

/* align-items: flex-end; */

/* align-items: center; */

/* align-items: baseline; */

}

- 유연한 박스의 기본영역 ( flex-basis )

기본 박스 크기를 정한다

​