More flexible layout in CSS3

Flex is a flexible layout that controls the width, height, or remaining space of internal elements to accommodate different display devices and different screen sizes, while truly achieving an adaptive effect.

The flex layout is very different from the regular layout, although the general layout is good on the page, but for large and complex projects, where there is a lack of flexibility in direction changes, adaptive sizing, stretching and shrinking, Flex is best suited as an application component, a small-scale layout, and a grid layout for large-scale layouts.

Flex the entire module is not just a property, it involves a lot of things as well as a series of properties. A Flex container is set as the name of the Flex label, and the child node elements within the container are called flex items.

Flex can be referred to as the flex flow direction layout If the general layout is based on block and inline layouts

Let's take a look at the illustration below to explain the idea of the flex layout

We first look at the whole box, there are two elements in the box, we have not yet made flex definitions, and there is no other term to define the elements in the box.

Now we define the box as flex, and look at the two red-oriented lines,

Main-axis: Transverse is called spindle,

Cross axis: longitudinal relative to the spindle, called the crossover axis,

1, 22 sub-boxes: called as flex items.

Here we continue to look at the blue part of the main start,main end,cross Start,cross end is the beginning of the layout (spindle, cross axis) direction, the end position.

Main start: spindle layout start position

Main end: Spindle layout End Position

Cross start: Intersection axis layout start position

Cross end: Crossing axis layout End Position

Main Size:flex the size of the key on the spindle layout

The size of the cross Size:flex item on the crossing axis layout

Let's look at the main properties of the container and flex items, as well as their role.

Let's begin by understanding the relevant properties of the container and its role. In the following diagram, we define a flex container.

• Display

Display:flex/*inline-flex*/

Defines whether the container is flex layout, blocky or inline depending on property values, Flex is blocky, Inline-flex is inline

• Flex-direction

Establish the spindle and direction to define the placement of the flex item in the container. The Flex box is a single-direction layout mode. That is, the flex item is either horizontally or vertically oriented.

Flex-direction:row | Row-reverse | Column | Column-reverse;

Row: This is the default value, left-to-right layout
Row-reverse: Right-to-left layout
Column: From top to bottom
Column-reverse: From bottom to top

• Flex-wrap

From the figure is a way of streaming, by default the flex item is placed on one line as much as possible. Of course we can also change and set properties as needed.

Flex-wrap:nowrap | Wrap | Wrap-reverse;

NoWrap: Default value, single-line mode, left-to-right
Wrap: Multiline mode (line wrapping) from left to right
Wrap-reverse: MultiRow (line break) mode, from right to left.

• Flex-flow

Flex-flow: < ' flex-direction ' > | | < ' flex-wrap ' >

This property is a combination of flex-direction and flex-wrap, and the default value for the property is row nowrap

• Justify-content

Sets the flex item to align along the spindle. Controls the extra space between flex items.

Justify-content:flex-start | Flex-end | Center | Space-between | Space-around;

Flext-start: Default value, left justified
Flex-end: Right-justified
Center: Center
Space-between: Justify on both sides
Space-around: The flex item on both sides is equal to the edge of the container, but the distance between each item is twice times the edge distance, and the distance between each item is equal

• Align-items

Sets the alignment on the flex item intersection axis. Layout method relative to Justify-content

Align-items:flex-start | Flex-end | Center | Baseline | Stretch

Flex-start: Align the start position of the intersection axis
Flex-end: Aligning the end position of the intersection axis
Center: Align the middle position on the intersection axis
Baseline: Baseline alignment
Stretch: Default value, fills the entire container (but still follows Min-width/max-width)

• Align-content

Alignment with respect to the cross axis, similar to the alignment justify-content on the spindle. If there is only one item on the axis in the container, that property does not work.

Align-content:flex-start | Flex-end | Center | Space-between | Space-around | Stretch

Flex-start: Alignment based on intersection axis start position
Flex-end: Alignment based on intersection axis end position
Center: Center alignment based on cross axis
Space-between: Cross Axis justified
Space-around: The distance between each item is equal to the intersection axis
Stretch: Default value, item occupies full container cross axis

The properties in the main container, and when we're done, we'll continue to look at the properties and functions of the flex item.

• Order

Order: <integer>;

By default, flex items are laid out in order. Order controls the order in which flex items are in the container.

• Flex-grow

This property increases the capacity for each item, and its value accepts a non-unit numeric value as a scale. Specifies the amount of space to be occupied by an individual. If the Flex-grow value of all items is 1, they divide the remaining space (if any). If an item has a Flex-grow value of 2, the other value is 1, and an item with a value of 2 occupies more than the remaining space.

flex-grow:<number>; /* Default 0 */

The default value is 0, when the value is 0, the space for each item is the same (the original size). Property value, negative number is invalid.

• Flex-shrink

Properties increase the ability to shrink for each item. Similar to Flex-grow, property values, negative numbers are not valid

Flex-shrink:; /* Default 1 */

• Flex-basis

Defines the default size of the element before allocating the remaining space. The value can be a length, such as 30%,5rem, and so on, or a keyword. Value auto, which looks like "width or height value auto"

Flex-basis: <length> | Auto /* Default Auto */

If set to 0, the extra space around the content is not considered inside. If the value is auto, the extra space is allocated based on the Flex-grow value.

• Flex

This is the combination of Flex-grow,flex-shrink and flex-basis. This second and third argument is an optional value. The default value is: 0 1 Auto

Flex:none | [< ' Flex-grow ' > < ' Flex-shrink ';? | | < ' flex-basis ' >]

It is recommended to use this merge notation.

• Align-self

Sets the layout position of the flex item in the container individually.

Align-self:auto | Flex-start | Flex-end | Center | Baseline | Stretch

Tip: Float,clear,vertical-align These properties will not affect the way flex items are laid out

This article belongs to Wu Shi Wei's blog, the public number: Bianchengderen original article, reproduced when please indicate the source and the corresponding link: http://www.wutongwei.com/front/infor_showone.tweb?id=145, You are welcome to spread and share.

More flexible layout in CSS3