[KUIT 3기 Web] 2주차(1) - CSS flex box, flex container, flex items

• display : flex;
  • 축이 하나인 것. 한 쪽 방향으로 배열할 수 있다.
  • flex 속성을 해당 element (flex container)에 주면, children elements (flex items)의 위치를 결정한다

flex box 자체를 flex-container라고 부른다.

flex container 안에 들어있는 element들을 items라 부른다.

flex box 용어들

• flex container에 주어야 하는 속성과, flex items에 주어야 하는 속성이 따로 있다.

flex container (parent)의 속성

• flex-direction : 축의 방향을 결정한다.

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

• flex-wrap

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

https://codepen.io/team/css-tricks/pen/bEajLE/1ea1ef35d942d0041b0467b4d39888d3

• justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• align-items : cross-axis (y축)을 따라 item들이 배치되는 방식 결정

.container {
    align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• align-content : flex-wrap이 설정된 여러 줄의 flex-container에만 적용된다.

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• gap, row-gap, column-gap : item 간의 간격을 직접 지정할 수 있다. flex, grid, multi-column layout 모두에서 작동한다.

.container {
    display: flex;
    ...
    gap: 10px;
    gap: 10px 20px; /* row-gap column gap */
    row-gap: 10px;
    column-gap: 20px;
}

flex items (children)의 속성

• order : 기본적으로 flex items 는 HTML 코드 순서대로 배치되지만, order 속성으로 순서를 따로 제어할 수 있다.

.item {
  order: 5; /* default is 0 */
}

• flex-grow : flex item이 얼마만큼의 비율로 공간을 차지할지 결정한다.
  • 자신의 flex-grow 숫자 / items flex-grow 총합 만큼의 비율을 차지한다.

.item {
  flex-grow: 4; /* default 0 */
  /* Negative numbers are invalid. */
}

• flex-shrink : 바깥으로 빠져나간 부분에 대해서 얼마만큼의 비율로 줄여줄지 결정한다.
• flex-basis : flex 아이템 기본 크기를 설정 ≠ width
  • width 속성과 flex-basis 속성이 함께 있을 때 조심하자!
  • .item { flex-basis: auto /* default */ or <width> }

• flex-grow, flex-shrink, flex-basis 속성 한 번에 주기

.item {
  flex: 0 1 auto /* default */
    or <flex-grow> <flex-shrink> <flex-basis>
    or <flex-grow>
    or <flex-basis>
    or <flex-grow> <flex-basis>
    or <flex-grow> <flex-shrink>
}
/* flex-grow, flex-shrink는 숫자만 적는 UNITLESS value
* flex-basis는 단위가 포함된 UNIT value */

• align-self : 개별 flex item한테만 align-items를 제정의할 수 있다.

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

참고자료

A Complete Guide to Flexbox | CSS-Tricks
Flexbox30 | SamanthaMing.com