CSS 3 layout attributes flex and CSS 3 layout flex

CSS 3 layout attributes flex and CSS 3 layout 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 displays the object as an auto scaling box; flex-flow: compound attributes of flex-direction (determining the arrangement of elastic child elements) and flex-wrap (whether to wrap a line when the elastic child element exceeds the scope of the Elastic Element container) are 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 (set the scaling ratio of the auto child element) * flex-shrink (set the scale-in ratio of an Elastic sub-element) * flex-basis (specify the default size before auto-scaling, which is equivalent to the width and height attributes .) * The composite attributes of these three attributes are written into the sub-container. */flex: 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 six attributes are set on the container:

• In the flex-direction container, the items are arranged horizontally by default)
• Wrap mode in flex-wrap container
• The abbreviation of the above two attributes in flex-flow
• Justify-content item alignment on the spindle
• Align-how to align the items project on the cross axis
• Align-content defines the alignment of Multiple Axes. This attribute does not work if the project has only one axis.

Attributes of items in the container:

• The order of order items. The smaller the value, the higher the order is. The default value is 0.
• The scale-in ratio of the flex-grow project. The default value is0That is, if there is any remaining space, do not zoom in.
• The scale-down ratio of the flex-shrink project is 1 by default. That is, if the space is insufficient, the project is reduced.
• The main size occupied by the project before the flex-basis allocates extra space ). Based on this attribute, the browser calculates whether the spindle has extra space. Its default value isautoThat is, the original size of the project.
• Flex isflex-grow,flex-shrinkAndflex-basisThe default value is0 1 auto. The last two attributes are optional.
• Align-self allows a single project to have an alignment that is different from other projects and can be overwritten.align-itemsAttribute. The default value isautoThat inheritsalign-itemsAttribute. If no parent element exists, it is equivalentstretch.