[CSS] Flex CSS

display: flex;

기본적으로 justify-content는 row(가로)로 되어있기 때문에

main axis는 가로 / cross axis는 vertical(세로)로 되었다.

그러나 flex-direction: column을 하게되면 반대로 main axis는 vertical

cross axis는 row로 변경되게 된다.

반응형으로 적용을 했을 때 박스모양이 망가지는 것을 방지하려면

flex-warp: warp을 사용하면 된다.

박스모양의 순서를 뒤집고 싶으면 flex-warp: warp-reverse 를 해주면 된다.

👍flex-grow : 자신이 가질 수 있는 최대 즉 여백의 값까지 가지게 된다. (반응형때 유용)

flex-shrink : 만약 flex-shrink값을 2를 주었다면 그 값을 준 자식은 다른 박스모양에 비해 2배로 줄어들게 된다.

alifn-self : 자식 하나의 박스만 변경할 때 사용.

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주

developer.mozilla.org

오래오래 기억하길