[CSS 009] FLEX 사용법 (여러가지 속성과 속성 값 모음)

가로 배치를 손쉽게 하기 위한 방법으로 Flex (Flexible Box, Flexbox)가 있다.

float나 inline-block 을 이용했던 기존 방식보다 훨씬 편리하게 레이아웃을 배치할 수 있다.

 

display: flex; 를 부모 요소에 선언하면

그 안에 있던 자식 요소들은 모두 flex 컨테이너의 item이 된다. 

 

 

이 flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼만 차지하게 된다. 

마치 inline 요소로 바뀌는 것과 같다 

height는 컨테이너의 높이만큼 늘어난다. 

 

 

 

---

 

Flex container는 여러가지 속성이 있다.

justify-content , align-items, flex-direction , flex-wrap , align-content, flex-basis , order , align-self

 

---

 

justify-content 속성

가로선 상에서 정렬

  🔽   속성 값   🔽

 

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬 (Default)

• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬

• center: 요소들을 컨테이너의 가운데로 정렬

• space-between: 요소들 사이의 동일한 간격

• space-around: 요소들 주위의 동일한 간격

• space-evenly: 모든 간격을 동일하게

 

 

마지막 3가지는 모두 일정한 간격으로 조정하는 속성 값이지만 약간의 차이가 있다. 

 

 

---

align-items 속성

 

세로선 상에서 정렬

 

 

  🔽   속성 값   🔽

 

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬 
• baseline: 요소들을 컨테이너의 시작 위치에 정렬
• stretch: 요소들을 컨테이너에 맞도록 늘림 (Default)

• flex-end: 요소들을 컨테이너의 바닥으로 정렬

• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬

 

 

 

 

 

---

flex-direction 속성

정렬 방향

 

 

🔽  속성 값  🔽 

 

• row: 요소들을 왼쪽에서 오른쪽으로 정렬 (Default)

• row-reverse: 요소들을 오른쪽에서 왼쪽으로 정렬

• column: 요소들을 위에서 아래로 정렬

• column-reverse: 요소들을 아래에서 위로 정렬

 

 

 

 

---

flex-wrap 속성

줄바꿈 처리

 

 

 🔽   속성 값   🔽

 

• nowrap: 모든 요소들을 한 줄에 정렬 (Default)

정사각형이었던 아이템이 한 줄에 들어가기 위해서 자동으로 크기가 조정된다.

• wrap: 요소들을 여러 줄에 걸쳐 정렬

부모영역을 벗어나면 아래 줄로 내려간다.

• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

 

📌 flex-direction과 flex-wrap은 자주 사용되기 때문에 flex-flow 속성으로 두 속성값을 한번에 받을 수 있다. 

예시) flex-direction : row;                       -> flex-flow: row wrap;
           flex-wrap : wrap;

 

 

 

 

 

 

---

align-content 속성

여러 줄들 사이의 간격 조정

(2줄 이상 있을 때 적용)

 

 

  🔽   속성 값  🔽

 

• stretch: 여러 줄들을 컨테이너에 맞도록 늘림 (Default)

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬

• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬

• center: 여러 줄들을 세로선 상의 가운데에 정렬

• space-between: 여러 줄들 사이의 동일한 간격
• space-around: 여러 줄들 주위의 동일한 간격
• space-evenly : 모든 간격을 동일하게

 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

---

 

위의 속성들은 부모요소인 flex container에 선언했다면 

item 각각에 적용할 수 있는 속성도 있다. 

 

 

flex-basis  속성
flex item의 기본 크기를 설정

  🔽   속성 값  🔽

  width와 height에 사용하는 각종 단위의 수 

 

(flex-direction이 row일 때는 너비, column일 때는 높이)

 

 

 

 

 

---

 

order  속성

Item 순서부여

 

 

  🔽   속성 값   🔽

 

  기본 값은 0  /  양수나 음수로 수를 지정하여 item의 순서 조정

 

 

예시)  9번 째 아이템에 order 속성 값을  -1로 지정

 

 

 

---

align-self  속성

align-items에 사용했던 속성 값을 지정한 하나의 item에만 적용하고 싶을 때 

 

 

align-items가 사용하는 속성값과 같다. 

 

  🔽   속성 값   🔽

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬
• flex-end: 요소들을 컨테이너의 바닥으로 정렬
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
• baseline: 요소들을 컨테이너의 시작 위치에 정렬
• stretch: 요소들을 컨테이너에 맞도록 늘림
•  

예시) 2번 아이템만 맨 밑으로 보내기

 

 

 

 

🎈 그렇다면!! 1,2,3 박스 중에 3번 박스만 오른쪽 끝으로 보내고 싶을 때는 어떻게 해야할까? (다음 게시글 참고!)

 

 

 

 

 

flex의 모든 속성과 속성값을 알아봤지만 직접해봐야 알 수 있기 때문에 

가로 배치를 위한 Flexbox 연습을 위한 좋은 사이트를 추천한다!😁

 

위에서 보았던 거의 모든 속성을 사용해보고 익숙해질 수 있다. 

 

https://flexboxfroggy.com/

Flexbox Froggy

[flex의 다양한 속성들을 활용하여 개구리를 각각 색깔에 맞는 수련잎으로 이동하게 하는 간단한 게임]