1. Flex Container
01. display
| display: flex; | block level flex container |
| display: inline-flex; | inline level flex container |
02. flex-direction *main axis, cross axis를 생각 할 것!
| flex-direction: row; | 좌에서 우로 수평 배치 |
| flex-direction: column; | 위에서 아래로 수평 배치 |
| flex-direction: row-reverse; | 우에서 좌로 수평 배치 |
| flex-direction: column-reverse; | 아래에서 위로 수평 배치 |
03. flex-wrap : flex item 요소들이 강제로 한줄에 배치되게 할 것인지 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성
| flex-wrap: nowrap; | default, flex-container 영역을 벗어나도 flex-item요소들을 한줄에 배치됨 |
| flex-wrap: wrap; | flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐 배치됨 |
| flex-wrap: wrap-reverse; | flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐 배치되는데, 이때 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됨 |
04. flex-flow : flex-direction, flex-wrap 속성의 단축속성 (shortand property)
| flex-direction: row; flex-wrap: nowrap; |
flex-flow: row nowrap; |
05. align-items : flex container의 cross axis 기준으로 정렬.
| align-items: stretch; | 모든 flex item은 flex container의 높이에 꽉찬 높이(cross start ~ cross end)를 갖음. |
| align-items: flex-start; | 모든 flex item은 flex container의 cross start 기준으로 정렬됨 |
| align-items: flex-end; | 모든 flex item은 flex container의 cross end 기준으로 정렬됨 |
| align-items: center; | 모든 flex item은 flex container의 cross axis 중앙에 정렬됨 |
| align-items: baseline; | 모든 flex item은 flex container의 baseline 기준으로 정렬됨 |
06. justify-content : flex container의 main axis를 기준으로 flex item을 정렬
| justify-content: flex-start; | (default) main axis의 start(left)를 기준으로 정렬 |
| justify-content: flex-end; | main axis의 end(right)를 기준으로 정렬 |
| justify-content: center | main axis 중앙에 정렬 |
| justify-content: space-between; | 첫번째와 마지막 flex item은 좌우 측면에 정렬되고 나머지는 그 사이에 균등한 간격으로 정렬됨 |
| justify-content: space-around; | 모든 flex item이 균등한 간격으로 정렬됨 |
07. align-content : cross axis를 기준으로 flex item을 수직 정렬
| align-content: stretch; | (default) cross axis 기준으로 균등하게 분배된 공간에 정렬됨 |
| align-content: flex-start; | cross axis start 기준으로 stack 정렬 |
| align-content: flex-end; | cross axis end 기준으로 stack 정렬 |
| align-content: space-between; | 첫번째와 마지막 flex item은 상하단에 배치되고 나머지 행은 균등한 간격으로 정렬 |
| align-content: space-around; | 모든 flex item이 균등한 간격으로 정렬 |
| align-content: center; | cross axis 중앙으로 stack 정렬 |
2. Flex Items
01. order: flex item의 배치 순서를 정함 (예: 1-2-3-4 => 2-1-3-4)
| order: 정수값; |
02. flex-grow: flex item 너비 지정 (너비 비율)
| flex-grow: 양의 정수값; |
03. flex-shrink: 너비에 대한 축소 인자 지정 (0이면 축소 해제)
| flex-shrink: 양의 정수값; |
04. align-self: flex item을 개별로 정렬
| align-self: auto | flex-start | flex-end | center | baseline | stretch; |
05. flex-basis VS width, height : flex item의 초기 크기를 지정. box-sizing을 따로 지정하지 않으면 콘텐츠 박스의 크기를 변경
-----
[참고] A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
[참고] The difference between width and flex-basis in Flexbox https://www.freecodecamp.org/news/flexboxs-flex-basis-explained-83d1a01413b7/
The difference between width and flex-basis in Flexbox
by Kyle Gallagher The difference between width and flex-basis in Flexbox Understanding the weird parts When I first started learning Flexbox, the thing that struck me curious the most was “Why did they add this flex-basis in?” I mean, I have width…Wh
www.freecodecamp.org
[참고] MDN web docs https://developer.mozilla.org/ko/