[css] flexbox - CSS3의 새로운 레이아웃 방식

flexbox를 만드는 방법은 간단하다. 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 된다.

.flex_container {
display: flex;
}

display: flex 속성이 적용된 요소는 flex container가 되고,
flex container의 자식 요소는 flex item이 된다.
flex container와 flex item은 부모 요소와 자식 요소를 한 세트로 사용하는 ul과 li를 생각하면 쉽게 이해할 수 있다.

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

(강추) 10 modern layouts in 1 line of CSS
https://www.youtube.com/watch?v=qm0IfG1GyZU&t=334s
https://1linelayouts.glitch.me/

참고 : https://d2.naver.com/helloworld/8540176
https://heropy.blog/2018/11/24/css-flexible-box/