CSS Layout Properties Flex

The HTML code is as follows:

<ul class= "Ul_box" >    <li><a href= "#" >html</a></li>    <li><a href= "#" >css</a></li>    <li><a href= "#" >javascript</a></li>    <li>< A href= "#" >html5</a></li>    <li><a href= "#" >css3</a></li>    <li ><a href= "#" >jquery</a></li></ul>

The CSS code is as follows:

. ul_box{margin:0;    padding:0;    List-style:none;    /*display:flex the object as an elastic telescopic box;    Flex-flow:flex-direction (determines the arrangement of the elastic sub-elements) and flex-wrap (whether or not to wrap the flex element when it is outside the range of the elastic elements) of the composite property, written to the parent container;    */Display:flex; Flex-flow:row Wrap;}.    Ul_box li{Text-align:center;    height:40px;    line-height:40px; /*flex:flex-grow (Sets the expansion rate of the elastic child element) * Flex-shrink (sets the contraction ratio of the elastic child elements) * Flex-basis (Specifies the default size value before the flex child is scaled, equivalent to the width and he The Ight property. * The composite attributes of these three properties are written in the sub-container; */flex:1 1 100%;}.    Ul_box Li a{text-decoration:none; Color: #fff;}. Ul_box Li:nth-child (1) {background: #008000;}. Ul_box Li:nth-child (2) {background: #4169E1;}. Ul_box Li:nth-child (3) {background: #8A2BE2;}. Ul_box Li:nth-child (4) {background: #A52A2A;}. Ul_box Li:nth-child (5) {background: #FFA500;}. Ul_box Li:nth-child (6) {background: #9ACD32;}    @media (min-width:480px) {. Ul_box li{flex:1 1 50%;    }} @media (min-width:768px) {. ul_box{flex-flow:row nowrap; }}
 

The following 6 properties are set on a container:

• Flex-direction the arrangement of items within a container (default horizontal arrangement)
• Flex-wrap item wrapping method in container
• Flex-flow more than two properties of a shortcut
• Alignment of the Justify-content project on the spindle
• Align-items How the item is aligned on the cross axis
• Align-content defines the alignment of multiple axes. If the item has only one axis, this property does not work.

Properties of the item in the container:

• order　　项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow　　项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
• align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

CSS Layout Properties Flex