[CSS 기초] Flex

Urther·2021년 10월 5일

Html,Css

목록 보기

11/12

💸Flex를 왜 사용해야할까?

<body>
  <div class="containter">
    <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>
</body>

라고 하면 div(block 요소)기 때문에 수직 정렬을 하게 된다.

수평 정렬을 하고 싶다면?

display:inline-block;

요소를 주면 수평으로 정렬된 것 같이 보이지만, 요소들간의 간격으로 인해 여백이 존재한다. (개행이 있으면 여백이 생긴다.)

float:left;

하면 둥둥 부유하게 되어서 수평으로 잘 된 것처럼 보이지만 container 안에 들어가지 않게 된다.

contatiner 요소 안에서 자연스럽게 부유시키는 방법은 뭐가 있을까?
부모인 contatiner 클래스에 display : flex 를 추가해주면 유연하게 수평정렬이 가능하다.

(정렬하고자하는 class가 여러개일 때 사용)

1. display 더 자세히👀

원래 알고 있던 것은 inline block inline-block 세 가지다. 하지만 이것은 바깥쪽의 요소들간의 관계를 정의한다면,

안쪽(inside)는 어떻게 요소들을 정렬할 것인지 정의한다.
아무튼, 안쪽과 바깥쪽은 아예 다른 개념이라는 것 !

flex는 container 사용할 수 있는 속성인지 내부 item 에 들어갈 수 있는 속성인지 잘 생각해야한다.

2. Container에 관한 속성

1 ) flex-direction

주축 및 방향을 변경할 수 있다.

원래의 기본 주축은 오른쪽 방향인데 flex-direction을 통해
cross 방향을 주축으로 만들고, 주축을 closs 방향으로 만들 수 있다.

주축을 변경한다는 것은 정렬에도 아주 큰 의미가 있다.

주축의 방향을 변경한다는 것은 main 방향이 위에서 아래(위의 사진을 본다면)이라면, 아래에서 위도 변경 가능하다.

메인 주축을 기준으로
row : →
row-reverse : ←
column : ↓
column-reverse : ↑

2 ) flex-wrap

내부 아이템들을 50px, 50px 로 설정했어도 viewport를 줄이면 container 내부에서 아이템의 크기가 50px 50px 이하로 줄어들 수 있다.

(원래 50px 50px 유지된 모습)
( viewport를 줄였을 때)

nowrap : default 값
wrap : 자신의 크기를 유지하고, 공간이 없으면 다음 칸으로 이동한다.
wrap-reverse : wrap의 반대 순서로 정렬이 된다.

3) flex-flow

flex-direction 과 flex-wrap에 사용할 수 있는 단축 속성이다.

flex-flow : row wrap
row 방향의 wrap 방식을 이용한다는 예제

3. Item에 관한 속성

1) order

    <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>

이렇게 되어있다면, 1-2-3-4-5 순으로 되는 것이 맞다.
그런데 3을 앞으로 오게끔 하고 싶다면?
(그냥 눈에 보이는 순서에만 영향을 준다)

.item:nth-child(3){
  order : -1;
 }

로 설정해주면 가장 맨 앞으로 오게된다.
(나머지 1,2,4,5의 order가 0이기 때문에!)
만약 order:1; 로 준다면 가장 뒤로 오게 된다.

2) flex-grow

남은 영역을 모두 사용하고 싶을 때

.container2{
  width: 400px;
  height: 400px;

  background-color: aqua;
  border:2px dotted black;
  
  display: flex;
  flex-wrap: wrap;
}

.item{
  width: 100px;
  height: 100px;

  background-color: coral;
  border: 2px solid dimgray;
}

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

3)flex-shrink

container 크기가 item의 크기보다 작을 때
flex-grow와 원리는 동일하지만 반대 개념이다.

flex-shrink 의 default는 1이다.
flex-shrink:0으로 설정하면 더이상 줄어들지 않겠다는 뜻이다.
만약 flex-shrink:2라면 0인 값보다 줄어들 때 더 빨리 줄어든다.
(크기가 클 수록 줄어들 때 빨리 줄어든다 ! ! )

4)flex-basis

shrink, grow 전 기본 값이다. (원래의 width 값)

만약, flex-basis를 이용하면 늘어나고 줄어드는 영역을 조절할 수 있다.

같은 grow값 주더라도 플렉스가 더 길어보이는건 기존에 가지고 있었던 영역차이가 있기 때문이다. 그 영역에서 남은 영역의 길이가 1만큼 늘어난 것은 동일하다. \

만약 가로 비율을 1:1:1로 맞추고 싶다면 주황색 부분을 동일하게 해줘야한다.
flex-basis:100px; 주황색 영역이 아예 100px로 맞춰진다.

혹은 flex-basis:0;으로 설정해주어도 된다.

- flex (shortcut)

default 값
flex-grow : 0
flex-shrink : 1
flex-basis : auto

flex 단축어는 default 값으로 바로 따라가지 않는다.
값이 하나일 때는 flex-grow로 인식한다.

flex : 1 ; 
flex-grow : 1;

두 개의 결과물이 차이가 존재한다.

flex 단축어에서 flex-basis가 0으로 조정되기 때문에 !!

4. 정렬

1) container - 주축을 기준으로 정렬

justify-content: flex-end
마치 오른쪽 정렬같아보이지만 주축의 방향 끝에 정렬되는 것이다.

justify-content 를 오른쪽 정렬, 왼쪽 정렬 이런식으로 외우는 것은 옳지 않다.

justify-content : center; : 주축을 기준으로 가운데 정렬
jsutify-content : space-between; : 알아서 동일한 간격으로 나눠준다.

(위 : space-between , 아래 : space-aroud )

2) Container - 어디에 위치 시킬지

한 줄에 대한 개념이다. (기준이 교차축)
align-items:flex-start :교차축의 맨 위에 붙는다.
align-items:flex-end : 교차축의 맨 아래에 붙는다.
align-items:center : 교차축의 가운데에 붙는다.
여러 줄에 대한 개념이다. (기준이 교차축)
space-between 과 space-around의 간격 사용이 가능하다. 여러축이기 때문에 !
align-content : flex-start;
align-content : flex-end;