Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title> <style> /** Several properties of the parent flex-direction--property determines the direction of the spindle (horizontal or vertical) row | Row-reverse | Column | Column-reverse; flex-wrap-"line does not line up whether to wrap nowrap | Wrap (Wrap first line on top) | Wrap-reverse (the first line of the line is below); Flex-flow-"The collection of the above two attributes justify-content-" property defines the alignment of the item on the spindle (x-axis). Flex-start (left-aligned) | Flex-end (right-side alignment) | Center (center Alignment) | Space-between (each row of boxes close to the border boxes are spaced equally) | Space-around; (each row, left and right of each box) Align-items-property defines how the item is aligned on the intersection axis (Y axis). Flex-start (Top alignment Note: flex-wrap:column-reverse, bottom aligned) |------------------------flex-end (bottom-aligned) | Center | (center up and down) baseline (Text baseline alignment) | Stretch (the box height becomes the parent width, the set up dares to gamble except); Align-content-"attribute defines the alignment of multiple axes. If the item has only one axis, this property does not work. (For non-one x vertical alignment) Flex-start (top alignment) |Flex-end Bottom Alignment | Center Vertical Center | Space-between Vertical Center (top to bottom and low) | Space-around vertical alignment up and down spacing equal | Stretch; The axes occupy the entire cross axis. (the spacing below each line is equal to the top of the first row)*/ * {margin:0;padding:0;List-style:None; }. Wrap{width:100%;Height:800px;Background-color:#fcfccc; }ul{Display:Flex;Flex-flow:Row Wrap;justify-content:Space-around;Align-items:Baseline;Height:800px;align-content:Stretch; }Li{Flex-grow:1;margin:3px;Background-color:Red;text-align:Center;Min-width:300px;Max-width:500px; } </style></Head><Body><Divclass= "Wrap"> <ul> <Li>01</Li> <Li>01</Li> <Li>01</Li> <Li>01</Li><Li>01</Li> <Li>01</Li> <Li>01</Li> <Li>01</Li><Li>01</Li> <Li>01</Li> <Li>01</Li> <Li>01</Li> <Li>01</Li> <Li>01</Li> <Listyle= "height:100px;padding-top:30px">02</Li> <Li>03</Li> <!--<li>04</li> - <!--<li>05</li> - <!--<li>07</li> - </ul></Div></Body></HTML>
Note: When the parent Display:flew, the child has no display:flew-grow:1, the child size equals the box size-------the parent style takes effect
Properties for each childCSS display flew telescopic box model
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
