이번 크리스마스🎄는 flex 개념과 함께합니다😎 프로젝트 전에 한 번 정리를 하면 좋을 것 같아서 예시 사진까지 다 만들어서 정리해 봤습니다.
flex속성은 기본적으로 안에 있는 모든 요소를 행(row) 방향으로 나열하고, 행의 왼쪽부터 요소를 배치한다.
flex 규칙
주축과 교차축
레이아웃은 기본적으로 행(row) 형태이기에 자식 요소들이 가로로 정렬됩니다. 이것을 주축이라고 합니다.
display 속성을 flex로 지정하면 주축은 자동으로 수평축이 됩니다. 교차축은 주축과 수직을 이루는 축으로, 즉 주축이 행 방향 정렬이라면 교차축은 열 방향 정렬을 의미합니다.
flex container 속성
flex-direction
display: flex를 적용하면 flex-direction 속성의 기본 값은 row(행)가 됩니다.
1. row-reverse
row-reverse를 설정하면 주축(수평)의 끝 쪽에서부터 요소가 추가됩니다.
2. column, column-reverse
column(열)은 요소들을 열 형태로 정렬할 때 사용합니다.. column을 적용하면 주축이 수직축이기에 교차축은 수평축이 됩니다. column-reverse은 주축(수직)의 끝쪽부터 요소가 추가된다.
justify-content
주축 방향으로 아이템을 정렬하는 속성으로, text-align을 생각하면 편합니다.
1. flex-start
기본 값으로, 달라지는 것은 없습니다.
2. flex-end
요소들이 주축의 끝으로 이동합니다.
3. center
요소들이 중앙 정렬됩니다.
4. space-around
모든 아이템 주변에 여백이 생깁니다. 왼쪽, 오른쪽에 동일한 너비의 여백이 있으며, 아이템의 좌우에도 동일한 여백이 생깁니다.
5. space-between
space-around와 비슷하게 요소의 간격을 동일하게 유지하지만, 시작과 끝에 있는 아이템의 좌우 여백은 사라집니다.
*예시 사진은 컨테이너와 아이템에 각각 padding과 margin을 적용했기에 좌우여백이 있는 것처럼 보이는 것입니다! 실제로는 없습니다요!.!
align-items
교차축 방향으로 아이템을 정렬하는 속성으로, flex-direction : row(행)을 기준으로 column(열) 방향으로 동작합니다.
1. stretch
기본 값으로, 부모 컨테이너의 맞도록 교차축 방향 길게 늘어납니다. (*아이템에 height 값이 지정되어 있다면 늘어나지 않습니다.)
2. flex-start
요소들이 교차축의 시작지점에 정렬됩니다.
3. flex-end
요소들이 교차축의 끝 쪽에 정렬됩니다.
4. center
요소들을 교차축의 중앙 지점에 정렬시킵니다.
5. baseline
요소들의 글자의 하단선을 동일 선상에 놓게 합니다.
flex-wrap
컨테이너에 아이템을 담을만한 공간이 없을 때, 아이템을 다음 줄로 넘길 수 있습니다.
1. nowrap
기본 값으로 달라지는 것이 없습니다.
2. wrap
아이템이 컨테이너 밖으로 나가지 않도록 다음 줄로 넘겨서 배치합니다.
3. wrap-reverse
아래쪽부터 첫째 줄이 시작되고, 다음 줄은 위쪽으로 올라갑니다.
flex-flow
flex-direction, flex-wrap은 밀접하게 관련되어 있어서, 두 속성을 한 번에 정의할 수 있는 단축 속성입니다.
flex-direction : row;
flex- wrap: wrap;
flex-flow : row wrap;flex-flow의 첫 번째로는 flex-direction의 속성을, 두 번째로는 flex-wrap의 속성을 작성하면 됩니다.
align-content
교차축을 따라 여러 행의 동작과 행 사이의 간격을 정의하는 속성입니다. flex-wrap : wrap이 적용되어 있고, 두 줄 이상의 행이 있을 때만 영향을 미칩니다.
justify-content의 속성과 같은 값을 그대로 사용할 수 있습니다.
align-items와 align-content의 차이점
align-items은 수직축 라인을 기준으로 아이템들이 정렬되고, align-content는 수직축의 라인을 기준으로 라인 자체가 정렬됩니다. (두 줄 이상 일 때)
flex items 속성
order
HTML 파일에 정의된 아이템 순서와 상관없이 아이템의 순서를 변경할 수 있습니다. 모든 자식 요소의 order 값은 기본적으로 0입니다. 그래서 하나의 요소만 맨 앞에 두려면 -1을 적용해야 하고, 맨 뒤에 두려면 1을 적용해야 한다.
align-self
아이템 자체 정렬 속성으로, 자식 요소가 컨테이너의 레이아웃을 따르지 않도록 할 수 있습니다.
align-items으로 정의한 값을 각 아이템에서 다시 정의할 수 있습니다. align-items와 마찬가지로 5가지의 속성이 있습니다.
flex-grow
컨테이너 내의 여유 공간을 아이템들에게 분배할 때 사용하는 속성으로, 기본 값은 0입니다.
네 개의 아이템에 전부 flex-grow : 1을 적용하고, 400px의 공간이 남았다고 하면, 1:1:1:1의 비율로 남은 공간을 가져갑니다.
위의 사진은 아이템 컨테이너를 차지하고 남은 공간을 1:2:1:1의 비율로 나눠가지는 것입니다.
만약 하나의 요소에만 flex-grow를 적용한다면, 다른 요소들의 flex-grow는 기본 값인 0이므로, 남은 공간을 전부 그 요소가 차지하게 됩니다.
flex-shrink
컨테이너가 모든 아이템을 지정된 너비대로 표시할 만큼 크지 않을 때, 아이템 너비를 줄여주는 속성으로, flex-grow와 기본 원리는 같습니다. 기본 값은 1입니다.
만약 400px의 컨테이너에 4개의 아이템 각각의 크기가 150px이면 200px을 초과하게 됩니다. 이때 flex-shrink의 기본 값이 1이므로, 초과분을 1:1:1:1의 비율로 나눈 만큼 각 아이템의 크기를 줄여 컨테이너에 맞추게 됩니다.
flex box는 크기를 조절할 때 아이템에 있는 콘텐츠나 패딩 값을 고려합니다. 즉 flex-shrink : 2를 적용한다고 무조건 비율대로 줄어드는 것은 아닙니다.
flex-basis
flex 아이템의 기본 크기를 설정하며, 기본 값은 auto입니다. flex-direction이 row일 때는 너비, column일 때는 높이입니다.
기본 값인 flex-basis: auto는 현재 정렬 방향에서, 아이템 안에 든 콘텐츠와 패딩에 필요한 너비만큼만 차지하게 합니다.
flex-direction: column으로 설정하고 flex-basis : 100px을 적용하면 너비가 아니라 높이가 100px로 변경되는 것을 확인할 수 있습니다. 주축이 수직축이기 때문입니다.
* width : 100px; 와 flex-basis: 100px;의 차이점
width로 지정한 값은 고정값이기에 flex 컨테이너가 넘치더라도 크기를 유지하려고 합니다. 하지만 flex-basis로 지정한 값은 초기값을 지정하는 것으로, flex-grow 또는 flow-shrink에 따라 유동적으로 크기가 조절될 수 있습니다.
flex
flex-grow, flex-shrink, flex-basis의 단축 속성입니다.
flex : 1 1 25%;flex-grow : 1, flex-shrink :1 , flex-basis: 25%을 적용한 값입니다.
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
개념학습 이후 FLEXBOX FROGGY를 풀어보면 좋습니다. 멋사 과제로 처음 풀 때는 건들지도 못했는데, 지금은 나름 금방금방 푸니까 감개무량하네요
'프로그래밍 언어 > HTML & CSS' 카테고리의 다른 글
| HTML 기초 - 2 (0) | 2023.10.03 |
|---|---|
| CSS Flex 기초 (0) | 2023.10.02 |
| CSS 기초 - 3 (0) | 2023.10.01 |
| CSS 기초 - 2 (0) | 2023.09.26 |
| CSS 기초 - 1 (0) | 2023.09.25 |
