I am an potato!.

3 minute read

출처 : 1분코딩

1분코딩을 보고 정리한 정리본입니다.

Flex와 Grid의 차이점

“Grid가 나온 이상, Flex는 구시대의 유물일 뿐이다.”

but! Flex가 더 편리한 경우도 있다.

또한 Flex는 표준 스펙을 지원하지만 Grid는 legacy버전만 지원하므로 그때그때 선택하여 사용하는 것이 적합하다.

기본적인 html구조

<div class="container">
  <div class="item">helloflex</div>
  <div class="item">abc</div>
  <div class="item">helloflex</div>
</div>

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다.

즉. “컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것” 이다.

Flex의 속성들은

  • 컨테이너에 적용하는 속성
  • 아이템에 적용하는 속성

의 두가지로 나뉜다.

Flex 컨테이너에 적용하는 속성들

display: flex;

한 줄의 CSS만으로 아이템들은 기본적으로 아래 그림과 같이 배치된다.

Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 되지요. 마치 inline 요소들 처럼

height는 컨테이너의 높이만큼 자동으로 늘어납니다.

block(기본) image
flex image

또한 inline-flex도 있다! (inline-box와 유사)

배치 방향 설정 flex-direction

.container {
  flex-direction: row;
  /* flex-direction: column; */
  /* flex-direction: row-reverse; */
  /* flex-direction: column-reverse; */
}

image

줄넘김 처리 설정 flex-wrap

.container {
  flex-wrap: nowrap;
  /* flex-wrap: wrap; */
  /* flex-wrap: wrap-reverse; */
}

image

  • nowrap : 줄바꿈 x, 넘치면 삐져나감
  • wrap : 줄바꿈을 한다.
  • wrap-reverse : 줄바꿈을 하는데, 아이템을 역순으로 배치

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성

flex-direction, flex-wrap의 순

.container {
  flex-flow: row wrap;
  /* 아래의 두 줄을 줄여 쓴 것 */
  /* flex-direction: row; */
  /* flex-wrap: wrap; */
}

메인축 방향 정렬 justify-content

.container {
  justify-content: flex-start; /*	아이템들을 시작점으로 정렬*/
  /* justify-content: flex-end;  		아이템들을 끝점으로  정렬*/
  /* justify-content: center; 		아이템들을 가운데로 정렬*/
  /* justify-content: space-between; 	아이템들의 “사이(between)”에 균일한 간격을 만들어 준다*/
  /* justify-content: space-around; 	아이템들의 “둘레(around)”에 균일한 간격을 만들어 준다*/
  /* justify-content: space-evenly; 	아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다*/
}

image

(+ justify-items 속성은 제안된 스펙은 존재하지만, 공식적으로 지원하지는 않는다. )

수직축 방향 정렬 align-items

.container {
  align-items: stretch; /*수직축 방향으로 끝까지 쭈욱 늘어납니다*/
  /* align-items: flex-start; 	아이템들을 시작점으로 정렬*/
  /* align-items: flex-end; 		아이템들을 끝으로 정렬*/
  /* align-items: center; 		아이템들을 가운데로 정렬*/
  /* align-items: baseline; 		아이템들을 텍스트 베이스라인 기준으로 정렬*/
}

justify-content: center; align-item: center; 를 해주면, 아이템을 이렇게↓ 한 가운데에 놓는 것도 매우 쉽습니다.image-20210722012807025

여러 행 정렬 align-content

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성입니다.

Flex 아이템에 적용하는 속성들

유연한 박스의 기본 영역 flex-basis

Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이)

-> 아이템의 기본 점유 크기를 설정한다고 생각 (최소 크기?)

.item {
  flex-basis: auto; /* 기본값 */
  /* flex-basis: 0; */
  /* flex-basis: 50%; */
  /* flex-basis: 300px; */
  /* flex-basis: 10rem; */
  /* flex-basis: content; */
}

유연하게 늘리기 flex-grow

아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성

flex-grow에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다.

기본값이 0이기 때문에, 따로 적용하기 전까지는 아이템이 늘어나지 않는다.

flex-grow에 들어가는 숫자의 의미

아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가지는 것

ex) 1:2:1의 비율로 세팅할 경우

image

유연하게 줄이기 flex-shrink

flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정

flex-shrink에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아진다.

기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수있다.

[활용]

-> flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있어요. 고정 크기는 width로 설정합니다.

ex)

.container {
  display: flex;
}
.item:nth-child(1) {
  flex-shrink: 0;
  width: 100px;
}
.item:nth-child(2) {
  flex-grow: 1;
}

image-20210722013821121컨테이너 폭을 250px으로 설정한 경우

Flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다.

수직축으로 아이템 정렬 align-self

align-items의 아이템 버전입니다. align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬입니다.

.item {
  align-self: auto;
  /* align-self: stretch; */
  /* align-self: flex-start; */
  /* align-self: flex-end; */
  /* align-self: center; */
  /* align-self: baseline; */
}

기본값은 auto로, 기본적으로 align-items 설정을 상속 받는다.

아래는 align-self 값을 BBB는 center, CCC는 flex-start로 설정한 예시

image

배치 순서 order

각 아이템들의 시각적 나열 순서를 결정하는 속성이예요. 숫자값이 들어가며, 작은 숫자일 수록 먼저 배치됩니다

z-index

z-index로 Z축 정렬을 할 수 있어요. 숫자가 클 수록 위로 올라옵니다.

끝!!

Grid도 정리해야된다!

https://studiomeal.com/archives/533

You may also enjoy