CSS

11. Flexbox

몽이코딩 2024. 4. 29. 16:56
반응형

display float position 등과 같은 속성을 사용해 레이아웃을 구현하는데 한계가 있어서 어려운 레이아웃을 간단하게 구현할 수 있게 CSS3에 추가된 레이아웃 방식이 flexbox입니다.

 

 

flexbox

  • 효율적으로 HTML 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 레이아웃 방식입니다.
  • flexbox는 우리가 배치하고 싶은 HTML 요소인 item과 이것을 감싸고 있는 상위 부모 요소인 container로 구성됩니다.
  • flexbox를 만드는 방법은 정렬하려는 요소(item)의 부모 요소(container)에 display: flex;속성을 적용하면 됩니다.

 

 

flex container 속성 종류

전체적인 정렬이나 흐름에 관련된 속성은 container에 정의합니다.

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

 

flex-direction

  • container의 주축 방향을 설정합니다.
  • 속성 값 row는 좌에서 우로 수평 배치됩니다. 속성의 기본값입니다.
  • 속성 값 row-reverse는 우에서 좌로 수평 배치됩니다.
  • 속성 값 column은 위에서 아래로 수직 배치됩니다.
  • 속성 값 column-reverse는 아래에서 위로 수직 배치됩니다.

 

flex-wrap

  • item을 한 줄로 또는 여러줄로 배치하게 합니다.
  • 속성 값 nowrap은 item을 개행하지 않고 1행에 배치합니다. 속성의 기본값이며, 각 item의 폭은 container에 들어갈 수 있는 크기로 축소됩니다.
  • 속성 값 wrap은 item들의 width의 합계가 container의 width보다 큰 경우 item을 개행하여 배치합니다.
  • 속성 값 wrap-reverse은 wrap과 동일하나 아래에서 위로 배치됩니다.

 

flex-flow

  • flex-direction 속성과 flex-wrap 속성을 설정하기 위한 단축속성으로 기본값은 row nowrap입니다.
  • 예) flex-flow: row nowrap

 

justify-content

  • container의 주축 방향을 기준으로 item을 수평 정렬합니다.
  • 속성 값 flex-start는 좌측부터 정렬합니다.
  • 속성 값 flex-end는 우측부터 정렬합니다.
  • 속성 값 center는 container의 중앙에 정렬합니다.
  • 속성 값 space-between은 첫번째와 마지막 item이 좌우 끝에 정렬되고 나머지 item은 균등한 간격으로 정렬됩니다.
  • 속성 값 space-around는 모든 item이 균등한 간격으로 정렬됩니다.

 

align-items

  • container의 수직 방향을 기준으로 item을 수평 정렬합니다.
  • 속성 값 stretch는 모든 item이 container의 높이에 꽉찬 높이를 갖습니다. 속성의 기본값입니다.
  • 속성 값 flex-start는 item이 container의 시작점부터 순차정렬 됩니다.
  • 속성 값 flex-end는 item이 container의 끝지점부터 순차정렬 됩니다.
  • 속성 값 center는 item이 container의 중앙에 순차정렬됩니다.
  • 속성 값 baseline item이 텍스트의 베이스라인을 기준으로 정렬됩니다.

 

align-content

  • item이 2줄이 되었을 때 행의 수직 방향을 결정하여 정렬합니다.
  • 속성 값 stretch는 첫번 째 item 배치 이후에 균등하게 분배된 공간에 정렬되어 배치됩니다. 속성의 기본값입니다.
  • 속성 값 flex-start는 item이 container의 시작점부터 순차정렬 됩니다.
  • 속성 값 flex-end는 item이 container의 끝지점부터 순차정렬 됩니다.
  • 속성 값 center는 item이 container의 중앙에 순차정렬됩니다.
  • 속성 값 space-between은 첫번째 item이 container의 상단에, 마지막 item은 container의 하단에 배치되며 나머지 행은 균등 분할된 공간에 배치됩니다.
  • 속성 값 space-around는 모든 item이 균등 분할된 공간 내에 배치 정렬됩니다.

 

 

flex item 속성 종류

자식 요소의 크기나 순서에 관련된 속성은 item에 정의합니다.

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

 

order

  • item의 배치 순서를 지정합니다.
  • 기본 배치 순서는 container에 추가된 순서이고 기본값은 0입니다.

 

flex-grow

  • item의 너비에 대한 확대 인자를 지정합니다. 기본값은 0이고 음수값은 무효합니다.
  • 모든 item이 동일한 값을 가지면 동일한 너비를 갖고 하나의 item에 높은 값을 주면 더 큰 너비를 갖습니다.

 

flex-shrink

  • item의 너비에 대한 축소 인자를 지정합니다. 기본값은 1이고 음수값은 무효합니다.
  • 0을 지정하면 축소가 해제되어 원래의 너비를 유지합니다.

 

flex-basis

  • item의 너비 기본값을 px, % 등의 단위로 지정합니다. 기본값은 auto입니다.

 

flex

  • flex-grow, flex-shrink, flex-basis 속성의 단축속성 입니다.
  • 기본값은 0 1 auto 입니다.

 

align-self

  • align-items 속성보다 우선하여 개별 item을 정렬합니다.
  • 기본값은 auto입니다.

 

 

실습

<!-- HTML -->
<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 class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
</div>

<div class="container2">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
/* CSS */
.container {
  background-color: lightgray;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
/*   flex-flow: row wrap; */
/*   justify-content: space-between; */
/*   align-content: flex-end; */
/*   align-items: flex-end; */
}

.item {
  background-color: black;
  color: white;
  border: 1px solid white;
  width: 100px;
  height: 100px;
  text-align: center;
}

.container2 {
  background-color: pink;
  height: 100vh;
  margin-top: 10px;
  display: flex;
}

.item1 {
/*   order: 1; */
/*   flex-grow: 2; */
/*   flex-shrink: 0; */
/*   flex-basis: 70px; */
/*   flex: 2 0 auto; */
  align-self: center;
}

.item2 {
/*   order: 2; */
/*   flex-grow: 1; */
/*   flex-shrink: 1; */
/*   flex-basis: 30%; */
/*   flex: 1 1 auto; */
}

.item3 {
/*   order: 0; */
/*   flex-grow: 1; */
/*   flex-shrink: 2; */
/*   flex-basis: 50%; */
/*   flex: 1 2 auto; */
}
반응형