flex 浅析

flex 布局

什么是flex

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

注意: 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴和垂直的交叉轴,项目默认沿主轴排列。

容器的属性

序号	属性	描述
1	flex-flow	主轴方向与换行方式
2	justify-content	项目在主轴上的对齐方式
3	align-items	项目在交叉轴上的对齐方式
4	align-content	项目在多行容器中的对齐方式

    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
        <div class="item">item10</div>
        <div class="item">item11</div>
        <div class="item">item12</div>
    </div>

        /* 单行容器 */
        .container {
            /* 主轴方向 */
            /* flex-direction: row; */
            /* 是否换行 */
            /* flex-wrap: nowrap; */
            /* 简写形式，以后采用这种写法第一个参数row或column 第二个参数 是否换行 wrap 或者 nowrap */
            flex-flow:row nowrap;
        }
        /* 多行容器 */
        .container {
            flex-flow:row wrap;
        }
        .container {
            flex-flow: column wrap;
        }

弹性项目在单行容器的对齐方式起效果要有一个前提条件，需要有剩余空间
空间分配有两种方案：

        .container {
            /* 默认属性 可以不写 */
            /* flex-flow: row nowrap; */
            /*1. 将所有项目视为一个整体，在项目组两边进行分配 */
            /* 从左右向右沿着开始位置 */
            justify-content: flex-start;
            /* 从右向左 从结束位置 */
            justify-content: flex-end;
            /* 居中对齐 */
            justify-content: center;
            /* 2. 将项目视为一个个独立的个体，在项目之间进行分配 */
            /* 两端对齐 项目首尾顶住两边，中间项目的间距平均分配剩余空间*/
            justify-content: space-between;
            /* 分散对齐 剩余空间在每个项目的间距平均分配*/
            justify-content: space-around;
            /* 平均对齐 所有项目的间距平均分配剩余空间 */
            justify-content: space-evenly;
        }
        /* 交叉轴上的对齐方式 */
        .container {
            /* 默认属性（等高列） 拉伸，可以不写 */
            align-items: stretch;
            /* 还可以设置从开始方向 */
            align-items: flex-start;
            /* 从底部开始 */
            align-items: flex-end;
            /* 居中对齐 */
            align-items: center;
        }
        /* 单行容器因为只有一行，所以交叉轴上没有剩余空间 */

弹性项目在多行容器的对齐方式起效果要有一个前提条件，需要有剩余空间
空间分配有两种方案：

        .container {
            flex-flow: row wrap;
            /* 将所有项目视为一个整体 */
            /* 拉伸 */
            align-content: stretch;
            /* 从开始位置 */
            align-content: flex-start;
            /* 从结束位置 */
            align-content: flex-end;
            /* 交叉轴方向有剩余空间所以有独立的对齐方案*/
            /* 两端对齐 相框或者多行菜单*/
            align-content: space-between;
            /* 分散对齐 */
            align-content: space-around;
            /* 平均对齐 */
            align-content:space-evenly;
         }
        /*容器属性总结：
        flex-flow:主轴方向与换行
        justify-content:项目在主轴上的对齐方式
        align-item:项目在交叉轴上的对齐方式
        align-content:项目在多行容器中交叉轴上的对齐方式 */

3. 项目属性

序号	属性	描述
1	flex	项目的缩放比例与基准宽度
3	align-self	单个项目在交叉轴上的对齐方式
4	order	项目在主轴上排列顺序

flex 属性：项目的缩放比例与基准宽度

        /* 项目属性flex */
        .container .item{
            /* flex: flex-grow flex-shrink flex-basis */
            /* flex: 放大因子  收缩因子 项目在主轴上的基准宽度 */
            /* 默认值：不放大 可收缩 */
            flex:0 1 auto;
            /* 等效 */
            /* flex:initial; */
            /* 允许放大缩小 */
            flex:1 1 auto;
            /* 等效 */
            /* flex:auto; */
            /* 禁止放大缩小 */
            flex: 0 0 auto;
            /* 等效 */
            /* flex:none; */
            /* 如果只写一个数字，表示放大因子 */
            flex:1;
            /* flex通常不会用来设置所有项目的默认选项，用来设置某一个项目 */
        }
        /* 要求第2个和第3个项目是第1个和第4个的两倍 */
        .container .item:nth-of-type(2),
        .container .item:nth-of-type(3){
            flex:2;
        }

align-self 属性： 单个项目在交叉轴上的对齐方式

        /* 设置第二个项目与其他项目的对齐方式不一样 */
        .container>.item:nth-of-type(2){
            align-self: stretch;
            align-self: flex-start;
            align-self: flex-end;
            align-self: center;
            /* 还支持定位 */
            position:relative;
            left:-2em;
            top:3em;
            /* 绝对定位也ok */
            position:absolute;
            left:2em;
            top:3em;
        }

order 属性： 项目在主轴上排列顺序

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container {
            /* 转为flex弹性布局元素 */
            display: flex;
            height: 15em;
            border: 1px solid #000;
            padding: 1em;
            margin: 1em;
            position:relative;
        }
        .container>.item {
            /* height: 5em; */
            width: 5em;
            background-color: skyblue;
            border: 1px solid #000;
        }
        /* 默认是按照书写顺序排列 */
        /* order越小越靠前 */
        .container .item:first-of-type{
            order:1;
            background-color: red;
        }
        .container .item:nth-last-of-type(2){
            order:2;
            background-color: yellow;
        }
        .container .item:nth-last-of-type(3){
            order:3;
            background-color: blue;
        }
        .container .item:last-of-type{
            order:-1;
            background-color: green;
        }
    </style>

总结

1. 任何元素都可以通过添加display:flex;属性 转为弹性盒子
2. 转为flex元素后，它的内部“子元素”就支持flex布局了
3. 使用了display:flex; 属性的元素称为：flex容器
4. flex 容器中的“子元素”称之为：flex项目
5. 容器中的项目自动转为“行内块元素”（不管之前是什么类型）