Flex布局

 

1.Flex布局基础概念

Flex布局是什么?Flex布局是一种新的布局方案,它可以完整,简便,响应式的实现各种页面布局,虽然它相对于传统的盒模型来说更方便,对于一些特殊的样式(垂直水平居中,两遍固定中间自适应布局等)实现起来也比较方便,但是有一个很大的问题就是兼容性,对于IE浏览器来说仅能支持IE10以上的版本,现在移动端也已经支持Flex布局.

 Flex布局主要分为两个方面,一个是容器属性,一个就是项目属性

上面代码中ul元素就是一个容器,采用Flex布局时它会拥有一系列容器属性,而li元素就是项目了,它拥有的是项目属性;当一个容器开启Flex布局之后,它的所有子元素就会自动成为容器成员,称为Flex项目。

Flex容器默认有两根轴:水平的主轴(main axis)和垂直交叉轴(副轴 cross axis);主轴的开始位置(与左边边框的交叉点)叫做main start,结束位置(与右边框交叉点)叫main end;交叉轴的开始位置（与上边框）叫做cross start，结束位置（与下边框）叫做cross end。整体的我们可以辅助下图来加深理解.

 2.容器属性

解释完了Flex的基本概念,下面我们就来看看容器属性都有哪些,作用是什么,都怎么用

2.1：容器属性主要有以下几种

1. flex-direction：该属性的作用是决定主轴的方向的
2. flex-wrap：该属性的作用是设置子元素(项目)是否换行
3. flex-flow：该属性是flex-direction和flex-wrap的简写模式,默认值为row nowrap
4. justify-content：该属性可设置项目在主轴上的对齐方式
5. align-items：定义项目在侧轴上的对齐方式
6. align-content：定义项目在侧抽上的对齐方式

2.2：flex-direction

一般主轴的默认方向是从左至右,而这个属性就是改变主轴方向的属性,它有四个取值

1. row：这是默认值,从左到右
2. row-reserve：设置主轴方向为从右至左
3. column：设置主轴为垂直方向,起点在容器的上边框
4. column-reserve：设置主轴的方向为垂直方向,起点在容器的下边框

2.3：flex-wrap

该属性是用于控制容器中的项目(子元素)是否需要换行,有三个参数值

1.  nowrap：也是该属性的默认值,默认不换行
2. wrap：设置容器中项目换行,顺序为从左至右,从上到下
3. wrap-reserve：设置容器中项目换行,顺序为从下到上,从左至右

2.4：flex-flow

这个属性这里我们就不做过多说明了,它就是flex-direction和flex-wrap的简写属性

.box {
  flex-flow:  ;
}

2.5：justify-content

该属性用于设置项目在主轴上的排列方式,有5个取值

//html部分

    
1
    
2
    


//css部分
.box{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 500px;
    height: 400px;
    margin: 50px auto;
    border: 1px solid #000000;
  }
  li{
    width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    border: 1px solid red;
  }

• flex-start：顾名思义,它就是说是在主轴的开始位置开始布局，x效果图如下

• flex-end：与flex-start相反,这是从主轴的末端开始布局,如图

• center：个人理解是这样的：将所有项目的宽加起来, 再在每一行上将剩余空间平分到第一个项目的左边和最后一个盒子右边,效果如下

• space-between：这一属性 是将每一行的项目的第一个紧贴容器做边框,最后一个项目紧贴容器右边框,中间的自适应均分剩余空间

•  space-around：每一行上的项目均分主轴总大小

2.6：align-items

该属性用于定义项目在交叉轴(侧轴)上的对齐方式,有5个取值 

• flex-start和flex-end以及center我们都多说了,它和主轴上的效果是一样的,只是换到了垂直方向,只要记住侧轴的起点为容器上边框就行
•  baseline：基于项目的第一行文字对齐
• strech：这一属性就是在项目没有设置高度或为auto的时候,如果只有一行,那么项目的高度就会拉伸至填满整个侧轴,如果有多行时,所有项目的均分容器高度为自身高度;总的来说就是填满整个侧轴.

2.7：align-content

该属性也是用来设置项目在侧轴上的对齐方式的,但它是项目糅合成一个整体进行布局的,有六个取值

• flex-start
• flex-end
• center
• space-between
• space-around
• strech（默认值）

其中flex-start，flex-end，center，space-between，space-around的效果和justify-content的效果一致,换位思考一下就行了,strech值效果和align-items对多行时是一致的,有趣的是align-content和align-items之间的区别

 2.8：align-content和align-items之间的区别

1. align-content只对多行有效果,有一种特殊情况就是,当单行时,如果容器设置了flex-wrap：wrap时,它对单行也有效果
2. 由于它是将项目作为一个整体进行布局的,那么当容器没有足够高度时,也就是高度自动撑开或设为auto时,它是没有作用的;而由于align-items是对单个项目进行布局,无论任何情况它都能生效.

这一点大家有疑惑的话推荐大家阅读一篇博文：align-items和align-content的区别，写得非常通俗易懂

3.项目属性

项目属性是应用在项目上的.有6个属性

• oder
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

3.1：oder

该属性的作用是定义项目的顺序,值越小项目越靠前，需要注意的是该属性是将设置order值的项目在容器内的所有项目之间进行排序,并且如果值相同,那么初始位置在前面的项目就靠前排列

//html部分

    

        
1
        
2
        
3
        
4
        
5
        
6
    


//css部分
.item{
      order: -1
 }


//注意,这里我们就不复制全部代码了,只贴上对应的代码

3.2：flex-grow属性

概述是用于定义项目的放大比例的,默认为0，即不放大,即使是有空余空间的.它的值是数字,为1时,每行的项目会平分主轴空间(项目固定宽度时)，当项目不设宽度或者设为auto时，所有项目会排列在一个主轴上,依旧会·平分主轴空间，看起来这种效果和给容器设置justify-content为space-aroud时的效果基本一致；但是前者相对灵活些,我们可以单独为某一项目设置放大比例，让其占据的空间不同;但前提是要有足够的剩余空

html部分


        
1
        
2
        
    


css部分

.box li{
      /* flex: 1; */
      flex-grow: 1;
      width: 100px;
      height: 150px;
      border: 1px solid red;
  }
  .box .item{
      flex-grow: 2;
  }

 3.3：flex-shrink属性

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

需要注意的是:  如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

3.4：flex-basis属性

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

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

3.5：flex属性

该属性是flex-grow flex-shrink flex-basis的缩写形式，默认值为0 1 auto。后两个属性可选。一般在对项目布局的时候建议优先使用该属性,而不是单独写三个分离的属性，因为浏览器会推算相关值。(官方建议)

3.6：align-self属性

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

 

html部分


        
1
        
2
        
    

css部分

.box{
     display: flex;
     width: 500px;
     height: 400px;
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: center;
     border: 1px solid #ccc;
     margin: 50px auto
  }
  .box li{
      /* flex: 1; */
      flex-grow: 1;
      flex-shrink: 1;
      width: 150px;
      height: 150px;
      border: 1px solid red;
  }
  .box .item{
      flex-grow: 1;
      align-self: flex-start
  }

4： 总结

Flex部分的内容基本就这么多了,上文也是一些自己在学习过程中的理解,在柔和官方的一些说明进行介绍的,不过还是觉得最主要的是要多动手多练,文档，文章等应该是辅助工具,动手才是王道;另外本文中如有不对,不全,不严谨的地方欢迎指正,感激不尽!!!!!!