CSS3 Flexible box Flex layout model with responsive layout details

Page layout has always been the focus of Web application style design

Our traditional layout method is based on the box model
Using display, position, float to layout has some limitations
For example, to achieve adaptive vertical centering
With the popularity of responsive layouts, CSS3 introduces a more flexible and resilient layout model

Flex Flexible Layout

Use elastic layouts to efficiently allocate space for a container
Even if the size of our container elements changes
The elements inside it can also be resized to fit the space

If you want to make an element into a flexible box
Very simple

. demo {/* block-level element */    Display:flex;}

. demo {/* row-level element */    Display:inline-flex;}

When the flex layout is set, the float, clear, and vertical-align properties of the child elements are invalidated

Give me a little example.

<p class= "Flex-box" >    <p class= "Flex-item" >1</p>    <p class= "Flex-item" >2</p>    <p class= "Flex-item" >3</p></p>

. flex-box {    width:500px;    height:100px;    BORDER:1PX solid black;}. Flex-item {    width:100px;    height:100px;    font-size:80px;    line-height:100px;    Text-align:center;}. Flex-item:nth-child (1) {    background-color:lightseagreen;}. Flex-item:nth-child (2) {    background-color:violet;}. Flex-item:nth-child (3) {    background-color:cornflowerblue;}

Under normal circumstances, child element p occupies a full line by default, so they can only be arranged vertically

Now we use the elastic layout

. flex-box {    Display:flex;/* increment */    width:500px;    height:100px;    BORDER:1PX solid black;}

We find that child elements render row arrangements in the parent element
Looks like a child element has a floating float applied
But this attribute is far from being so simple
It's just getting Started (⊙▽⊙)

Related concepts

Before we talk about those properties, let's look at some basic concepts
The element that sets the flex layout, called the Flex container, or container
Its child elements, called "Flex Projects", referred to as " projects "
Here I introduce a picture (forgive my pirate diagram, I am too lazy to draw.) ）

There are two vertical axes in the container
The transverse is called the spindle
Longitudinal is called the cross axis
The left and right side of the spindle are called spindle starting point and spindle end
Cross-axis top and bottom are called cross-axis start and intersection end

"Project" also has two nouns
Width and height of each item is called spindle size and cross axis size

This time we can understand why child elements render row arrangements after using elastic layouts
The item is arranged along the main axis in the container.

Container Properties

The Elastic box Layout "Container" has the following properties

• flex-flow:flex-direction,flex-wrap

• Justify-content

• Align-items

• Align-content

Flex-direction

We can use Flex-direction to specify the direction of the spindle, thus changing the direction of the project
Property value:

• Row (default)

• Row-reverse

• Column

• Column-reverse

. flex-box {    Display:flex;    width:500px;    height:100px;    border:1px solid black;    Flex-direction:row-reverse; /* Increment */}

Other properties are not much explained, well understood

This image corresponds to Column-reverse, column, row, Row-reverse, respectively.

Flex-wrap

The items in our Flex box are arranged on one axis by default.
So if the project is more, it will be "elastic" compressed in one line
For example, I add a few more projects

I did not change the width of the project
However, because there are too many items in the flexible box, the project is compressed on the spindle

Now add the Flex-wrap property

. flex-box {    ...    Flex-wrap:wrap; /* Increment */}

Flex-wrap:wrap lets us specify whether or not to wrap the container when the item is "not fit"
The property values are as follows:

• No-wrap

• Wrap

• Wrap-reverse

We all understand the first two.
The third attribute value Wrap-reverse
Line items will be lined up like this.

Flex-flow

Flex-flow is a composite property of Flex-direction and Flex-wrap
Two attributes are required
It's not much to explain.

Justify-content

The Justify-content property defines how the item is aligned on the spindle
The property values are as follows:

• Flex-start: Left justified (default)

• Flex-end: Right-justified

• Center: Center

• Space-between: Justify on both ends (same between items)

