CSS Layout Properties Flex

Source: Internet
Author: User

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-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
    • align-self  允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

CSS Layout Properties Flex

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.