1222 flex容器与项目的常用属性实例演示

dom结构

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

基础样式

* {padding:0;margin:0;box-sizing:border-box;}
.container{
    display:flex;
    height:20em;
    border:1px solid red;
    padding:1em;
}
.container>div{
    width:5em;
    /*height:2em;*/
    background:black;
}

一 . felx容器属性

1. flex-flow ： 主轴方向以及项目换行方式

   • 主轴为水平方向 不允许换行 超出后项目会压缩（默认）

     .container{
        flex-flow:row nowrap;
     }

   • 主轴为水平方向 允许超出后换行

     .container{
        flex-flow:row wrap;
     }

   • 主轴为垂直方向 不允许换行 超出后项目会压缩

     .container{
        flex-flow:column nowrap;
     }

   • 主轴为垂直方向 允许超出后换行

     .container{
        flex-flow:column nowrap;
     }

2. justify-content : 项目在主轴上的对齐方式

   前提：在主轴上有剩余空间

   2-1 所有项目视为一个整体，在项目整体两边进行剩余空间的分配（3个）

   • 开始对齐

     .container{
        justify-content:flex-start;
     }

   • 末尾对齐

     .container{
        justify-content:flex-end;
     }

   • 居中对齐

     .container{
        justify-content:center;
     }

   2-2所有项目视为独立的个体，在项目之间进行分配

   • 两端对齐：首尾项目之间进行分配，即第一个和最后一个之间分配

     .container{
        justify-content:space-between;
     }

   • 分散对齐：在每个项目的两边平均分配

     .container{
        justify-content:space-around;
     }

   • 平均对齐：在每个项目之间平均分配

     .container{
        justify-content:space-evenly;
     }

3. align-items: 单行容器中项目在交叉轴上的对齐方式
   • 默认拉伸 ：填满整个空间（项目不能设置高度）

     .container{
        align-items:stretch;
     }

   • 开始对齐

     .container{
        align-items:flex-start;
     }

   • 末尾对齐

     .container{
        align-items:flex-end;
     }

   • 居中对齐

     .container{
        align-items:center;
     }

4. align-content: 项目在多行容器的交叉轴上的对齐方式

   • 默认拉伸 ：填满整个空间

     .container{
        align-content:stretch;
     }

   • 开始对齐

     .container{
        align-content:flex-start;
     }

   • 末尾对齐

     .container{
        align-content:flex-end;
     }

   • 居中对齐

     .container{
        align-content:center;
     }

   • 两端对齐：首尾项目之间进行分配，即第一个和最后一个之间分配

     .container{
        align-content:space-between;
     }

   • 分散对齐：在每个项目的两边平均分配

     .container{
        align-content:space-around;
     }

   • 平均对齐：在每个项目之间平均分配

     .container{
        align-content:space-evenly;
     }

二 . felx项目属性

1 flex ：设置某个项目是否放大缩小和 宽度（默认就是width）,通常用在某一个项 目上
格式： flex:flex-grow(放大因子) flex-shrink(缩小因子) flex-basis

    .container>.item:first-of-type{
        flex:1 1 auto;/*允许放大缩小*/
    }

只设置一个的时候，指的是设置放大因子，即上面写法简写为：

    .container>.item:first-of-type{
        flex:1;/*允许放大缩小*/
    }

例子：设置第2第3个是第一个的4倍

    .container>.item:first-of-type{
        flex:1;
    }
    .container>.item:nth-of-type(2),.container>.item:nth-of-type(3){
        flex:4;
    }

2 align-self ：设置某个项目在交叉轴上的对齐方式(stretch,flex-start,flex-end,center)
auto:默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。

 例子：设置第一个居中 第二个开始末端对齐

    .container>.item:first-of-type{
        align-self:center;
    }
    .container>.item:nth-of-type(2){
        align-self:flex-end;
    }

3 order 设置某项目在主轴上的排列排序，支持负数，数值越小越靠前，越大越靠后，默认值是 DOM中的 顺序

 .container>.item:first-of-type{
       order:5;
  }
 .container>.item:nth-last-of-type(2){
       order:-1;
 }
 .container>.item:nth-last-of-type(3){
       order:-2;
 }
 .container>.item:last-of-type{
       order:1;
 }