First, Flex basic properties

Elements with a Flex layout are called Flex containers, or containers for short. All of its child elements automatically become container members and are called Flex items, or items for short. The document

// block level element. Box {display: flex; } // Inline element. Box {display: inline-flex; } // Webkit-kernel browsers must be prefixed with -webkit. box{display: -webkit-flex; /* Safari */ display: flex; }Copy the code

With Flex layout, the following attributes of child elements are invalidated:

  1. float
  2. clear
  3. vertical-align



The containerThere are two axes by default: horizontalMain AxisAnd the verticalCross axis.

Container properties

There are six properties on the container:

  1. flex-direction(Main axis) :row | row-reverse | column | column-reverse
  2. flex-wrap(newline) :nowrap| (not a newline)wrap(the first row at the top) |wrap-reverse(First line below)
  3. flex-flow(flex-directionandflex-wrapShort form) :row nowrap(Default value)
  4. justify-content(Alignment on spindle) :flex-start | flex-end | center | space-between | space-around
  5. align-items(How to align the cross axis) :flex-start | flex-end | center | baseline | stretch
  6. align-content(Alignment of multiple axes, only one axis, this property does not work) :flex-start | flex-end | center | space-between | space-around | stretch(The core is that the element inside the box must exceed the width of the box item (default).

3. Project attributes

There are six attributes on the project:

  1. order(The order of items. The smaller the value, the more advanced the order, default is 0) :<integer>
  2. flex-grow(Default is 0) :<number>
  3. flex-shrink(The scale of the project, default is 1, that is, if the space is insufficient, the project will shrink) :<number>
  4. flex-basis(The main axis space occupied by the project before allocating extra space) :<length> | auto
  5. flex(flex-grow.flex-shrink 和 flex-basisShort for, the default value is0 1 auto) :
  6. align-selfAllow a single item to have a different alignment than other items and be overriddenalign-itemsProperties. The default value isauto) :auto | flex-start | flex-end | center | baseline | stretch

Refer to the article

  1. Flex Layout Tutorial: Syntax section
  2. CSS Guidebook- Flexible layout
  3. Flex Flex layout
  4. Basics: Flex- Elastic layout is so easy!!
  5. Flex Layout Tutorial: Sample article
  6. Common CSS layouts (very comprehensive)

To look at

  1. Take a look at the beauty of flex layout with 48 illustrations