Flexbox through the bumpy development of the road finally has a preliminary use of the embryonic, through the flexbox can control the unknown container element alignment, arrangement direction, order, or even the unknown size of the container. The main feature of the Flex container is the ability to modify the width or height of its child elements (Flex item) so that it fills the available space in different screen sizes.
Two graphs take a look at some of the basic parameters of Flexbox:
Compatibility:
Focus: How to use (the sample code does not write a browser-compatible prefix code)
First, parent attribute:
<!--basic DOM structure:-->
<body> <div class= "Flex-container" > <div class= "items" >1</div> <div class= "Items" >2</div> <div class= "items" >3</div> <!--omit several div--- </div> </body>
Display:flex | Inline-flex
/* Add the Display property to the parent: */.flex-container{ Display:flex;}. item {margin:5px; Background-color:orange; width:100px; height:100px;}Flex-direction:row | Row-reverse | Column | Column-reverse
/* Only show row-reverse properties, other self-*/.flex-container{ border:2px solid red; Display:flex; Flex-direction:row-reverse;} Flex-wrap:wrap | nowrap | Wrap-reverse default NoWrap
. flex-container{ border:2px solid red; Display:flex; Flex-wrap:wrap-reverse;}. flex-container{ border:2px solid red; Display:flex; Flex-wrap:wrap;}/* In this case, the element width will be reset */.flex-container{ border:2px solid red; Display:flex; Flex-wrap:nowrap;}Flex-flow:flex-direction Flex-wrap; Combines the above two properties
below says Justify-content:flex-start | Flex-end | Center | Space-between | Space-around;
Emphasize the following Space-around property values:
Align-items:stretch | Flex-start | Flex-end | Center | Baseline
The Flex-end property value can also look like this: it is fixed at the parent level, and the child element height is smaller than the parent
Align-content:flex-start | Flex-end | Center | Space-between | Space-around | Stretch
Emphasize the following Flex-end property value: This is a case of not filling a whole line
There is also the Stretch property, which occurs when the height of the child element is not fixed, and does not reset the height of the child element when it is fixed.
. flex-container{ border:2px solid red; Display:flex; Align-content:stretch; height:300px;}. items{ margin:5px; Background-color:orange; width:100px; /* height:100px; */}. flex-container{ border:2px solid red; Display:flex; Align-content:stretch; height:300px;}. items{ margin:5px; Background-color:orange; width:100px; height:100px;}Second, child element attributes
Order: <interger>; The larger the value, the higher the value, the default is 0.
Flex-grow: <number>; Default value is 0, negative number is invalid;
This attribute value is used to magnify the flex child element, which determines that the flex project zooms in relative to the Flex container's free space.
1. If the values of all flex projects are the flex-grow same, then the Flex project has the same dimensions in the Flex container.
2. The second flex project occupies more space than other flex projects.
This is the equivalent of dividing the parent into 1+3+1+1+1=7 parts, and the second block being 3 copies;
Flex-shrink: <number>; The default value is 0, the negative number is invalid;
property is used to specify the Flex project scale-down. Determines that the flex project will shrink automatically relative to other flex projects under insufficient flex container space;
By default, all flex projects can shrink, but if they are set to 0 , they will remain the same size if they are not scaled down.
Set to 0 does not shrink, the other is still contraction ah!
Flex-basis:auto | <width>; default Value Auto.
Specify the initial width of flex, because only the width will be reset!
Flex:none | Auto | [ <flex-grow> <flex-shrink>? | | <flex-basis>];
Comprehensive notation, default value 0 1 auto;
Align-self: Auto | flex-start | flex-end | center | baseline | stretch; default auto;
align-selfyou can use properties to specify the alignment of the Flex project itself or use align-items to specify a single flex project. Use align-items alignment to interpret flex containers to better understand their values.
align-selfWhen the value is value auto , the Flex project alignment is determined by its parent element align-items . If the value of its element is set to a stretch value or when there is no parent element, align-self auto then no alignment is said.
Third, Flex child element Invalid item
float, clear and vertical-align attribute applications on flex projects will be invalid and cannot be Out-of-flowNote:
Referenced from: http://caibaojian.com/flexbox-guide.html, http://www.w3cplus.com/css3/a-visual-guide-to-css3-flexbox-properties.html
Online test: Https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground
Flexbox parameter explanation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
