[CSS] How to use display:flex?

After reading this article, you will be able to create flexboxes using CSS display:flex .

Please read to the end!

What is flex (flexbox)?

You can create a flexbox by specifying display:flex.

Flexbox makes it easy to specify horizontal layouts that previously used floats and tables .

It is a very convenient technique because once you learn it, you can deal with various types of layouts.

Specifically, it is described as follows.

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;
}
.flex-item {
  border: 3px solid #ccc;
}

The parent element that makes up a flexbox is called a flex container, and the child elements are called flex items.

In the code above, the flex items of the child elements are lined up side by side. I added a border to make it easier to see.

Specify display:flex for the Flex container.

By adding the properties you will learn about, you can create a variety of horizontal alignments.

Also, flexbox is supported in the latest versions of most browsers.

It may be better to add a vendor prefix (-webkit-) to account for unsupported versions.

Let’s put this in the corner of the head as well.

Properties available for Flex containers

Introduces the properties used for the flex container, the parent element of flexbox.

flex-direction

flex-direction is a property that specifies the direction and order in which flex items are arranged .

The four values ​​are:

row and row-reverse arrange flex items side by side.

The default row goes from left to right, and row-reverse goes from right to left.

column and column-reverse are aligned vertically.

column is top to bottom, column-reverse is bottom to top.

.flex-container {
    display: flex;
    flex-direction: row-reverse;
}

In the code above, the elements are ordered from right to left.

Try setting the value to column and see how the order changes.

flex-wrap

flex-wrap is a property that specifies whether to allow line breaks in flex items .

It has three values:

The default nowrap does not wrap lines.

If the total width of all items in the nowrap state is larger than the width, it will be displayed outside the container.

Specifying wrap for this will cause the element to wrap to the next line if the width of the flex container is less than the sum of the widths of all the flex items.

wrap-reverse also wraps lines like wrap, but in reverse order.

flex-flow

By using flex-flow, flex-direction and flex-wrap can be specified together.

.flex-container {
  display: flex;
  flex-flow: row wrap-reverse;
}

justify-content

justify-content is a property that specifies how flex items are laid out relative to the direction of the main axis .

The following values ​​are mainly used.

flex-start aligns flex items to the beginning of the axis. flex-end moves to the end.

center will be displayed centered.

space-between and space-around are specifications to arrange evenly with an interval.

space-between means no space outside the items on both ends, space-around means half size space outside both ends.

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height:200px;
  border: 2px solid #ccc;
}

In the code above, the items are ordered top to bottom, with no gaps between the top and bottom of the head and tail.

The height and border are set for easy understanding.

align-items

align-items is a property that specifies how the items are aligned relative to the main axis and perpendicular .

The following values ​​are mainly used.

stretch stretches the flex item vertically to fit the flex container, eliminating gaps.

The flex-start is aligned vertically to the top, and the flex-end is aligned to the bottom.

center is centered and baseline is aligned with the bottom of the text in the flex item.

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 350px;
  height: 200px;
  border: 3px solid #ccc;
}

I added align-items: flex-end to the container where the flex items are arranged vertically.

With “flex-direction:column”, the flex items are aligned vertically, so align-items works horizontally and vertically.

This flex-end aligns flex items to the right.

align-content

align-content specifies the main axis and vertical alignment for multi-line flex items .

The following values ​​are mainly used.

stretch stretches the flex items vertically to fit the flex container, eliminating any gaps.

flex-start and flex-end align to the beginning and end of items, similar to align-items.

center will be placed closer to the center.

space-between and space-around change the vertical spacing between the first and last item, similar to justify-content.

.flex-container {
  display: flex;
  flex-wrap: warp;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
}

You need to specify flex-wrap:warp to allow line breaks in flex items.

In the above, items with line breaks are centered.

Properties available for flex items

Here are the properties that can be used for flex items.

You can also give individual flex items different designations.

order

order is a property that specifies the order in which flex items are arranged .

The initial value of order is 0, and you can place it first by specifying a negative number.

You can simply specify the order: 1 for the first item, 2 for the second item, 3 for the third item, and so on.

<div class="flex-container">
  <div class="flex-item1">1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3</div>
</div>

.flex-container {
  display: flex;
}
.flex-item2 {
  order: -1;
}

The above will place the second item first.

flex-grow

flex-grow is a property that specifies the growth rate of a flex item relative to other elements .

The initial value is 0.

<div class="flex-container">
  <div class="flex-item1">1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3</div>
</div>

.flex-container {
  display: flex;
}
.flex-item{
  border: 2px solid #ccc;
}
.flex-item1 {
  flex-grow: 1;
}
.flex-item2 {
  flex-grow: 2;
}

flex-grow does not determine the ratio between items, but specifies the ratio to distribute the extra space when flex-grow: 0.

When the original size differs depending on the number of characters in the item, even if a large number is specified for flex-grow, the size of the element may become larger with a smaller number.

flex-shrink

flex-shrink specifies the shrink factor of the flex item .

The initial value is 1. When the sum of all the flex item sizes is larger than the flex container, it shrinks according to the flex-shrink value to fit inside the container.

flex-basis

Specifies the size of the flex item .

The initial value is auto, and flex-basis takes precedence when both flex-basis and width are specified.

flex

By using flex, you can specify flex-grow, flex-shrink, and flex-basis together .

.flex-item {
  flex: 1 2 100px;
}

When writing two numbers without units, the order is flex-grow, then flex-shrink.

align-self

align-self overrides the align-items specification and specifies where to place flex items .

<div class="flex-container">
  <div class="flex-item1">1</div>
  <div class="flex-item2">2</div>
  <div class="flex-item3">3</div>
</div>

.flex-container {
  display: flex;
  height:300px;
  align-items: flex-end;
}
.flex-item2 {
  align-self: center;
}

The above code will align the flex items to the end, but only the second item will be overridden and centered.

Summary: Learn Flex Container and Flex Item Properties

This time, I explained how to create a flexbox using the CSS display:flex.

You mentioned that flexbox has flex containers and flex items, and the properties that can be specified for each are different .

In particular, the properties of the Flex container are often used, so let’s memorize them properly.

I hope that this article will be of help to you.