[CSS] 플렉스박스 Flexbox

 

 

 

 

 

 

공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.

재배포 수정하지 마세요. 

 

 

 

 

 

 

 

 

 

플렉스모드를 사용하려면 플렉스 컨테이너부터 정의해야 한다. 

 

 

Flexbox parent element - Container

디스플레이 속성을 플랙스로 지정하면서 컨테이너는 flexible한 부모요소가 된다. 

.flex-container {
  display: flex;
}

 

 

 

flex-direction 

flex-direction 속성은 flex item들을 정렬하는 방법을 정의한다. 

 

.flex-container {
  display: flex;
  flex-direction: column;
}

column : flex item들을 행 기준으로 정렬한다. 

column-reverse :  행 기준 거꾸로 정렬한다. 

row : 열 기준으로 정렬한다. 

row-reverse : 열 기준 거꾸로 정렬한다. 

 

 

 

flex-wrap

flex-wrap 속성은 flex item들을 감쌀 것인지 아닌지를 구체화한다. 

 

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

 

warp : flex 아이템들을 필요하다면 감싼다.

nowrap : flex 아이템들을 감싸지 않는다. 

wrap-reverse : 역순서대로 필요하다면 감싼다. (역 순서대로 감싸는 것이라 만약 빈공간이 있다면 아이템들을 아래부터 채우고 윗부분에서 비게된다.) 

 

 

  

flex-flow

 

flex-flow속성은 flex-direction 과 flex-wrap 속성의 축약형이다. 

 

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

 

 

justify-content

 

justify-content 속성은 flex item들의 가로정렬을 정한다. 

 

.flex-container {
  display: flex;
  justify-content: center;
}

 

center : 전체 아이템들을 컨테이너의 가운데로 정렬한다. 

flex-start : 컨테이너의 시작(왼쪽)으로 정렬한다. 

flex-end : 컨테이너의 끝(오른쪽)으로 정렬한다. 

space-around : 아이템들의 그 줄의 전후 사이 공백을 주며 정렬한다. 

space-between : 아이템들의 전후는 제외하고 사이공백만 주며 정렬한다. 

 

 

 

align-items

 

align-items 속성 또한  flex item들의 세로 정렬을 정한다. 

 

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

 

center : 아이템들을 컨테이너 높이의 가운데로 정렬한다. 

flex-start : 컨테이너의 시작(위쪽)으로 정렬한다.

flex-end : 컨테이너의 끝(아래쪽)으로 정렬한다. 

stretch : 아이템들을 컨테이너의 높이에 맞게 늘린다. 

baseline : 각각 다른 크기의 아이템들을 기준 줄에 맞춰 한줄로 정렬한다. 

 

 

 

align-content

 

align-content 속성은 flex 라인들을 정렬할때 사용한다. 

 

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

 

space-between : flex 라인들을 사이에 같은 공백크기를 두고 정렬한다. 

space-around : 라인들의 전후 사이에 공백을 두고 정렬한다. 

stretch : 공백을 flex 라인 높이를 늘려 채운다. 

center : flex 라인들을 컨테이너의 중간으로 모아 정렬한다.

flex-start : 라인들을 컨테이너의 시작점(위쪽)으로 정렬한다.

flex-end : 라인들을 컨테이너의 끝점(아래쪽)으로 정렬한다. 

 

 

 

Flexbox Child Elements - Items

display : flex 속성을 가진 부모요소안의 자식 요소는 item의 속성을 지니게 된다. 

 

order 

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

 

각 아이템들에 order 속성을 주어 순서를 정할 수 있다. 

기본 값은 0이며, order값의 순서에 맞게 보여진다. 

 

 

 

flex-grow

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

 

각 아이템들의 상대적인 크기를 정할 수 있다. 

기본 값은 0이며, flex-grow값에 맞는 비율로 보여진다. 

 

 

 

flex-shrink

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

 

아이템의 크기가 다른아이템에 상대적으로 줄어든다. 

기본 값은 1이며, 값은 꼭 숫자로 지정해줘야한다. 

 

 

flex-basis

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

 

선택한 아이템의 처음 크기를 정한다.

 

 

flex

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

 

flex-grow, flex-shrink, flex-basis 속성의 축약형이다. 첫째와 둘째는 숫자로 마지막은 크기로 정해야한다. 

 

 

 

align-self

align-self 속성은 flexible한 컨테이너의 아이템들중 특정 아이템의 세로정렬을 정한다.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

 

center : 특정 아이템의 크기를 늘리지 않고 가운데 정렬한다. 

flex-start : 특정 아이템의 크기를 늘리지 않고 컨테이너의 시작점(위쪽)으로 정렬한다.

flex-end : 특정 아이템의 크기를 늘리지 않고 컨테이너의 끝점(아래쪽)으로 정렬한다.