본문 바로가기
Front-end/Web

CSS 속성 - 플렉스

by 안녕주 2021. 2. 12.

1. Flex 개요

- 수직, 수평 구조를 만드는 방법은 flex를 사용하는 법이 가장 쉽다.

 

-1) float속성을 이용한 수평 구조( box를 제외한 clear-element라는 이름의 다음 요소도 있어야함으로 실 사용에 불편)

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clear-element"></div>
.box {
  float: left;
}
.clear-element {
  clear: both; /* or left */

 

-2) 수평이 될 요소들에 직접 float를 적용하고 그 요소들의 부모요소에 미리 clearfix설정

<div class="clearfix">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
/* IE 핵이나 기타 방식을 제외하고 가장 원리에 충실한 방법 */
.clearfix::after {
  content: "";
  clear: both;
  display: block;
}
.box {
  float: left;
}

 

-3) flex하나 만으로 수평정렬!!

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container{
  border: 2px solid red;
  display: flex;
}
.container .item{
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 10px;
  float: left;
}

 

- CSS3 Flexible Box

: Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공

  1. Flex는 2개의 개념인 Container와 Items로 나뉜다.
  2. Container는 Items를 감싸는 부모요소
  3. Container와 Items에 적용하는 속성이 구분된다.

2. Flex Containers 속성 - display

0) Flex Container

속성 의미
display Flex Container를 정의
flex-flow flex-direction와 flex-wrap의 단축 속성
flex-direction Flex Items의 주 축(main-axis)을 설정
flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정
justify-content 주 축(main-axis)의 정렬 방법을 설정
align-content 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
align-items 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)

 

1) display : 블록, 인라인 요소를 나눌때 사용, flex라고 하면 해당 요소는 flex container를 정의하는 것

값 의미
flex Block 특성의 Flex Container를 정의
inline-flex Inline 특성의 Flex Container를 정의
  • display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가진다.
  • display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가진다.
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container{
  border: 2px solid red;
  display: inline-flex; /*inline-flex: 수평으로 쌓임 *//*flex ; 수직으로 쌓임*/
}
.container .item{
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 10px;
  float: left;
}

 

3. Flex Containers 속성 - flex-flow, flex-direction

-1) flex flow: 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정

flex-flow: 주축 여러줄묶음;

.flex-container {
  flex-flow: row-reverse wrap;
}
값 의미 기본값
flex-direction Items의 주 축(main-axis)을 설정 row
flex-wrap Items의 여러 줄 묶음(줄 바꿈) 설정 nowrap

 

-2) flex-direction

: Items의 주 축(main-axis)을 설정

값 의미 기본값
row Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시 row
row-reverse Items를 row의 반대 축으로 표시  
column Items를 수직축(위에서 아래로)으로 표시  
column-reverse Items를 column의 반대 축으로 표시  

4. Flex 주축과 교차축, 시작점과 끝점

-1) 주축과 교차축

  • 값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직
  • 반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평
  • 즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라진다.(상대적이다)

-2) 시작점과 끝점

  • 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다.
  • 역시 방향에 따라 시작점과 끝점이 달라진다.

- 나중에 flex-start와 flex-end를 사용하는데 이는 방향에 맞는 그 시작점과 끝점을 의미

 

5. Flex Containers 속성 - flex-wrap

: Items의 여러 줄 묶음(줄 바꿈)을 설정

값 의미 기본값
nowrap 모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시) nowrap
wrap Items를 여러 줄로 묶음  
wrap-reverse Items를 wrap의 역 방향으로 여러 줄로 묶음  
  • 기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않는다.
  • 이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄 안에서만 가변한다.
  • Items를 줄 바꿈 하려면 값으로 wrap을 사용해야 한다.

- containers 속성 : flex-wrap: wrap

<div class="container">
  <div class="item">A</div>
  <div class="item"> B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>
.container{
  border: 4px solid;
  display: flex;
  flex-wrap: wrap;
}
.container .item{
  width: 150px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
}

 

6. Flex Containers 속성 - justify-content

: 주 축(main-axis)의 정렬 방법을 설정

