[css]Flexbox 레이아웃

Flexbox란?

구현이 어려운 레이아웃을 간단하게 구현할 수 있게 CSS3에 추가된 레이아웃 방식이 flexbox입니다. flexbox를 사용하면 요소의 크기와 순서를 유연하게 배치할 수 있습니다.

Flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.

Flexbox 구성요소

flexbox는 flex item(자식 요소)과 flex container(상위 부모 요소)로 구성됩니다.

• flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
• flex item 속성: flex, flex-grow, flex-shrink, flex-basis, order

Flexbox를 만드는 방법(사용법)

정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다.

 

.flex_container {
  display: flex;
}

display: flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 된다. 

flex container와 flex item은 부모 요소와 자식 요소를 한 세트로 사용하는 ul과 li를 생각하면 쉽게 이해할 수 있다.

 

 

Flex Container(부모)

 

Flex Items(자식)

 

 

 

참고

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://heropy.blog/2018/11/24/css-flexible-box/

https://poiemaweb.com/css3-flexbox

https://d2.naver.com/helloworld/8540176

https://webclub.tistory.com/628

https://sharkcoder.com/layout/flexbox