CSS 08 flexbox 행➡️,열⬇️ 방향

 

레이아웃을 유연하게 Flexbox

행 & 열 , Flex-direction

 

Flexbox 란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.

왜 flexbox 를 1차원 모델이라 부르는 이유는, 레이아읏을 다룰 때 한번에 하나의 차원(행, 열)만을 다룬다는 특성 때문입니다.

 

➡ 행(row) ⬇열 (column)

 

flex 컨테이너라고 한다( 요소들을 포함하기때문)

display: flex 준 모습

flex 컨테이너를 만들기 위해서는 컨테이너에 display flex; 적용 .  flexbox는 기본적 요소들을 으로 행방향이다. ➡

 

 

먼저 알아야 할 것

flexbox 에는 주축 main -axis 과 교차축 croos-axis있다. (매우 매우 중요하다)

---

flex-direction(flex 컨테이너를 위한 속성이다)

속성은 flexbox 내 요소를 주축관련 속성 , 교차축 관련 속성 (연습해)

[방향주기] 키워드 

• row : 기본값, 주축은 행 ➡ 방향은 콘텐츠의 방향과 동일함
• row-revers : 주축은 행➡이고 방향은 콘텐츠의 방향과 반대🔄 321로
• column: 주축은 열 ⬇이고 방향은 콘텐츠의 방향과 동일
• column- reverse: 주축은 열⬇이고 방향은 콘텐츠의 방향과 반대 🔄 123에서 321로

내용정리

 

📌flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차 (행 또는 열) 레이아웃 모델이다.

📌행 또는 열 이 주축이 되어 요소의 정렬방향을 결정한다.

📌flex-direction 속성은 요소를 배치할 때 사용할 주축 및 방형을 지정한다!

 

 

flexbox 속성 다루기

속성 사용!

(➡️옆 가로)주축 배치 방법: justify-content	(⬇️아래 세로) 교차축 배치 방법 : align-items	교차축 개별요소 배치 방법 : align-self	줄 바꿈 여부 : flex wrap
center가운데 정렬 flex-start 첫번째, flex-end 끝에 space-around : 요소 들간에 여백을 주겠다 . 좌우 여백! space-between: 첫 번째 마지막 요소는 끝에 붙이고 가운데 요소는 여백을 준다!

 

 

누락,커지거나 flex container 에서 자기보다 자식이 크거나 그러면 자식 요소를 줄여버린다.

수축시킨다.

 wrap 으로 하면 두행으로 나뉘어진다.! 요소가 많아지면 랩을 사용해준다.

 

---

 

[정리]

 

• justify-content 는 flexbox 주축에서의 요소 배치 방법 정의
• align-items는 flexbox 교차축에서의 요소 배치 방법 정의
• align-self는 flexbox 내 개별! 개별 요소의 교차축 배치 방법을 정의
• flex-wrap 은 개별 요소들의 도합 크기가 컨테이너 주축 길이보다 커졌을 때의 처리 방법 및 방향을 정의한다.