값 의미 기본값
flex-start Items를 시작점(flex-start)으로 정렬 flex-start
flex-end Items를 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨  
space-around Items를 균등한 여백을 포함하여 정렬  

 

- Containers 속성 :  justify-content: space-between;

<div class="container">
  <div class="item">A</div>
  <div class="item"> B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>
.container{
  border: 4px solid;
  display: flex; /*수평정렬*/
  justify-content: space-between;
}
.container .item{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}

 

7. Flex Containers 속성 - align-content

: 교차 축(cross-axis)의 정렬 방법을 설정 ( flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있다)

  • Items가 한 줄일 경우 align-items 속성을 사용해야한다.
  • 값 stretch는 교차 축에 해당하는 너비(속성 width 혹은 height)가 값이 auto(기본값)일 경우 교차 축을 채우기 위해 자동으로 늘어난다.
값 의미 기본값
stretch Container의 교차 축을 채우기 위해 Items를 늘림 stretch
flex-start Items를 시작점(flex-start)으로 정렬  
flex-end Items를 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨  
space-around Items를 균등한 여백을 포함하여 정렬  

- Containers 속성 : align-content

<div class="container">
  <div class="item">A</div>
  <div class="item"> B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>
.container{
  height: 400px;
  border: 4px solid;
  display: flex; /*수평정렬*/
  flex-wrap: wrap;
  align-content: space-between; /*없을경우 height 여백이 큼*/
}
.container .item{
  width: 120px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}

 

8. Flex Containers 속성 - align-items

: 교차 축(cross-axis)에서 Items의 정렬 방법을 설정

  • Items가 한 줄일 경우 많이 사용
  • 주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선한다.
  • 따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 한다.
값 의미 기본값
stretch Container의 교차 축을 채우기 위해 Items를 늘림 stretch
flex-start Items를 각 줄의 시작점(flex-start)으로 정렬  
flex-end Items를 각 줄의 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
baseline Items를 문자 기준선에 정렬  

- Containers 속성 : align-items: baseline;

<div class="container">
  <div class="item">A</div>
  <div class="item"> B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>
.container{
  height: 400px;
  border: 4px solid;
  display: flex; /*수평정렬*/
  flex-wrap: wrap;
  align-items: baseline;
}
.container .item{
  width: 120px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}
.container .item:nth-child(3){
  font-size: 50px;
}

 

9. Flex Items 속성 - order

-0) Flex Items 

속성 의미
order Flex Item의 순서를 설정
flex flex-grow, flex-shrink, flex-basis의 단축 속성
flex-grow Flex Item의 증가 너비 비율을 설정
flex-shrink Flex Item의 감소 너비 비율을 설정
flex-basis Flex Item의 (공간 배분 전) 기본 너비 설정
align-self 교차 축(cross-axis)에서 Item의 정렬 방법을 설정

 

-1) order 

: Item의 순서를 설정

  • Item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다.
  • 음수가 허용된다.
  • HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용하다.
값 의미 기본값
숫자 Item의 순서를 설정 0

 

