【CSS】【flex布局】css中的flex布局详解

?博客参考自：https://css-tricks.com/snippets/css/a-guide-to-flexbox 这是个很优质的博客，网站也是个很优质的网站，英文好的同学，有精力可以自己去看下

?FlexLayout定义了【main axis】和【cross axis】两根轴，子元素排列的方向称为【main axis】，与主轴垂直的方向称为【cross axis】，FlexLayout可以灵活设置子元素在这两个方向上的大小，比例，对齐方式

?FlexLayout的外层容器元素叫做【flex container】，FlexLayout内部的子项元素叫做【flex item】 ?flex-direction：规定子项元素的排列方向，即【main axis】的走向 flex-direction有以下取值：row row-reverse column column-reverse ?flex-wrap：规定子项元素的换行方式 flex-wrap有以下取值：nowrap wrap wrap-reverse ?flex-flow：flex-direction和flex-wrap的简写属性 flex-flow: flex-direction flex-wrap

?justify-content：子项元素在【main axis】上的排列方式 justify-content有以下取值：flex-start flex-end center space-between space-around space-evenly ?align-content：子项元素在【cross axis】上的排列方式 align-content有以下取值：flex-start flex-end center space-between space-around stretch

?align-items：子项元素在【cross axis】上的对齐方式 align-items有以下取值：stretch flex-start flex-end center baseline ?order：子项元素在容器中的排列顺序，order相同按元素在文档中的位置排序 ?flex-grow：容器空间过大时，子元素分配剩余空间的比例 ?flex-shrink：容器空间不足时，子项元素空间缩小的比例

?flex-basis：子项元素所占初始空间大小

?flex：flex-grow，flex-shrink和flex-basis的简写 flex：flex-grow flex-shrink flex-basis 默认值为：0 1 auto

?align-self：子项元素覆写容器的align-items属性，采用自己的对齐方式

?容器元素设置了FlexLayout之后，其子项元素的float，clear和vertical-align等属性都将失效

?最后给出一个FlexLayout的实际Demo

    
        

            Header
            
                
Main This is a FlexLayout Demo  This is a FlexLayout Demo  This is a FlexLayout Demo  This is a FlexLayout Demo
            
            Aside-1
            Aside-2
            Footer
        
    

    
        * {
            padding: 0px;
            margin: 0px;
        }

        .container {
            display: flex;
            flex-flow: row wrap;
            font-weight: bold;
            text-align: center;
            margin: 20px;
        }

        .container > * {
            padding: 40px;
            flex: 1 100%;
        }

        .header {
            background: orange;
        }

        .footer {
            background: lightgreen;
            order: 4;
        }

        .main {
            text-align: left;
            background: deepskyblue;
            order: 2;
            flex: 3 0px;
        }

        .aside-1 {
            background: gold;
            order: 1;
            flex: 1 0 0;
        }

        .aside-2 {
            background: hotpink;
            order: 3;
            flex: 1 0 0;
        }