CSS flex

Cola Coca·2022년 7월 17일

CSS

목록 보기
10/13

Flex

  • Flexible Box의 줄임말로, 레이아웃 배치를 행 또는 열로 나누어 1차원 배치를 한다.
  • flex-direction 으로 지정하는 "주축"과 수직 축인 "교차축"으로 나뉜다.
  • "주축"과 "교차축"에 대한 배치 방법을 지정하여 레이아웃을 배치한다.
  1. display : flex;
  • 아이템들을 정렬하고자 하는 컨테이너 박스에 지정한다.
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
.container {
	display: flex;
}
.box {
	width: 100px;
    height: 100px;
    border : 1px solid #000;
}

직접 해보기

  1. flex-direction

  • 주축에 대한 레이아웃 배치 방향을 지정한다.

    값설명
    row아이템들을 가로방향(행, 인라인)으로 배치한다.
    row-reverse아이템들을 row의 반대방향으로 배치한다.
    column아이템들을 세로방향(열, 블록)으로 배치한다.
    column-reverse아이템들을 column의 반대방향으로 배치한다.
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
.container {
	display: flex;
    flex-direction: row; /* 기본값. 가로방향으로 배치. */
  	flex-direction : column; /* 세로방향으로 배치 */ 
}
.box {
	width: 100px;
    height: 100px;
    border : 1px solid #000;
}

직접 해보기

  1. flex-wrap
  • 컨테이너 영역을 넘는 행의 나열 방법을 지정한다.
값설명
nowrap줄바꿈을 일으키지 않고 그대로 배치한다.
wrap줄바꿈을 일으킨다.
wrap-reverse줄바꿈을 일으키고 반대방향으로 배치를 한다.
<div class="container">
  <div class="box">asdasdsad</div>
  <div class="box">asdasdasdasdas</div>
  <div class="box">dasdasd</div>
  <div class="box">dasdsadasdasdasdasdas</div>
</div>
.container {
	display: flex;
    border : 1px solid red;
  	width: 350px;
    
    flex-wrap : nowrap; /* 기본값. 줄바꿈이 일어나지 않는다. */
    flex-wrap : wrap; /* 기본값. 줄바꿈이 일어나지 않는다. */
}
.box {
	margin : 5px;
    border : 1px solid #000;
}

직접 해보기

  1. flex-flow
  • flex-direction 과 flex-wrap 의 축약형 속성.
  • 첫번째 값은 flex-direction의 값, 두번째 값은 flex-wrap의 값을 입력한다.
<div class="container">
  <div class="box">asdasdsad</div>
  <div class="box">asdasdasdasdas</div>
  <div class="box">dasdasd</div>
  <div class="box">dasdsadasdasdasdasdas</div>
</div>
.container {
	display: flex;
    border : 1px solid red;
  	width: 200px;
    
    flex-flow : row wrap; /* 가로방향으로 줄바꿈을 일으키며 정렬. */
}
.box {
	margin : 5px;
    border : 1px solid #000;
}

직접 해보기

  1. flex-basis

  • 아이템의 주축 방향의 기본(최소) 크기를 지정합니다.
    => flex-direction의 값이 row인 경우 너비가, column 인 경우 높이가 지정된다.

  • 컨텐츠의 크기가 flex-basis 보다 작은 경우 아이템의 크기가 flex-basis의 값으로 지정된다.

  • 컨텐츠의 크기가 flex-basis 보다 큰 경우 컨텐츠의 크기가 아이템의 크기가 된다.

  • flex-grow 와 flex-shrink의 기준이 된다.

<div class="container">
  <div class="box">asdasdsad</div>
  <div class="box">asdasdasdasdas</div>
  <div class="box">dasdasd</div>
  <div class="box">dasdsadas</div>
</div>
.container {
	display: flex; 
    width:500px;
    border: 1px solid red;
}
.box {
	/* flex-direction의 기본값이 row이기 때문에 아이템의 기본 너비 지정. */
	flex-basis : auto; /* 기본값. 컨텐츠의 너비가 기본 너비.*/
    flex-basis : 100px; /* 아이템의 기본 너비가 100px */
    flex-basis : 20%; /* 아이템의 기본 너비가 컨테이너 너비의 20% */

	margin : 5px;
    border : 1px solid #000;
}

직접 해보기

  1. flex-grow
  • 사용가능한 공간(여백)을 각 아이템에 분배하는 비율을 지정한다.
  • 여백을 나눠서 각 아이템의flex-basis 값에 더한 값이 각 아이템의 너비 혹은 높이가 된다.
    => flex-grow를 사용한다면 flex-basis 값도 염두하여 지정해야 한다.
<div class="container">
  <div class="box">asdasdsad</div>
  <div class="box">asdasdasdas</div>
  <div class="box">dasdasd</div>
  <div class="box">dasdsadas</div>
</div>
.container {
	display: flex; 
 	width:500px;
  	border: 1px solid red;
}
.box {
  	flex-basis : 100px;
	margin : 5px;
  	border : 1px solid #000;
}

