flex

background

Flexbox Layout (flexible Box) 모듈은 layout에 대한 더 효율적인 방식을 제공한다. layout의 사이즈가 알려져있지 않고 dynamic (thus the word "flex")할 때 컨테이너 내부의 아이템 간에 space를 정렬하고 분배 한다.

flex layout 의 main idea는 컨테이너에게 available space의 best fill을 만들기 위해 items' width/height를 변경할 수 있는 능력을 준다 는 것이다. (대개 모든 종류의 display device와 screen size에게 적합하도록 함)

flex container는 available free space를 채우기 위해 아이템을 확장 시킨다. (or overflow를 막기위해 item을 shrink)

flexbox layout은 regular layout과 대조된다.

regular layout vertically-based인 block과 horizontally-based인 inline 으로 잘 작동하지만, large or complex application에선 regular layout은 유연성이 부족하다. (특히 orientation이 변경, 리사이징, 스트레칭, shirinking 등과 같은 상황 일 때)

Note : Flexbox layout은 application의 component, small-scale layout 에 적합하다. 반면에 Grid layout은 larger scale layout 때문에 만들어졌다.

Basic & Terminology

flexbox는 whole module이고 single property는 아니기 때문에, 그것은 set of properties 를 포함한다. 프로퍼티의 몇몇은 container에 세팅 컨테이너에서 세팅된다. (컨테이너는 parent element, known as "flex container") 반면에 flex item이라 불리는 children도 있다.

만약 regular layout이 block과 inline flow direction 기반이라면, flex layout은 "flex-flow direction" 기반이다.

기본적으로, 아이템은 main axis 혹은 cross axis를 따라 펼쳐진다. (main axis from main-start to main-end, cross axis from cross-start to cross-end)

properties for the Parent ( flex container )

display

flex container를 정의
inline or block
그것의 direct children의 flex context 를 허용한다.

  .container {
    display:flex;
  }

flex-direction

이것은 main-axis를 만든다. 따라서 direction of flex item을 정의하는 것은 flex container 안에 위치 해야 한다.
Flexbox는 single direction layout concept이다. (aside from optional wrapping)
flex item은 주로 horizontal rows or vertical column에서 놓인다.

  .container {
    flex-direction : row | row-reverse | column | column-reverse
  }

flex-wrap

기본적으로, flex item은 one line에 fit하려 할 것이다. 그것을 변경할 수 있고 아이템이 필요에 따라 wrap하도록 허용한다. Direction은 stacked in 한 new line direction을 결정하는 역할을 한다.

  .container {
    flex-wrap : nowrap | wrap | wrap-reverse;
  }

nowrap (default) : single-line / left to right in ltr; right to left rtl, 라인이 2개 이상 안됨(1줄)
wrap : multi-line / left to right in ltr; right to left in rtl

justify-content

main axis를 따라 alignment를 정의

extra free space를 분배

Properties for the children (flex item)

1 order

2 flex-grow

: 필요시 flex item이 grow할 수 있는 능력.

비율에 따라 제공하는 unitless value 허용
flex container 내부에 available space의 양을 나타낸다.

3 flex-shrink

: flex item이 필요하다면 감소할 수 있는 능력

Summary

flex css 프로퍼티는 이용가능한 공간을 채우는 dimension을 변경하기 위해 flex item의 ability를 명시하는 속성이다. Flex items는 flex grow factor로 공간을 비율로 이용할 수 있다. 혹은 over flow를 막기 위해 flex shrink factor를 사용할 수 있다.

화면 비율에 따라 layout이 바뀌는 레이아웃 via flex

Previousviewport_meta_tag Nextwebpack

Last updated 6 years ago

Was this helpful?