CSS3 Layout Properties Flex

The HTML code is as follows:

<ulclass= "Ul_box">    <Li><ahref="#">Html</a></Li>    <Li><ahref="#">As1</a></Li>    <Li><ahref="#">Javascript</a></Li>    <Li><ahref="#">Html5</a></Li>    <Li><ahref="#">Css3</a></Li>    <Li><ahref="#">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 extended ratio of elastic child elements) * 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 Height property. * These three properties of the composite properties, written into 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。

CSS3 Layout Properties Flex