Flexbox guide

Flexbox, also known as Flexible Box Module, is one of two modern layout systems, as well as CSS Grid

Introduction

Flexbox, also known as Flexible Box Module, is one of two modern layout systems, as well as CSS Grid.

Compared with CSS Grid (two-dimensional), flexbox is aOne-dimensional layout model. It will control the layout based on rows or columns, but not at the same time.

The main goal of flexbox is to allow items to fill the entire space provided by their container, depending on certain rules you set.

Unless you need to support older browsers such as IE8 and IE9, Flexbox can make you forget to use

  • Table layout
  • Floating point
  • clearfix hacker
  • display: tableHacker

Let us enter flexbox and become its owner in a short time.

Browser support

At the time of writing (February 2018), it is supported by 97.66% of users, and all the most important browsers have implemented it over the years, so even older browsers (including IE10+) are applicable:

Browser support

Although we have to wait a few years for users to catch up with CSS Grid, Flexbox is an older technology that can be used immediately.

Enable Flexbox

Through settings, apply the flexbox layout to the container

display: flex;

or

display: inline-flex;

contentIn the containerWill use flexbox alignment.


Container characteristics

Some flexbox properties apply to the container, which sets the general rules for its items. they are

  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • flex-flow

Align rows or columns

The first attribute we seeflex-directionTo determine whether the container aligns its items into rows or columns:

  • flex-direction: rowPlace the project asrow, Along the text direction (from left to right in western countries)
  • flex-direction: row-reversePlace items likerowBut in the opposite direction
  • flex-direction: columnPut the project inpillar, Order from top to bottom
  • flex-direction: column-reversePut the items in a column, likecolumnBut in the opposite direction

Rows or columns

Vertical and horizontal alignment

By default, ifflex-directionYesrow, Starting from the top, ifflex-directionYescolumn.

Vertical and horizontal alignment

You can change this behavior in the following ways:justify-contentChange the horizontal alignment, andalign-itemsChange the vertical alignment.

Change horizontal alignment

justify-contentThere are 5 possible values:

  • flex-start: Align with the left side of the container.
  • flex-end: Align to the right side of the container.
  • center: Align the center of the container.
  • space-between: Display at equal intervals.
  • space-around: Display with equal spacing

Horizontal alignment

Change vertical alignment

align-itemsThere are 5 possible values:

  • flex-start: Align with the top of the container.
  • flex-end: Align with the bottom of the container.
  • center: Align the vertical center of the container.
  • baseline: Displayed at the baseline of the container.
  • stretch: Stretch the item to fit the container.

Vertical alignment

Notes onbaseline

baselineLooks similar toflex-startIn this example, because my box is too simple. check outThis CodepenThere is a more useful example, I started fromMartin Michálek. As you can see, the project dimensions are aligned.

wrap

By default, the items in the flexbox container are kept on one line, shrinking them to fit the container.

To force items to be spread across multiple lines, useflex-wrap: wrap. This will be based onflex-direction. useflex-wrap: wrap-reverseCancel this sequence.

A shorthand attribute calledflex-flowAllows you to specifyflex-directionwithflex-wrapIn one line, by addingflex-directionValue first, followed byflex-wrapValue, for example:flex-flow: row wrap.


Properties applicable to each individual item

From now on, we have seen the properties that can be applied to the container.

A single item can have a certain degree of independence and flexibility, and you can change its appearance using the following properties:

  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

Let us understand them in detail.

Use an order to move an item before/after another item

The items are sorted according to the order in which they are assigned. By default, every item has an order0The appearance of the HTML determines the final order.

You can override this property usingorderOn each individual project. This is a property you set on the project, not the container. You can make one item appear before all other items by setting a negative value.

Moving items before or after another one

Use align-self for vertical alignment

One item can be selectedOverwritecontaineralign-itemsSet up, usealign-self, Which has the same 5 possible valuesalign-items:

  • flex-start: Align with the top of the container.
  • flex-end: Align with the bottom of the container.
  • center: Align the vertical center of the container.
  • baseline: Displayed at the baseline of the container.
  • stretch: Stretch the item to fit the container.

Vertical alignment

Increase or decrease items as necessary

Flexible growth

The defaut for any item is 0.

If all items are defined as 1, and one item is defined as 2, the larger element will occupy the space of two "1" items.

Bending contraction

The defaut for any item is 1.

If all items are defined as 1, and one item is defined as 3, the larger elements will be reduced by 3 times and are the other items. If the available space is less, the occupied space will be reduced by 3 times.

Elastic foundation

If set toauto, It will determine its size according to the width or height of the product, and add extra space according to the size of the product.flex-growproperty.

If set to 0, no extra space will be added to the item when calculating the layout.

If you specify a pixel number value, it will use it as the length value (width or height depends on whether it is a row or column item)

Flexible

This attribute combines the above 3 attributes:

  • flex-grow
  • flex-shrink
  • flex-basis

And provides a shorthand syntax:flex: 0 1 auto

Download mine for freeCSS Manual


More CSS tutorials: