flex를 정리해보자
우선 flex를 실습 해보기에 너무 좋은 사이트
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
사실 그냥 위에 1분 코딩 튜토리얼을 거치고 개구리까지 배치시키면 flex는 끝이라 볼 수 있다.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of
developer.mozilla.org
정확한 정의는 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 |
댓글