Shulou(Shulou.com)06/01 Report--

This article mainly introduces the css Flex layout elements of what the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe you read this css Flex layout elements of which articles will have a harvest, let's take a look at it.

The flex layout is "flexible layout", and any element can be display:-webkit-flex by setting the css attribute display:flex;webkit kernel browser

Specifies that the element is a Flex layout.

Elements that are laid out in Flex are called "flexcontainer", and all its child elements are called Flex projects (flexitem)

Properties of the container

Flex-direction

Project orientation selection value: row (default: left to right) | row-reverse (right to left) | column (top to bottom) | column-reverse (bottom to top)

.box {

Flex-direction:row | row-reverse | column | column-reverse

}

Flex-wrap

Define whether the project should wrap. Value: nowrap (default: no line break) | wrap (line break, the first line is above) | reverse-wrap (line break, the first line is below)

.box {

Flex-wrap:nowrap | wrap | wrap-reverse

}

Flex-flow

Is an abbreviated form of flex-direction property and flex-wrap property, and the default value is rownowrap

.box {

Flex-flow: |

}

Justify-content

Defines the alignment of the project on the spindle. Select the value flex-start (default left alignment) | flex-end (right alignment) | center (center) | space-between (alignment at both ends) | space-around (each item is at equal interval)

.box {

Justify-content:flex-start | flex-end | center | space-between | space-around

}

Align-items

Defines how the project is aligned on the cross axis. Select the value flex-start (alignment of the start of the cross axis) | flex-end (alignment of the end of the cross axis) | center (alignment of the midpoint of the cross axis) | baseline (baseline alignment of the first line of text of the project) | stretch (the height of the project is not set or set to auto, which will occupy the height of the entire container)

.box {

Align-items:flex-start | flex-end | center | baseline | stretch

}

Align-content

Defines the alignment of multiple axes. If the project has only one axis, this property does not work.

.box {

Align-content:flex-start | flex-end | center | space-between | space-around | stretch

}

Properties of the project

Order

.item {

Order:

}

Flex-grow

.item {

Flex-grow:;/*default0*/

}

Flex-shrink

.item {

Flex-shrink:;/*default1*/

}

Flex-basis

.item {

Flex-basis: | auto;/*defaultauto*/

}

Flex

.item {

Flex:none | [? | |]

}

Align-self

.item {

Align-self:auto | flex-start | flex-end | center | baseline | stretch

}

This is the end of the article on "what are the elements of Flex layout in css?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the elements of Flex layout in css". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.