Analysis of flex layout example in CSS
This article mainly introduces the relevant knowledge of "flex layout case Analysis in CSS". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this article "flex layout case Analysis in CSS" can help you solve the problem.
1. Browser flex compatibility statement
Dispaly:flex
Display:-webkit-flex
Display:-ms-flex
Display:-moz-flex
Display:-o-flex
Using flex.min.css, you can make mainstream mobile browsers compatible with flex, which is suitable for (jquery/zepto/angular framework)
Using data-flex.min.css, you can make mainstream mobile browsers compatible with flex, which is suitable for (reactjs framework)
2.flex meaning
Div declares display:flex, and the div becomes a flex container. All of its child elements are Flex projects.
Child elements cannot be used, float, vertical-align, clear attributes
3.flex attribute
Flex-direction
Flex-wrap
Flex-flow
Justify-content
Align-items
Align-content
A total of six attributes
The flex-direction element chooses whether the X-axis or Y-axis arrangement values contain row (default), row-reverse, column, column-reverse (row, reverse, column, reverse column)
Justify-content values starting from that location of the axis include flex-start (default left), flex-end, center, space-between, space-around (from the left side of the axis (start), from the end of the axis, from the middle, align at both ends, align in the middle)
The arrangement values of flex-wrap after filling one axis include nowrap (no line wrapping by default), wrap, wrap-reverse (no newline, newline, anti-conversion line).
The align-items property defines how the project is aligned on the cross axis
Align-items: flex-start | flex-end | center | baseline | stretch
The justify-content property defines the alignment of the project on the spindle.
Justify-content: flex-start | flex-end | center | space-between | space-around
Align-content: the attribute defines the alignment of multiple axes. If the project has only one axis, this property does not work.
Align-content: flex-start | flex-end | center | space-between | space-around | stretch
Vertical centering is often used in practice.
Flex-align
Flex-align:center
-ms-flex-align:center
-webkit-flex-items:center
-webkit-box-align:center
/ * Center vertically * /
/ * Old version syntax * /
-webkit-box-align: center
-moz-box-align: center; vertically and horizontally centered parent element repeatedly declares flow layout
/ * mixed version syntax * /
-ms-flex-align: center
/ * New version syntax * /
-webkit-align-items: center
Align-items: center
/ * horizontal center * /
/ * Old version syntax * /
-webkit-box-pack: center
-moz-box-pack: center; / * mixed version syntax * /
-ms-flex-pack: center; / * new version syntax * /
-webkit-justify-content: center
Justify-content: center
This is the end of the introduction to "flex layout example Analysis in CSS". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
