CSS 3 layout attributes flex and CSS 3 layout flex

Source: Internet
Author: User

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.

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.