[CSS] Flex

phillip oh·2020년 5월 21일
0

My-Own-CSS-Wiki

목록 보기
2/3

1. Flex가 등장한 배경

  • 과거엔 Table 태그로 레이아웃을 잡았지만, 여러 모로 좋은 방법이 아니었음.
  • position은 지금도 많이 쓰이고 있고, 나쁘지 않은 방법임.
  • float은 배우기 어려움.
  • 이러한 상황에서 flex가 등장함.

2. 사용법

  • flex를 사용할 땐, 반드시 부모, 자식과 같은 두 단계의 태그가 필요함.
  • flex를 사용한다고 했을 때, 그 출발점은 부모 요소에 display : flex를 선언하는 것부터 시작이다.
<container>
	<item></item>
    <item></item>
</container>
  • container에 부여해야 하는 속성과 item에 부여해야 하는 속성이 따로 있다.
  • container에 부여해야 하는 속성
    • display
    • flex-direction
    • flex-wrap
    • felx-flow
    • justify-content
    • align-items
    • align-content
  • item에 부여해야 하는 속성
    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

3. Properties

3.1 Properties for the flex container

  • flex-direction
    • item들을 어떤 축을 기준으로 정렬할지 결정.
    • row(기본값), row-reverse, column, column-reverse
  • flex-wrap
    • 기본값은 nowrap이고 wrap으로 하면, container의 크기보다 item들의 크기의 합이 더 크다면, 줄바꿈이 됨.
  • align-items
    • container가 display:flex가 되는 순간, item들의 높이는 container와 같아진다.
      • 이유 : 왜냐하면, align-items의 기본값이 stretch이기 때문!
    • flex-start, flex-end, center, baseline, stretch(기본값)
  • justify-content
    • align-items가 수직이라면, justify-content는 수평 방향 정렬임.
    • flex-start, flex-end, space-between, center, space-around
  • align-content
    • align-items가 각각의 items를 정렬한다면, align-content는 그룹별 정렬을 해줌(?)
    • flex-start, flex-end, center, space-between, space-around, stretch

3.2 Propertyies for the flex item

  • align-self
    • align-items로 item들이 정렬된 상태에서 특정 item만 따로 정렬하고 싶을 때 사용.
    • auto, flex-start, flex-end, center, baseline, stretch
  • flex-basis
    • 크기를 지정
  • flex-grow
    • 부모 컨테이너의 flex-grow 속성의 값으로 1을 주면, 부모 컨테이너의 크기를 자식들이 균등하게 나눠가짐.
    • 만약 특정 자식 요소의 flex-grow를 부모 컨테이너에서 설정한 것보다 높게 설정하면, 해당 자식 요소만 크기가 달라짐.
  • flex-shrink
    • 윈도우 창을 줄이는 것에 따라 요소의 크기가 줄어들지 말지를 결정하고, 얼마나 줄어들지도 결정할 수 있음.
  • order

4. 참고문서

profile
모빌리티 스타트업에서 데이터를 다루고 있습니다.

0개의 댓글