프론트엔드 개발을 하면 피할 수 없는 것이 CSS 작업인데
내가 제일 많이 쓰는 레이아웃 시스템인 flexbox를 복습하며 제대로 알고가기 위해 정리해본다.

🔖 flexbox rule

.container {
	display:flex;
}

대부분의 작업은 자식요소가 아닌 부모요소에게 적용한다.

🛠 axis system

• main axis
  왼쪽에서 오른쪽(x축)
• cross axis
  위에서 아래
• flex 항목들은 각 항목 별 내부 요소의 크기로 main axis를 따라 정렬

🔧 속성

더 많은 옵션들은 제목을 클릭하면 mdn에서 볼 수 있음

justify-content

main-axis를 기준으로 자식 요소를 정렬

.container {
    justify-content: center; /* 축의 중심 부분에 정렬 */
    justify-content: flex-start; /* 축의 시작 부분에 정렬 */
    justify-content: flex-end; /* 축의 끝 부분에 정렬 */
    justify-content: space-between; /* 첫 항목은 시작 부분에, 마지막 항목은 끝 부분에 밀착되어 정렬 */                             
    justify-content: space-around; /* 각 항목들은 양쪽 여백의 절반만큼 나누어 갖습니다. */
    justify-content: space-evenly; /* 각 항목들은 서로 간에 동일한 여백을 갖습니다. */
    justify-content: stretch; /* 'auto' 크기로 설정된 항목들을 컨테이너에 맞게 늘림 */
}

align-items

cross-axis를 기준으로 자식 요소를 정렬

.container {
	align-items: center;
	align-items: flex-start;
	align-items: flex-end;
}

gap

자식 요소들의 간격을 조정한다.
자식 요소들에 하나씩 margin을 주지 않고 flexbox rule에 맞게 부모요소에서 조정할 수 있다.

.container{
	gap: 10px;
}

flex-direction

axis를 조정할 수 있다.

.container{
	flex-direction: row; /*default*/
    flex-direction: column;
    /*자식 순서 반대*/
    flex-direction: row-reverse; 
    flex-direction: column-reverse;
}

flex-wrap

자식 요소를 크기를 무시하고 한 줄에 강제로 배치할지, 아니면 자식 요소의 크기를 유지하고 여러 줄에 걸쳐 배치지 설정
줄 바꿈이 허용되면 줄이 쌓이는 방향을 설정

.container{
	flex-wrap: nowrap; /* default */
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
}

flex-flow

flex-direction과 flex-wrap을 동시에 쓸 수 있는 shortcut

.container{
	flex-flow: row wrap;
}

align-content

다중 라인(wrap)일 때 cross-axis를 기준으로 라인을 움직임

.container{
	align-content: center;
	align-content: flex-start; 
	align-content: flex-end;
}

column-gap, row-gap

다중 라인(wrap)일 때 자식 요소들의 간격 설정

.container{
	row-gap: 20px;
    column-gap: 20px;
}

🔨 예외적으로 자식요소에게 적용하는 속성

order

자식의 배치 순서를 결정
default 는 0

.box:last-child {
	order: 1;
}

align-self

cross-axis에서 요소 개별 정렬

.box:last-child {
	align-self: flex-end;
}

flex-grow

flexbox 내의 여백을 나눠가질 비율을 결정
해당 비율만큼 자식 요소의 크기가 늘어남

default 는 0 ➡️ 자식 box가 content에 필요한 만큼의 공간만 차지함을 의미

.box:first-child {
	flex-grow : 2;
}

.box:last-child {
	flex-grow : 1;
}

/*첫번째 요소가 마지막 요소보다 여백을 2배 더 가져가서 그 만큼 너비가 커짐*/

justify-content는 여백에 따라 정렬을 하는데 Flexbox layout 안에서 최소 하나의 자식 요소가 0이 아닌 flex-grow 값을 갖는다면, 더 이상 사용할 수 있는 공간이 없기 때문에 아무 효과가 없다.

flex-shrink

모든 자식요소의 크기가 부모 컨테이너보다 클때 항목이 줄어드는 비율
default는 1

.box:first-child {
	flex-shrink : 2;
}

.box:last-child {
	flex-shrink : 1;
}

/*첫번째 요소가 마지막 요소보다 2배 더 빨리 줄어듬*/

flex-basis

자식요소의 기본 크기를 설정

.box {
  flex-grow:1; 
  flex-shrink:0;
 }

위의 코드가 적용되면 flex-basis는 min-width랑 비슷하게 동작한다.
반대의 경우에는 max-width와 비슷하게 동작한다.

flex

flex로 flex-grow, flex-shrink, flex-basis를 전부 설정 가능

.box {
    /* One value, unitless number: flex-grow
    flex-basis is then equal to 0. */
    flex: 2;

    /* One value, width/height: flex-basis */
    flex: 10em;
    flex: 30%;
    flex: min-content;

    /* Two values: flex-grow | flex-basis */
    flex: 1 30px;

    /* Two values: flex-grow | flex-shrink */
    flex: 2 2;

    /* Three values: flex-grow | flex-shrink | flex-basis */
    flex: 2 2 10%;

}

flex-basis는 주축을 기준으로 설정되기 때문에 flex-direction 바꾸면 flex-basis 가 너비 뿐만 아니라 주축을 기준으로 높이가 될 수도 있음

연습하기

flex-grow, shrink 연습

flex-box 연습

flexbox froggy