flex弹性布局知识回顾笔记

flex 学习笔记

flex 容器

display:flex;

把容器转换成弹性盒，兼容写法

    display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;     /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;  /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex;     

flex容器属性

1. flex-direction

    决定主轴的方向;
    取值：
    row （水平横向 左至右）
    row-reverse （水平反向 右支左）
    column  （垂直 上至下）
    column-reverse （垂直反向 下至上）

3. flex-wrap

    决定子元素是否换行
    取值：
     nowrap （不换行，子元素按比例分配宽/高） 
     wrap （正常换行 第一行在主轴起始方向）
     wrap-reverse（反向换行 第一行在主轴结束方向）;

4. flex-flow

    flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
    取值：
    由 flex-direction 和flex-wrap 的取值组合

5. justify-content

    决定了子元素在主轴上的对齐方式；
    取值：
    flex-start （靠近主轴起始方向显示）
    flex-end （靠近主轴结束方向显示）
    center （居中显示）
    space-between （把剩余宽度平均分配到各子元素之间的间隙，边上不留空白）
    space-around（把剩余宽度平均分配到各子元素之间的间隙，边上的空白部分宽度等于子元素之间间隙的一半）

6. align-items

    决定项目在副轴上如何对齐
    取值：
    flex-start （靠近副轴起始方向显示）
    flex-end （靠近副轴结束方向显示）
    center （居中显示）
    baseline （基线对其显示）
    stretch（占满整个容器的高度）

7. align-content

    同时设置主轴和副轴的对齐方式
    取值：
    flex-start | flex-end | center | space-between | space-around | stretch

flex元素属性

1. order

    定义元素的排列顺序。数值越小，排列越靠前，默认为0。

2. flex-grow

    定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

3. flex-shrink

    定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4. flex-basis

    定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5. flex

    flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
    ```

    
6. align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
```

实现简单的头部高度固定，底部高度自适应；底部左侧宽度固定，底部右侧宽度自适应

    <div class="container">
        <div class="item1"></div>
        <div class="item2">
            <div class="item3"></div>
            <div class="item4"></div>
        </div>
    </div>

.container{
    display:flex;
    flex-direction:column;
}
.item1{
    height:50px;
}
.item2{
    flex:1;
    display:flex;
}
.item3{
    width:200px;
}
.item4{
    flex:1;
}

流行的UI框架中的Container 布局容器都是使用flex布局实现的；在处理屏幕宽度自适应时非常方便