• Space-around: Two-spaced alignment (the project interval is twice times the distance between the item and the border)

Flex-start:

Flex-end:

Center

Space-between:

Space-around:

Align-items

The Align-items property defines how the item is aligned on the intersection axis
The property values are as follows:

• Stretch: The height (or height:auto) of the item is not set to fill the entire container height (default)

• Flex-start: Intersection axis start alignment

• Flex-end: Cross-axis end-of-line alignment

• Center: Cross-Axis midpoint alignment

• Baseline: Baseline alignment of the first line of text in a project

Flex-start:

Flex-end:

Center

Baseline

Align-content

Align-content property defines the alignment of multiple axes
This property is valid only if there are multiple spindles in the container, and one spindle is invalid
Similar to the Justify-content property
The property values are as follows:

• Stretch: Axis fills the entire cross axis (default value)

• Flex-start: Align with the starting point of the intersection axis

• Flex-end: Aligns with the end of the intersection axis

• Center: Aligns with the midpoint of the intersection axis

• Space-between: Aligned at both ends of the intersection axis, with equal spacing between axes

• Space-around: The intervals between each axis are equal

Flex-start:

Flex-end:

Center

Space-between:

Space-around:

Project Properties

The Flex Box Layout "Project" has the following properties

• Order

• Flex:flex-grow,flex-shrink,flex-basis

• Align-self

Order

Order allows us to customize the order in which items are arranged
The default is 0, the value of the property is a number, the smaller the value, the higher the
Sort of like priority in our priority queue.

. Flex-item:nth-child (1) {    ...    order:99;}. Flex-item:nth-child (2) {    ...    Order:-1;}. Flex-item:nth-child (3) {    ...}

Flex-grow

Flex-grow defining the magnification of an item
The default is 0, that is, if the container does not fill the entire row, nor enlarge the project, just like the picture above

. Flex-item:nth-child (1) {    ...    Flex-grow:1; <--}.flex-item:nth-child (2) {    ...    Flex-grow:2; <--}.flex-item:nth-child (3) {    ...    Flex-grow:3; <--}

That's the equivalent of three projects that "cut" the rest of the space into 6 pieces.
Project one took 1 pieces, item two took 2 pieces, item three took 3 pieces

Flex-shrink

Flex-shrink define the scale of the project
The default is 1, that is, if there is not enough space, the project will be smaller than
With this property, we can control the scale of each project.

. Flex-item:nth-child (1) {    ...    Flex-shrink:1; <--}.flex-item:nth-child (2) {    ...    Flex-shrink:2; <--}.flex-item:nth-child (3) {    ...    Flex-shrink:3; <--}

So the scale of each project is 1:2:3
This ensures that the total width of all items is equal to the container width

Flex-basis

Flex-basis defines the spindle space that the project occupies before allocating extra space
Default auto, which is the original width of the project
We can set the length manually

. Flex-item:nth-child (1) {    ...    flex-basis:150px; <--}.flex-item:nth-child (2) {    ...}. Flex-item:nth-child (3) {    ...}

Flex

Flex is a composite property of Flex-grow, Flex-shrink, flex-basis
Default value: 0 1 auto, the latter two properties are optional
Keywords can be written: auto (1 1 Auto) and none (0 0 Auto)

Align-self

The Align-self property allows individual items to be aligned differently
Is the alignment property that overrides the Align-items setting
Default auto, inherits the Align-items property value of the elastic container
Attribute values in addition to auto, as with Align-items, there is no more explanation

• Auto

• Stretch

• Flex-start

• Flex-end

• Center

• Baseline

. flex-box {    ...    Align-items:center;}. Flex-item:nth-child (2) {    ...    Align-self:flex-end;}

All the properties of the elastic box.
Actually, these are the newest grammars.
Before that, the browser implementation is not consistent, to understand the better

• 2009 Canonical Syntax:
  display: box

• 2011 Unofficial Normative Grammar:
  display: flexbox

• Latest Version Specification Syntax:
  display: flex