CSS Flexbox

 

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

Flexbox - Web 개발 학습하기 | MDN

Flexbox 란?

이전에는 수직정렬, 수평정렬을 하기 위해서 

float나 inline을 사용해야 했습니다.

 

하지만 inline-block의 경우에는 margin이 존재하지 않더라도 여백이 생기게 됩니다.

물론 억지로 한줄에 넣는다면 생기지는 않지만, 코드 가독성부분이 심하게 떨어지게 됩니다.

 

float 속성을 부여할 경우 여백문제는 없지만,

normal-flow가 적용되지 않아 다른 컨테이너 구조에 영향을 주게 됩니다.

 

따라서 normal-flow를 따르면서 수평문제를 해결하기 위해 생긴 개념이 flexbox입니다.

 

용어

   : flex container, flex item, main axis, cross axis 

 

   flex container : 부모 컨테이너 아이템을 의미합니다.

   main axis (주축) : 가로로 진행되는 축, 너비 축을 의미합니다.

   cross axis (교차축) : 세로로 진행되는 축, 높이 축을 의미합니다.

   flex item : 자식 컨테이너 아이템을 의미합니다. 상속에 따라 flex item이 flex container가 될 수도 있습니다.

 

display

.container{
	display: <display-keyword>;
}

   - 요소를 블록과 인라인 요소 중 어느쪽으로 처리할지 정하거나,

     float, grid, flex처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.

   

   1) display-outside

      - 기본적인 흐름 레이아웃에서 요소의  외부표시유형을 지정합니다.

      - block과 inline이 존재합니다.

   2) display-inside

      - 해당 콘텐츠가 배치되는 서식 지정 컨텍스트 유형을 정의합니다.

 

.container{
	display: inline-flex;
}

   - 두 값을 차례대로 입력하여 바깥쪽 레이아웃과의 관계, 안쪽 레이아웃과의 관계를 각각 지정해줄 수 있습니다.

   - 내부는 flex를 유지하면서 바깥 레이아웃과는 inline 관계를 설정할 수 있습니다.