Flexbox 가이드

Flexbox 컨테이너 속성

.container {
  display: flex;
}

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

/*
row (default): left to right.
row-reverse: right to left.
column: top to bottom.
column-reverse: bottom to top.
*/

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

/*
nowrap (default): all flex items will be on one line
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
*/

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

/*
flex-start (default): items are packed toward the start of the flex-direction.

flex-end: items are packed toward the end of the flex-direction.

center: items are centered along the line.

space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line.

space-around: items are evenly distributed in the line with equal space around them. 

space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
*/

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

/*
stretch (default): stretch to fill the container.

flex-start: items are placed at the start of the cross axis.

flex-end: items are placed at the end of the cross axis.

center: items are centered in the cross-axis.

baseline: items are aligned such as their baselines align.
*/

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

/* similar to justify content */

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

/*
row-gap: explicitly controls the space between rows.

column-gap: explicitly controls the space between column.
*/