【css】flex属性记忆技巧和使用方法

一、Flex 布局是什么？

可以简单理解为弹性布局：

在box容器上：

display: flex;

 

行内元素也可以使用 Flex 布局。

display: inline-flex;

 

为了兼容Webkit 内核的浏览器，这样写更保险

display: -webkit-flex; /* Safari */

display: flex;

 

 

 

二、基本概念

(1)容器和项目

 

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器”。

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

flex有容器属性和项目属性，

我个人喜欢在容器内的项目里再设置inline-flex，这样就可以不记项目属性，只看容器属性就可以了

 

(2)主轴和交叉轴

 

 

主轴默认是横轴方向，

但是也可以设置：flex-direction:column，这样主轴就变成了纵轴方向

先确定主轴方向，然后记住：

justify-* 处理主轴方向的对齐方式   

align-*   处理交叉轴方向的对齐方式

而且justify-*、align-* 这些属性的参数，一般都有flex-start、flex-end、center

其余几个间隔的用的时候看一下吧

 

 

 

 

三、容器的属性

（1）flex-direction：决定主轴的方向，默认是水平，下边是参数

• row（默认值）：主轴在水平方向，起点在左端。

• row-reverse：主轴在水平方向，起点在右端。

• column：主轴在垂直方向，起点在上沿。

• column-reverse：主轴在垂直方向，起点在下沿。

（2）flex-wrap：项目是否换行，默认是不换行

• nowrap（默认）：不换行。

• wrap：换行，第一行在上方。

• wrap-reverse：换行，第一行在下方。

（3）flex-flow：上边两项的缩写，默认值是flex-flow:row nowrap;

（4）justify-content：项目在主轴上的对齐方式

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center： 居中

• space-between：两端对齐，项目之间的间隔都相等。

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

 

（5）align-items：项目在交叉轴上的对齐方式

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。

• baseline: 项目的第一行文字的基线对齐。也就是第一行文字的底部对齐

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 

（6）align-content：唯一一个对容器内容整体做的操作，在主轴上的内容位置

• flex-start：与交叉轴的起点对齐。

• flex-end：与交叉轴的终点对齐。

• center：与交叉轴的中点对齐。

• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

• stretch（默认值）：轴线占满整个交叉轴。

四、内部item的主要属性

首先flex属性是flex-grow，flex-shrink和flex-basis的缩写。

而这个flex属性的作用就是制定了每个人该如何分配到家产的规则。

• flex-grow就是家产剩余家产仍有富余的时候该如何分配。默认是0，就是不给
• flex-shrink就是家产剩余家产不足的时候该如何分配。默认是1，就是拿走
• flex-basis就是分配固定的家产数量。

/*  (1 1 auto) */
flex: auto;
/* （0 0 auto） */
flex: none;
/* 1个值，flex-grow 其他默认值*/
flex: 1;
/* 1个值，flex-basis 其他默认值 */
flex: 100px;
/* 2个值，flex-grow和flex-basis 其他默认值*/
flex: 1 100px;
/* 2个值，flex-grow和flex-shrink 其他默认值*/
flex: 1 1;
/* 3个值 */
flex: 1 1 100px;

如果外部容器class是wrap(display:flex)，wrap里边有left、right、center

圣杯布局：提倡的是中间圣杯，所以是中间自适应

         .left,.right{
             flex:0 0 150px;
             background-color: red
         }
 
        .center{
            flex: 1;
            background-color: yellow;
        } 

双飞翼布局：提倡的是两边翅膀，所以两边自适应

       .left,.right{
             flex:1;
             background-color: red
         }
        .center{
            flex: 0 0 100px;
            background-color: yellow;
        }

当然很多时候我们也会像上边那样，把网格分配好后，在网格内部使用display:inline-flex进一步布局的

    .wrap{

      display: flex;

      .left{

        flex:1;

        background: red;

        height: 100px;

      }

      .center{

        flex: 0 0 200px;

        background: green;

        height: 100px;

        display: inline-flex;

        justify-content: space-between;

      }

      .right{

        flex: 1;

        height: 100px;

        background: blue;

      }

    }

五、实现一个九宫格

template里边

 

 <div class="sudoku_row">

        <div class="sudoku_item" :class="curSelect==sudoku.id?'opacity':''   "v-for="(sudoku,index) in sudokus"  :key="index"  @click="start(index)”>

            <img :src="sudoku.img_src" width="40" height="40" >

            {{sudoku.name}}

        </div>

  </div>

逻辑操作：

        start:function(e){

            var that = this;

            var list = that.sudokus;

            for (var i = 0, len = list.length; i < len; ++i) {

                if (list[i].id == e) {

                    that.curSelect = i;

                    console.log("======" + that.curSelect);

                    that.curSelect= null;

                }

            }

     }

样式部分：

<style scoped>

//容器

.sudoku_row{

  display: flex;

  flex-wrap: wrap;//主轴默认水平方向，允许换行

  align-items: center;//交叉轴上项目居中

  width:100%;

 

}

//项目

.sudoku_item{

  display:inline-flex;

  flex-direction: column;//主轴垂直方向

  justify-content: center;//主轴方向居中显示

  align-items: center;//交叉轴方向也居中

  width:25%;

  padding-top: 10px;

  padding-bottom: 10px;

}

.opacity{

  opacity: 0.4;

  background: #e5e5e5;

}

.sudoku_item img{

  margin-bottom: 3px;

  display: block;

}

</style>