This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

Flex layout

.box{
      //display: flex;
      / / display: inline - flex; // Inline elements can also use Flex layout.
 
    /* Webkit-kernel browsers must be prefixed with -webkit. * /
      display: -webkit-flex; 
       display: flex;
    }
Copy the code

Note: With Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated.

The basic concept

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.”

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end.

By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

Container properties

The following six properties are set on the container.

  1. flex-direction 

Determine the orientation of the main axis (that is, the alignment of items)

Attribute values:

  • Row (default) : The main axis is horizontal and the starting point is on the left.
  • Row-reverse: The main axis is horizontal and the starting point is at the right end.
  • Column: The main axis is in the vertical direction, and the starting point is in the upper edge.
  • Column-reverse: the main axis is vertical and the starting point is at the bottom.
  1. flex-wrap

If an axis does not row, how to line feed.

Attribute values:

  • Nowrap (default) : no line breaks.
  • Wrap: The first line is at the top.
  • Wrap-reverse: newline with the first line at the bottom.
  1. flex-flow

Short form of the flex-direction and flex-wrap properties. The default value is row nowrap

  1. justify-content

    The context-content attribute defines the alignment of items on the main axis.

    Attribute values:

  • Flex-start (default) : left-aligned
  • Flex-end: right-aligned
  • Center: a center
  • Space-between: both ends are aligned with equal intervals between items.
  • Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
  1. align-items

Defines how items are aligned on the cross axis.

Attribute values:

  • Flex-start: Alignment of the starting point of the cross axes.
  • Flex-end: alignment of ends of crossed axes.
  • Center: Alignment of the midpoint of the cross axis.
  • Baseline: The baseline alignment of the first line of text of the project.
  • Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container.
  1. align-content

Defines the alignment of multiple axes. This property has no effect if the project has only one axis.

Attribute values:

  • Flex-start: align with the starting point of the cross axis.
  • Flex-end: aligns with the end of the cross axis.
  • Center: aligns with the midpoint of the intersecting axis.
  • Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.
  • Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
  • Stretch (default) : Axis takes up the entire cross axis.