[CSS] flex(flexbox)와 여러 속성들 한 눈에 보기

 

 

 

0. flexbox란

 

웹 페이지의 복잡한 레이아웃을 보다 간단하게 구현할 수 있도록 나오게 된 것이 CSS3에 추가된 flexbox 속성이다.

요소의 크기와 순서를 유연하게 배치할 수 있다는 장점이 있다.

뷰 포트나 요소의 크기가 불명확하거나, 동적으로 변할 때에도 효율적으로 요소들을 배치하거나 정렬할 수 있다.

 

 

 

flexbox 기본 용어

• flex item : 자식 요소
• flex container : 상위 부모 요소
• 주축 (main axis): 아이템의 배치 방향의 축
• 교차축 (cross axis): 주축의 수직축

 

 

 

 

 

flexbox에 속하는 속성들은 정말 많지만,

대표적인 속성들에 대해 바로바로 보고 이해할 수 있도록 이미지를 첨부하였으니

찬찬히 코드들을 살펴보자.

 

 

 

 

 

---

 

 

 

 

 

1. flex-direction 속성

flex-direction: flex 방향을 설정 (주축 방향 설정)

 

• row (default): 수평 정렬 (좌 -> 우)
• row-reverse: 수평 정렬 (우 -> 좌)

 

• column: 수직 정렬 (위 -> 아래)
• column-reverse: 수직 정렬 (아래 -> 위)

 

 

 

 

[ 코드 ]

 

1.1 주축 방향이 row 일 때 : 

 

• flex-direction: row;
• flex-direction: row-reverse;

 

 

 

flex-direction: row;

 

flex-direction: row-reverse;

 

 

1.2 주축 방향이 column 일 때 : 

 

• flex-direction: column;
• flex-direction: column-reverse;

 

 

 

flex-direction: column;

flex-direction: column-reverse;

 

 

 

 

 

 

 

2. justify 속성

 

 

 justify-content: 주축의 아이템을 어떻게 배치할 것인지 결정

 

• flex-direction이 수평 정렬; 주축 = row (가로)
• flex-direction이 수직 정렬; 주축 = column (세로)    

 

 

 

[ 코드 ]

 

• flex-start (default): 아이템을 주축에 대해서 start지점을 기준으로 나열 
• flex-end: 아이템을 주축에 대해서 end 지점을 기준으로 나열
• space-between: 처음과 마지막 아이템을 양 끝에 붙이고, 나머지 영역 공평하게 나눔
• space-around: 아이템들의 모든 여백을 공평하게 갖도록 함 (양끝 영역의 단위가 1이라면, 나머지 영역의 단위는 2)
• space-evenly: start부터 첫 아이템의 간격, 아이템 끼리의 간격, 마지막 아이템 부터 end 까지의 모든 간격이 일정

 

 

 

 

 

지금부터 나오는 모든 코드들에 대한 이미지는 flex-direction: row; 기준!!

 

 

 

 

justify-content: flex-start

 

justify-content: flex-end

 

 

justify-content: space-between

 

justify-content: space-around

 

 

justify-content: space-evenly

 

 

 

3. align-items 속성

 

align-items: 교차축에 대해서 아이템을 어떻게 배치할 것인지 결정하는 속성

• flex-direction이 수평 정렬; 교차축 = column (세로)
• flex-direction이 수직 정렬; 교차축 = row (가로)   

 

 

 

 

[ 코드 ]

 

• flex-start: 교차축에 대하여 시작점으로 정렬
• flex-end: 교차축에 대하여 끝점으로 정렬
• center: 교차축에 대하여 가운데 정렬
• stretch (default): container의 교차축을 채우기 위해 늘림   
  => 현재 .flex-items 에 width, height 값이 있어 늘어나지는 않음
• baseline: 아이템을 텍스트의 베이스라인을 기준 정렬
  ==> 텍스트 크기가 다 달라도 텍스트들에 밑줄 그었을 때 그 선 기준

 

 

 

 

(  해당 속성에 대한 이미지는 microsoft.com에 한 눈에 보기 너무 잘 되어 있어서 슬쩍 가져와보았다 ㅇwㅇ7  )

 

 

 

출처:https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn659401%28v=vs.85%29

 

 

 

 

 

 

 

4. align-content 속성

 

 

align-content : 여러 행에 대한 정렬

       ★  (조건) flex-wrap: wrap 인 상태에서 아이템이 두 줄 이상일 떄 수직축 방향을 설정

 

 

 

 

[ 코드 ]

 

 

• align-content: flex-start;
• align-content: flex-end;
• align-content: center;
• align-content: space-between;
• align-content: space-around;
• align-content: space-evenly;

 

 

 

align-content : flex-start

 

 

align-content : flex-end

 

 

align-content : center

 

align-content : space-between ;

 

 

align-content : space-around ;

 

 

align-content : space-evenly ;

 

 

 

 

---

 

 

 

 

 

개인적으로 굉장히 헷갈리는 속성들이라고 생각한다..

실제로 프론트를 개발할 때 나는 A 아이템을 중앙에 놓으려고 했는데 뜬금없이 B 아이템만 중앙에 가있질 않나..

의도와는 다르게 자꾸 흘러가기도 한다.

 

아무래도 display 속성을 함께 생각해야하는 것도 있는 듯

( 개인적으로  display 속성도 할 때마다 헷갈려서 매번 찾아보는 것 중 하나 ㅎ.. )