/* .container의 남은 여백 60px을 각 2:1:1:1의 비율로 flex-basis 값에 더한 값을 너비로 가진다. */
.box:nth-child(1) {
  	flex-grow :2;
}
.box:nth-child(2) {
  	flex-grow :1;
}
.box:nth-child(3) {
  	flex-grow :1;
}
.box:nth-child(4) {
    flex-grow :1;
}

직접 해보기

  1. flex-shrink
  • 사용 가능한 공간(여백)이 부족할 때 사이즈를 줄이는 비율을 지정한다.
  • 여백이 부족할 때 각 아이템의 크기를 flex-shrink 의 값(비율)로 줄인다.
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
.container {
	display: flex; 
 	width: 300px;
  	border: 1px solid red;
}
.box {
  	flex-basis : 100px;
	margin : 5px;
 	border : 1px solid #000;
}

/* 컨테이너의 너비가 부족할 때 2:1:1:1의 비율로 축소한다. */
.box:nth-child(1) {
  flex-shrink :2;
}
.box:nth-child(2) {
  	flex-shrink :1;
}
.box:nth-child(3) {
  	flex-shrink :1;
}
.box:nth-child(4) {
  	flex-shrink :1;
}
  1. flex
  • flex-grow, flex-shrink,felx-basis 값의 축약형 속성이다.
  • flex : auto 로 지정하면 flex : 1 1 auto 와 동일하게 동작한다.
  • flex : none 로 지정하면 flex : 0 0 auto 와 동일하게 동작한다.
  • flex : 2 과 같이 숫자 하나만 입력하면 flex : 2 1 0 과 같이 동작한다.
    => flex-grow만 지정하고 flex-shrink 1로, flex-basis는 0으로 지정한 것과 같다. 
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
.container {
	display: flex; 
 	width: 300px;
  	border: 1px solid red;
}
.box {
	margin : 5px;
 	border : 1px solid #000;
}

.box:nth-child(1) {
	/* flex-grow : 2; flex-shrink : 1; flex-basis : 50px; 과 동일  */
  	flex : 2 1 100px;
}
.box:nth-child(2) {
	/* flex-grow : 1; flex-shrink : 1; flex-basis : auto; 와 동일 */
  	flex-shrink :atuo;
}
.box:nth-child(3) {
	/* flex-grow:2; flex-shrink: 1; flex-basis: 0; 와 동일 */
  	flex : 2;
}
.box:nth-child(4) {
  	/* flex-grow:1; flex-shrink: 1; flex-basis: 0; 와 동일 */
  	flex : 1;
}

직접 해보기

  1. justify-content, align-items
  • justify-content, align-items 모두 아이템들을 감싸는 컨테이너 박스에 지정한다.
  • justify-content : 주축에 대한 아이템 정렬 방법을 지정한다.
    => flex-direction의 값에 따라 다르게 동작한다.
값설명
flex-start아이템들이 주축의 시작점부터 정렬된다.
flex-end아이템들이 주축의 끝점부터 정렬된다.
center아이템들이 주축의 가운데에 정렬된다.
space-between아이템 사이에 여백을 균등하게 분배한다.
space-around시작선 및 끝선과 아이템 사이의 공간도 고려하여 여백을 분배한다.
space-envenly여백을 시작선 및 끝선과 아이템 사이의 공간과 아이템간의 사이 모두 균등하게 분대한다.
  • align-items : 교차축에 대한 아이템 정렬 방법을 지정한다.
값설명
stretch아이템을 교차축 방향(너비 혹은 높이)을 컨테이너의 크기(너비 혹은 높이)만큼 늘린다.
flex-start아이템들이 교차축의 시작점부터 정렬된다.
flex-end아이템들이 교차축의 끝점부터 정렬된다.
center아이템들이 교차축의 가운데에 정렬된다.
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
.container {
	display: flex; 
 	width : 500px;
    height : 300px;
  	border: 1px solid red;
    
    align-items: center; /* 아이템들을 교차축의 가운데에 정렬 */
    justify-content : center; /* 아이템들을 주축의 가운데에 정렬 */
}
.box {
	width : 100px;
    height : 100px;
	
	margin : 5px;
 	border : 1px solid #000;
}

직접 해보기

  1. align-self
  • 교차축 정렬에 대한 방법을 아이템에 지정한다.
  • 아이템 개별적으로 정렬 방법을 지정할 수 있다.
  • 입력값은 align-items와 동일하다.
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>
.container {
	display: flex; 
 	width : 500px;
    height : 300px;
  	border: 1px solid red;
    
    align-items: center; /* 아이템들을 교차축의 가운데에 정렬 */
    justify-content : center; /* 아이템들을 주축의 가운데에 정렬 */
}
.box {
	width : 100px;
    height : 100px;
    
	margin : 5px;
 	border : 1px solid #000;
}
.box:nth-child(3) {
	/* .box 중 세번째 요소만 교차축 정렬을 시작점으로 지정 */
    align-self : flex-start;
}

직접 해보기

profile
Cola Coca
이전 포스트

CSS Animation

다음 포스트

CSS Grid

0개의 댓글