22.04.20 해도해도 헷갈리는 FLEX...

FLEX 개념을 잡아보자!!

1. 부모태그 에 display:flex를 정의 해준다!

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  background-color:royalblue;
  display:flex;
}
.container .item {
  width:100px;
  height:100px;
  border:3px dashed red;
  background-color:orange;
}

결과

flex-direction 종류

• row 행 축(좌 => 우)
• row-reverse 행 축 (우 => 좌)
• column 열 축 (위 => 아래)
• column-reverse 열 축 (아래=>위)

flex-wrap

• no-wrap 묶음(줄바꿈)없음
• wrap 여러 줄로 묶음
• wrap-reverse wrap의 반대 방향으로 묶음

justify-content

주 축의 정렬 방법

• flex-start (Flex Items를 시작점으로 정렬)
• flex-end (Flex-Items를 끝점으로 정렬)
• center (Flex Items를 가운데 정렬)

align-content

교차 축의 여러 줄 정렬 방법

• stretch (Flex Items를 시작점으로 정렬)
• flex-start (Flex Items 를 시작점으로 정렬)
• flex-end (Flex Items를 끝점으로 정렬)
• center (Flex Items를 가운데 정렬)

align-items

• stretch (Flex Items를 교차축으로 늘림)
• flex-start (Flex Items를 각 줄의 시작점으로 정렬)
• flex-end (Flex Items를 각 줄의 끝점으로 정렬)
• center (Flex Items를 각 줄의 가운데 정렬)

justify-content, align-items 중앙정렬하기

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  background-color:royalblue;
  display:flex;
  justify-content:center;
  width:500px;
  height:300px;
  align-items:center;
}
.container .item {
  width:100px;
  height:100px;
  border:3px dashed red;
  background-color:orange;
}