요소의 정렬(플렉스)

display: Flex Container의 화면 출력(보여짐) 특성(block, inline)

flex: 블록 요소와 같이 Flex Container 정의

inline-flex: 인라인 요소와 같이 Flex Container 정의

 

flex-direction: 주 축을 설정

row: 행 축 (좌 => 우)

row-reverse: 행 축 (우 => 좌)

column: 열 축(위 => 아래)

column-reverse: 열 축(아래 => 위)

 

flex-wrap: Flex Items 묶음 (줄 바꿈) 여부

nowrap: 묶음(줄 바꿈)없음 (기본값)

wrap: 여러 줄로 묶음

wrap-reverse: wrap의 반대 방향으로 묶음

 

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

.container {
  width: 300px;
  background-color: royalblue;
 display: flex;
  flex-wrap: wrap;
}

결과(줄바꿈)

 

Justify-content: 주 축의 정렬 방법(수평정렬)

flex-start: Flex Items를 시작점으로 정렬

flex-end: Flex Items를 끝점으로 정렬

center: Flex Items를 가운데 정렬

space-between: 각 Flex Item 사이를 균등하게 정렬

space-aroud: 각 Flex Item의 외부 여백을 균등하게 정렬

 

align-content: 교차 측의 여러 줄 정렬 방법(수직정렬)

stretch: Flex Items를 시작점으로 정렬 (기본값)

flex-start: Flex Items를 시작점으로 정렬

flex-end: Flex Items를 끝점으로 정렬

center: Flex Items를 가운데 정렬

space-between: 각 Flex Item 사이를 균등하게 정렬

space-around: 각 Flex Item의 외부 여백을 균등하게 정렬

 

사용방법

1. 기본적으로 2줄 이상이어야 함(flex-wrap: wrap; 설정이 되어있어야함)

2. 정렬이 가능한 여백이 존재 해야 함

 

align-items: 교차 축의 한 줄 정렬 방법

stretch: Flex Items를 교차 축으로 늘림 (기본값)

flex-start: Flex Items를 각 줄의 시작점으로 정렬

flex-end: Flex Items를 각 줄의 끝점으로 정렬

center: Flex Items를 각 줄의 가운데 정렬

baseline: Flex Items를 각 줄의 문자 기준선에 정렬

 

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

.container {
  width: 500px;
  height: 300px;
  background-color: royalblue;
  display: flex;
  justify-content:center;
  align-items:center;
}

가운데 정렬 결과

order: Flex Item의 순서

0: 순서 없음(기본값)

숫자: 숫자가 작을 수록 순서가 먼저

.container .item:nth-child(2){
  order: -1;

}

 

flex-grow: Flex Item의 증가 너비 비율

0: 증가 비율 없음

숫자: 증가 비율

 

flex-shrink: Flex Item의 감소 너비 비율

1: Flex container 너비에 따라 감소 비율 적용

숫자: 감소 비율

 

flex-basis: Flex Item의 공간 배분 전 기본 너비

auto: 요소의 Content 너비

단위: px, em, rem 등 단위로 지정