[HTML/CSS] 6. CSS Flexbox

1. Flex 기본 특징

❗

유연한 레이아웃을 만들 수 있다.

display: flex;

• 자신은 block

• 자식은 inline-block으로 만든다

1. 기본 구조

.f-box {
  display: flex;
  flex-wrap: wrap;
}

.b1 {
  flex: 1;
}

<div class="f-box">
  <div class="b1">1</div>
</div>

• 부모 요소에 flex를 설정

• 부모 요소에서 자식 요소의 위치를 설정 가능

• 자식 요소의 크기는 자식 요소만 설정 가능

2. 축 이동

justify-content: start

display: flex;
justify-content: start;

• justify-content = 메인 축을 기준으로 이동한다

justify-content: end

display: flex;
justify-content: end;

justify-content: center

display: flex;
justify-content: center;

align-items: start

display: flex;
align-items: start;
height: 500px;

• align-item = cross축을 기준으로 이동한다

align-items: center

display: flex;
align-items: center;
height: 500px;

align-items: end

display: flex;
align-items: end;
height: 500px;

3. 축 방향 변경

flex-direction: row

display: flex;
flex-direction: row;

flex-direction: column

display: flex;
flex-direction: column;

4. 공간 만들기

justify-content: space-evenly

display: flex;
justify-content: space-evenly;

• 요소 사이에 동일한 공간을 만들어 낸다

justify-content: space-around

display: flex;
justify-content: space-around;

• 요소 주변에 동일한 공간을 만들어 낸다

justify-content: space-between

display: flex;
justify-content: space-between;

• 요소들을 양 끝으로 벌린다

5. 요소 흐르기

flex-wrap: nowrap;

display: flex;
flex-wrap: nowrap;

• 요소의 공간이 부족하면 축 방향으로 크기가 줄어듬

flex-wrap: wrap;

display: flex;
flex-wrap: wrap;

• 요소의 공간이 부족하면 축의 직각 방향으로 요소를 밀어냄

6. 요소의 크기를 비율로 정하기

.f-box {
  display: flex;
  flex-wrap: wrap;
}

.b1 {
  flex: 1;
}

.b2 {
  flex: 4;
}

.b3 {
  flex: 1;
}

.b4 {
  flex: 2;
}