Using CSS3 Layout Properties Flex details

This article describes the use of CSS3 layout properties in flex detail

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 item arrangement. The smaller the number, the higher the alignment, and the default is 0. The magnification of the

• flex-grow project, which defaults to 0 , is not magnified if there is no space left. The

• Flex-shrink project is scaled down by default of 1, which means the project shrinks if there is not enough space.

• flex-basis the main spindle space (main size) that the project occupies before allocating extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto , which is the original size of the project.

• Flex is a shorthand for flex-grow , flex-shrink , and flex-basis , The default value is 0 1 auto . The latter two properties are optional.

• align-self allows individual items to be aligned differently from other items, overriding the Align-items property. The default value is Auto , which represents the Align-items property that inherits the parent element, and, if there is no parent element, is the same as stretch .