CSS Flexbox

1. Layout

: UI를 사용자가 보기 편하고 매력있게 배치하는 것.

> layout을 만드는데 특화된 기능이 > flexbox

 

2. Flexbox

: Flex는 요소를 정렬할 축을 만들고, 축을 기준으로 요소 배치. (기본값은 좌에서 우로)

- display: flex; 적용하고, 자식 요소들을 만든다.

- 주 축을 만들고 ~~~> 그 방향으로 요소들은 꽂는다라고 생각하면 됨 ! 

<div class="container-flex"> // flex container
	<div class = "box">0</div>  // flex items
    <div class = "box">1</div>
    <div class = "box">2</div>
    <div class = "box">3</div>
</div>

display:flex; 적용 전                                                                          display:flex;적용 후                       

 

 

3. Flex Direction

- flex-direction 속성

: 주축의 방향을 설정 

• row: 좌에서 우로 (기본값)
• column : 상에서 하로
• row-reverse : 우에서 좌로
• column-reverse : 하에서 상으로

 

- flex-wrap

: item이 늘어나면 다 들어갈 공간이 부족할 때 사용

• wrap : 넘치는 요소를 다음줄에 출력
• nowrap : 요소를 줄여서라도 한줄에 출력 (기본 동작)

 

 

 

4. 요소 정렬하기

- justify-content

: 주축의 방향에 맞춰 요소들을 정렬

• flex-start : 주축의 시작 방향으로 정렬
• flex-end : 주축의 끝 방향으로 정렬
• center : 주축의 가운데로 정렬

 

• space-around : 각 요소 주변에 같은 여백을 배치
• space-between : 요소 사이에만, 동일한 여백을 넣어준다. (양끝 요소는 부모의 테두리에 닿음)
• space-evenly : 모든 여백이 동일해짐.

 

 

- align-items

: 교차축의 방향으로 요소들을 정렬

• flex-start : 교차축의 시작 방향으로 정렬
• flex-end : 교차축의 끝 방향으로 정렬
• center : 교차축의 가운데로 정렬
• stretch : 교차축 방향을 채움. (단, height가 고정되어 있지 않아야 함)

> justify-content와 align-items를 둘다 center로 설정하면 ? 중앙정렬 가능.

 

- align-content 

: 요소가 두줄 이상일 때는 ? 각 줄 단위로 정렬. 

> justify-content와 같

+ flex-grow : 남은 영역을 지정된 요소에 배분

+ order : 요소의 배치 순서 바꿔줌