flex

display:flex

Flexible Box, Flexbox

 

인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계됨.

flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻

 

이전에는 레이아웃을 가로배치하기 위해 float, inline-block 을 사용하였는데 이들과 다른 점은 부모요소(container )에 주는 속성이라는 것이다.

 

ex)  float은 원래 이미지 옆쪽에 글자를 흐르게(?)하는 목적으로 생겼지만 layout을 만들기 위해서 사용해왔다.

가로배치가 되어야할 요소에 float속성을 주었기 때문에 아래 요소가 section 공간을 침범한 모습.

하지만 flex 속성은 자식요소를 가로배치하기 위하여 부모요소에 설정한다.

container{display:flex}

flex 속성에는 display:flex 와 display:inline-flex 가 있는데

flex 는 블록요소의 특징

inline-flex 는 인라인요소의 특징을 갖는다.