[CSS] Flexbox

Flexbox is the commonly-used name for the CSS flexible box layout model.

Flexbox displays a single dimension as a row or a column.

 

flex is a new value added to the CSS display property. Along with inline-flex it causes the elements that it applies to become a flex container, and the element's children to each become a flex item.

 

I will explain the flexbox through the example.

This is a default code. Let's start with this.

<div class="container">
  <div class="box red">1</div>
  <div class="box green">2</div>
  <div class="box blue">3</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  border: 3px solid black;
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  font-size: 50px;
  text-align: center;
  line-height: 100px;
}

.red {
  background-color: tomato;
}

.green {
  background-color: teal;
}

.blue {
  background-color: steelblue;
}

Axis

The flexbox layout has two axes main axis and cross axis. It depends on the direction of the flexbox layout.

If the direction is a row, the main axis is a horizontal axis and a cross axis is a vertical axis.

If the direction is a column, the main axis is a vertical axis and a cross axis is a horizontal axis.

Direction

The flex-direction property sets the direction of flex items.

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

Alignment

This alignment depends on the direction. If the direction is row, main-axis is horizontal and if the direction is column, main-axis is vertical.

 

The justify-content property defines how to align flex items along the main-axis of the flex container.

.container {
  ...
  flex-direction: row;
  justify-content: flex-start / center / flex-end;
}

.container {
  ...
  flex-direction: row;
  justify-content: space-around / space-between / space-evenly:
}

The align-items property defines how to align flex items along the cross-axis of the flex container. This property sets the align-self value on all direct children as a group as well.

.container {
  ...
  flex-direction: row;
  align-items: flex-start / center / flex-end;
}

The align-content property sets the distribution of space between and around content items along a cross-axis.

 

The align-self property overrides a flex item's align-items value, and it aligns along the cross axis.

.red {
  ...
  align-self: flex-start;
}

.green {
  ...
  align-self: center;
}

.blue {
  ...
  align-self: flex-end;
}

Wrap

The flex-wrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.

.container {
  ...
  width: 200px;  
  flex-wrap: nowrap / wrap / wrap-reverse;
}

Scale

The flex-grow property sets the flex grow factor of a flex item main size. This property specifies how much of the remaining space in the flex container should be assigned to the item.

.red {
  ...
  flex-grow: 1;
}

.green {
  ...
  flex-grow: 2;
}

.blue {
  ...
  flex-grow: 3;
}

The flex-shrink property sets the flex shrink factor of a flex item.

.container {
  ...
  width: 200px;
}

.red {
  ...
  flex-shrink: 1;
}

.green {
  ...
  flex-shrink: 2;
}

.blue {
  ...
  flex-shrink: 3;
}

The flex-basis property sets the initial main size of a flex item.

※ In case both flex-basis and width are set for an element, flex-basis has priority.

.box {
  ...
  /* width: 100px */
}

.red {
  ...
  flex-basis: auto;
}

.green {
  ...
  flex-basis: content;
}

.blue {
  ...
  flex-basis: 100px;
}

Order

The order property sets the order to layout an item in a flexbox. Items in a container are sorted by ascending order value and then by specified order.

The initial value is 0.

.red {
  ...
  order: 2;
}

.green {
  ...
  order: 3;
}

.blue {
  ...
  order: 1;
}

Shorthand Property

The flex-flow property specifies the direction of a flex container, as well as its wrapping behavior.

flex-flow: <flex-direction> <flex-wrap>

/* Example */
.container {
  flex-flow: column wrap;
}

 

The flex property sets how a flex item will grow or shrink to fit the space available in its flex container.

flex: <flex-grow> <flex-shrink> <flex-basis>

.container {
  flex: 3 3 10%;
  
  /* One value */
  flex: none / auto / initial;
  flex: 2;  /* Unitless value is flex-grow. ex) flex: <number> 1 0 */  
  flex: 10em;  /* Unit value is flex-basis */
  
  /* Two value: First value must be a flex-grow. */
  flex: 2 2;  /* Unitless value is flex-shrink */
  flex: 1 30px;  /* Unit value is flex-basis */
}