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

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.

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.