【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（默认值）：轴线占满整个交叉轴。

四、实现一个九宫格

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>