flex를 정리해보자
우선 flex를 실습 해보기에 너무 좋은 사이트
https://studiomeal.com/archives/197
사실 그냥 위에 1분 코딩 튜토리얼을 거치고 개구리까지 배치시키면 flex는 끝이라 볼 수 있다.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
정확한 정의는 MDN 참고
중요한 것
- 정렬하고자 하는 box들을 감싸는 container box를 만들어 주고 container에 display: flex;를 선언해주는 것으로 flex 시작
- 내부 box들은 container에 상관 없이 자신의 width를 유지
- flex vs inline-flex -> flex는 block, inline-flex는 내부 요소에 따른 너비를 갖는다.
- flex wrap 설명은 1분 코딩 그림 설명이 완벽. wrap-reverse는 삐져나간 요소를 위로 올린다.
'Etc. > CSS' 카테고리의 다른 글
[CSS] 선택자 정리 + 헷갈리는 선택자 (0) | 2021.11.18 |
---|---|
[CSS] margin collapsing (0) | 2021.11.11 |
[CSS] inline element (0) | 2021.11.05 |
[CSS] 선택자 우선순위 계산 (0) | 2021.11.03 |
[CSS] 가상 클래스(Pseudo-class) vs 가상 요소(Pseudo-element) (0) | 2021.11.03 |
댓글