CSS flex (flexbox) 모델 알아보기

전부터 잘 쓰다가 요즘에 쓰다가 안쓰다 했더니 까먹거나 헷갈려서 정리를 해 놓으려고 합니다.

flexbox 모델이 없었을 때에는 가운데 정렬, 양쪽 정렬 등 정렬 및 배치하는데 머리를 좀 써서 계산을 해야하는 상황이 발생하거나 코드가 길어지거나 했죠.

개인적으로 좋아하지 않는 float를 쓰거나 absolute를 썼었는데요. flexbox 모델을 이용하면 비교적 쉽게 적용 할 수 있습니다.

단, 예전 버전의 브라우저에서는 지원하지 않으니 예전 버전도 적용해야 한다면 주의 해야 합니다.

(IE11 부터는 잘 돌아가는거 같으니 이전 버전은 버리고 간다!! -0-;;)

CSS코드에서 진한부분을 제외한 부분은 예제를 눈으로 보이도록해서 이해가 편하게 하기 위한 코드로 없어도 되는 코드입니다.

🔖 균등하게 양쪽 끝까지 정렬하기(justify-content)

게시판등에서 버튼을 양쪽으로 놓고 싶거나 메인 메뉴에서 첫번째와 끝에 메뉴를 양쪽 끝으로 붙이고 싶을 때 사용하면 좋습니다.

stretch, flex-start, flex-end, center, space-around, space-between, space-evenly 를 값으로 사용할 수 있습니다.

✏️ space-between 일 때

플레이온 버튼

티스토리 버튼

✏️ space-around 일 때

플레이온 메뉴

티스토리 메뉴

플레이온 메뉴

티스토리 메뉴

.flexbox {
  display: flex;
  justify-content: space-between;
  border: 1px solid #1eaed7;
  padding: 10px;
}

.box1 {
  background: #cfeaf2;
  padding: 10px;
}

.box2 {
  background: #f2cfdb;
  padding: 10px;
}

<div class="flexbox">
  <div class="box1">플레이온</div>
  <div class="box2">티스토리</div>
</div>

🔖 가로 가운데 정렬이 아닌 "세로"일때 가운데 정렬(align-items)

세로의 가운데 정렬을 해야 할 때에는 line-height 나 padding-top 등을 이용해서 정렬을 했습니다.

하지만 내용이 변경되거나 하면 틀어지거나 세로 가운데 정렬이 맞지 않죠. flexbox의 align-items 을 이용하면 쉽게 세로 정렬이 가능 해 집니다.

stretch, flex-start, flex-end, center 를 값으로 사용할 수 있습니다.

✏️ 세로 가운데 정렬하기

플레이온

티스토리

✏️ 세로와 가로 가운데 정렬하기(높이가 달라도 가운데 정렬됩니다.)

플레이온

티스토리
사과농장

.flexbox3 {
  display: flex;
  align-items: center;
  border: 1px solid #1eaed7;
  padding: 10px;
}

<div class="flexbox3">
  <div class="box1">플레이온</div>
  <div class="box2">티스토리</div>
</div>

🔖 메인 메뉴 처럼 해보기

위에 두개를 같이 적용해서 메인 메뉴처럼 만들어 보겠습니다.

✏️ 세로길이가 정해져 있는 메인 메뉴 처럼

메뉴1

메뉴2

메뉴3

메뉴4

메뉴5

.flexbox5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #1eaed7;
  padding: 10px;
}

<div class="flexbox5">
  <div class="box1">메뉴1</div>
  <div class="box2">메뉴2</div>
  <div class="box1">메뉴3</div>
  <div class="box2">메뉴4</div>
  <div class="box1">메뉴5</div>
</div>