- Items 속성 : order

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>
.container{
  border: 4px solid;
  display: flex; /*수평정렬*/
}
.container .item{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item1{
  order: 1;
}
.item4{
  order:1;
}
.item6{
  order: -1;
}

 

10. Flex Items 속성 - flex-grow

: Item의 증가 너비 비율을 설정

  • 숫자가 크면 더 많은 너비를 가진다.
  • Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.
값 의미 기본값
숫자 Item의 증가 너비 비율을 설정 0

 

-모든 Items의 총 증가 너비(flex-grow)에서 각 Item의 증가 너비의 비율 만큼 너비를 가질 수 있다.
- 예를 들어 Item이 3개이고 증가 너비가 각각 1, 2, 1이라면(총 4), 첫 번째 Item은 총 너비의 25%(1/4)을,

두 번째 Item은 총 너비의 50%(2/4)를, 세 번째 Item은 총 너비의 25%(1/4)을 가지게 된다.

 

- 예제1 : 교재 예제 복붙

<h1>flex-grow: </h1>

<div class="container container1">
  <div class="item">0</div>
  <div class="item">0</div>
  <div class="item">0</div>
  <div class="item">1</div>
</div>

<div class="container container2">
  <div class="item">1</div>
  <div class="item">3</div>
  <div class="item">1</div>
  <div class="item">0</div>
</div>

<div class="container container3">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">1</div>
  <div class="item">2</div>
</div>
HTML CSS JSResult Skip Results Iframe
EDIT ON
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
body {
  padding: 20px;
  font-family: "Noto Sans KR", Helvetica, sans-serif;
}
h1 {
  font-size: 22px;
  font-weight: 600;
  color: #643BFF;
  margin-bottom: 20px;
}
.container {
  width: 200px;
  height: 180px;
  background: #643BFF;
  margin-bottom: 10px;
  display: flex;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: #fff;
  height: 150px;
}
.item:nth-child(1) { background: #FFC447; }
.item:nth-child(2) { background: #E87635; }
.item:nth-child(3) { background: #FF4847; }
.item:nth-child(4) { background: #D335E8; }

.container1 .item:nth-child(1) { flex-grow: 0; }
.container1 .item:nth-child(2) { flex-grow: 0; }
.container1 .item:nth-child(3) { flex-grow: 0; }
.container1 .item:nth-child(4) { flex-grow: 1; }

.container2 .item:nth-child(1) { flex-grow: 1; }
.container2 .item:nth-child(2) { flex-grow: 3; }
.container2 .item:nth-child(3) { flex-grow: 1; }
.container2 .item:nth-child(4) { flex-grow: 0; }

.container3 .item:nth-child(1) { flex-grow: 1; }
.container3 .item:nth-child(2) { flex-grow: 2; }
.container3 .item:nth-child(3) { flex-grow: 1; }
.container3 .item:nth-child(4) { flex-grow: 2; }


Resources1× 0.5× 0.25×Rerun

 

-예제2: Items 속성 : flex-grow

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
.container{
  border: 4px solid;
  display: flex; /*수평정렬*/
}
.container .item{
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item1{
  flex-grow: 1;
}
.item2{
  flex-grow: 1;
}
.item3{
  flex-grow: 4;
}

 

11. Flex Items 속성 - flex-shrink

: Item이 감소하는 너비의 비율을 설정

  • 숫자가 크면 더 많은 너비가 감소한다.
  •  Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.
값 의미 기본값
숫자 Item의 감소 너비 비율을 설정 1

감소 너비(flex-shrink)는 요소의 너비에 영향을 받기 때문에 계산하기 까다롭다.
영향을 받는다는 요소의 너비는 width, height, flex-basis 등으로 너비가 지정된 경우를 의미한다.
Container의 너비가 줄어 Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 Item의 너비가 줄어든다.

 

예를 들어 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 같은 Item이 2개이고 지정된 감소 너비가 각각 2와 1이라면,
감소 너비는 2:1 비율이며,
첫 번째 Item은 90px의 2/3인 60px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/3인 30px 만큼 너비가 감소한다.

 

다른 예시로 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 다른 Item이 2개이고 요소 너비는 각각 200과 100이고,
지정된 감소 너비가 각각 2와 1이라면,
200 x 2 = 400과 100 x 1 = 100 즉 감소 너비는 4:1 비율이며,
첫 번째 Item은 90px의 4/5인 72px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/5인 18px 만큼 너비가 감소한다.

 

-예제1 : 교재 예제 복붙

HTML CSS JSResult Skip Results Iframe
EDIT ON
<h1>flex-shrink: </h1>

<div class="container container1">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>

<div class="container container2">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">0</div>
  <div class="item">0</div>
</div>

<div class="container container3">
  <div class="item">1</div>
  <div class="item">4</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>


Resources1× 0.5× 0.25×Rerun
HTML CSS JSResult Skip Results Iframe
EDIT ON
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
body {
  padding: 20px;
  font-family: "Noto Sans KR", Helvetica, sans-serif;
}
h1 {
  font-size: 22px;
  font-weight: 600;
  color: #643BFF;
  margin-bottom: 20px;
}
.container {
  width: 550px;
  height: 180px;
  background: #643BFF;
  margin-bottom: 10px;
  display: flex;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: #fff;
  height: 150px;
  flex-basis: 120px;
}
.item:nth-child(1) { background: #FFC447; }
.item:nth-child(2) { background: #E87635; }
.item:nth-child(3) { background: #FF4847; }
.item:nth-child(4) { background: #D335E8; }

.container2 .item:nth-child(1) { flex-shrink: 1; }
.container2 .item:nth-child(2) { flex-shrink: 2; }
.container2 .item:nth-child(3) { flex-shrink: 0; }
.container2 .item:nth-child(4) { flex-shrink: 0; }

.container3 .item:nth-child(1) { flex-shrink: 1; }
.container3 .item:nth-child(2) { flex-shrink: 4; }
.container3 .item:nth-child(3) { flex-shrink: 1; }
.container3 .item:nth-child(4) { flex-shrink: 1; }


Resources1× 0.5× 0.25×Rerun

 

12. Flex Items 속성 - flex-basis

: Item의 (공간 배분 전) 기본 너비를 설정

  • 값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있다.
  • 하지만 단위 값이 주어질 경우 설정할 수 없다.
값 의미 기본값
auto 가변 Item과 같은 너비 auto
단위 px, em, cm 등 단위로 지정  

- flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의

<div class="container">
  <div class="item item1">Good job!</div>
  <div class="item item2">A</div>
  <div class="item item3">Hello World~~~~!</div>
</div>
.container{
  border: 4px solid;
  display: flex;
}
.container .item{
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  flex-grow: 1;
  flex-basis: 100px;
}
.container .item3{
  flex-grow:2;
}

 

13. Flex Items 속성 -flex

: Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성이다.

값 의미 기본값
flex-grow Item의 증가 너비 비율을 설정 0
flex-shrink Item의 감소 너비 비율을 설정 1
flex-basis Item의 (공간 배분 전) 기본 너비 설정 auto

 

flex: 증가너비 감소너비 기본너비;

.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}
  • flex-grow를 제외한 개별 속성은 생략할 수 있다.
    만약 flex: 1;로 작성하면 flex-grow: 1;과 같다.
  • flex-basis의 기본값은 auto입니다만 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용된다.
    다시 정리하면 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;이 된다. 주의하자.

- 예제

<div class="container">
  <div class="item item1">Good job!</div>
  <div class="item item2">A</div>
  <div class="item item3">Hello World~~~~!</div>
</div>
.container{
  border: 4px solid;
  display: flex;
}
.container .item{
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  flex: 1 1 auto; /*flex: 1;을 할경우 flex-basis가 auto가 아닌 0이다*/
}

 

14. Flex Items 속성 - align-self

: 교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정

  • align-items는 Container 내 모든 Items의 정렬 방법을 설정한다.
  • 필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있다.
  • 이 속성은 align-items 속성보다 우선한다.
값 의미 기본값
auto Container의 align-items 속성을 상속받음 auto
stretch Container의 교차 축을 채우기 위해 Item을 늘림  
flex-start Item을 각 줄의 시작점(flex-start)으로 정렬  
flex-end Item을 각 줄의 끝점(flex-end)으로 정렬  
center Item을 가운데 정렬  
baseline Item을 문자 기준선에 정렬   

<div class="container">
  <div class="item">1</div>
  <div class="item item2">2</div>
  <div class="item">3</div>
  <div class="item item4">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item item7">7</div>
  <div class="item">8</div>
</div>
.container{
  height: 400px;
  border: 4px solid;
  display: flex;
  flex-wrap:wrap;
  align-items: flex-end;
}
.container .item{
  width: 100px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}
.container .item2{
  align-self: center;
}
.container .item4{
  align-self: flex-start;
}
.container .item7{
  align-self: stretch;
  height: auto;
}

Thanks to heropy.blog/2018/11/24/css-flexible-box/

'Front-end > Web' 카테고리의 다른 글

Sass(SCSS) 개요  (0) 2021.02.13
CSS속성 - Grid  (0) 2021.02.12
CSS - 속성 - 애니메이션 & 다단  (0) 2021.02.11
CSS속성 - 전환 & 변환  (0) 2021.02.11
CSS - 배경  (0) 2021.02.11

관련글

댓글

티스토리툴바