CSS - flex box

김형준 Kim Hyeong Jun·2021년 12월 4일
0

color tool 사이트
flex guide
MDN float
MDN flex

flex-box 미니게임

float

이미지와 텍스트들을 어떻게 배치를 할 건지 정의!


flex-box

container에 적용할 수 있는 속성값

  1. display
  2. flex-direction
  3. flex-wrap
  4. flex-flow
  5. justify-content
  6. align-items
  7. align-content

item에 적용할 수 있는 속성값

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex
  5. align-self

flex box에는 중심축과 반대축이 있다.
기본 값의 중심축은 수평축이고 반대축은 수직축이다.


container 속성값들

direction, wrap 그리고 flow

flex-direction : row, column
flex-wrap : nowrap, wrap ...

diretion과 wrap을 한번에 줄 수 있다.
어떻게??

flex-flow : column wrap;

위와 같이 표현이 가능하다.

justify-content / align-content

justify-content : 중심축을 기준으로 아이템들을 배치

alig-content : 반대축을 기준으로 아이템들을 배치

기본 값은 flex-start이다.

  • flex-start
  • flex-end
  • center
  • space-around : box를 둘러싸게 space를 넣어준다.
  • space-evenly : box간 간격이 동일하게 space를 넣어준다.
  • space-between : 왼쪽 끝과 오른쪽 끝은 화면에 맞게 배치하고 중간에만 컨텐츠들에만 간격을 준다.

align-items

반대축을 기준으로 아이템들을 배치

  • center
  • baseline : 텍스트가 균등하게 보여지도록 설정

item 속성값들

order

각 아이템의 순서를 설정해 줄 수 있다.

flex-grow

화면의 늘어날 때, 상자의 공간을 매꾸려고 한다.
기본값 0

flex-shrink

화면이 줄어들 때, 얼만큼 작아질지(?)에 대한 정의

flex-growflex-shrink는 컨테이너의 사이즈가 바뀔때, 얼마나 그리고 어떻게 줄어들고 늘어나야하는지에 대한 정의를 해준다.

flex-basis

아이템들이 공간을 얼마나 차지하여야 하는지 세부적으로 명시한다.
각 아이템마다 60%,30%,10% 처럼 설정할 수 있다.

align-self

아이템을 각각 정렬해줄 수 있다.

profile
I want be a developer🙂

0개의 댓글