超详细解析前端flex布局

1、基本概念

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

2、容器的属性

以下6个属性设置在容器(父元素)中

1、flex-direction

2、flex-wrap

3、flex-flow

4、justify-content

5、align-items

6、align-content

2.1、flex-direction:设置主轴对齐方式

取值:row/row-reverse/column/column-reverse

2.1.1 row(默认值):主轴为水平方向,起点在左端

 .box {
            display: flex;
            flex-direction: row;
        }

在这里插入图片描述

2.1.2 row-reverse:主轴为水平方向,起点在右端

 .box {
            display: flex;
            flex-direction: row-reverse;
        }

在这里插入图片描述

2.1.3 column: 主轴为垂直方向,起点在顶端

 .box {
            display: flex;
            flex-direction: column;
        }

在这里插入图片描述

2.1.4 column-reverse:主轴为垂直方向,地点为底端

.box {
            display: flex;
            flex-direction: column-reverse;
        }

在这里插入图片描述

2.2、flex-wrap:默认内容在一条直线上,当位置不够时,如何排布

取值:/wrap/wrap-reverse/nowrap

2.2.1nowrap:不换行

.box {
            display: flex;
            flex-wrap: nowrap;
        }

在这里插入图片描述

2.2.2wrap:换行,第一行在上方

.box {
            display: flex;
            flex-wrap: nowrap;
        }

在这里插入图片描述

wrap-reverse:换行,第一行在下方

.box {
            display: flex;
            flex-wrap: wrap-reverse;
        }

在这里插入图片描述

2.3、flex-flow:flex-direction和flex-wrap的缩写

默认值:row nowrap

2.4、justify-content:定义内容在容器主轴上的对齐方式

取值:flex-start/flex-end/center/space-between/space-around

2.4.1 flex-start (默认):

在这里插入图片描述

2.4.2 flex-end:

在这里插入图片描述

2.4.3 center:

在这里插入图片描述

2.4.4 space-between:两端对齐,中间间距相等

在这里插入图片描述

2.4.5 space-around:每个项目两侧间隔相等

在这里插入图片描述

2.5、align-items:定义项目在交叉轴的对齐方式

取值:flex-start/flex-end/center/baseline/stretch

2.5.1 flex-start():顶端对齐

在这里插入图片描述

2.5.2 flex-end:底端对齐

在这里插入图片描述

2.5.3 center:中间对齐

在这里插入图片描述

2.5.4 base-line:第一行文字基线对齐

在这里插入图片描述

2.5.5 stretch(默认):如果项目没有设置高度或者设置auto时,简沾满整个容器

在这里插入图片描述

2.6、align-content:定义多根轴线对齐方式,只有一根轴线则该属性不起作用

取值:flex-start/flex-end/center/stretch/space-between/space-around

2.6.1 flex-start:交叉轴起点对齐

2.6.2 flex-end:交叉轴终点对齐

2.6.3 center:交叉轴中点对齐

2.6.4 space-between:与交叉轴两端对齐,中间间隔平均分布

2.6.5 space-around:每根检查轴两侧的间隔相等

2.6.6 stretch: 轴线沾满整个交叉轴(默认值)

img

3、项目的属性

3.1 order:定义项目的排列顺序 数值越小越靠前

在这里插入图片描述

3.2 flex-grow:

定义项目的放大比列,默认值为0(即使有空余空间也不放大)如果全部项目的flex-grow属性值为1,则平均分配善于空间,如果有一个值为2,其他值为1,则前者占据的空间比后者大一倍(倍数关系)

在这里插入图片描述

3.3 flex-shrink:

定义项目缩小比列,默认值为1,如果空间 不足,项目将缩小,如果有一个项目的flex-shrink值为0,当空间不足时,前者不缩小,其余缩小

在这里插入图片描述

(如图粉红色区域没有缩小)

3.4 flex-basis:

定义在分配多余空间之前,项目占据的主轴空间,默认值为auto,即本来项目的大小。它可以设置为和width或height属性一样的值(如350px),则项目占据该固定区域

3.5 flex:

flex-grow,flex-shrink和flex-basis的简写形式,默认值为0 1 auto(后两个值可选)

3.6 align-self :

3.4 flex-basis:

定义在分配多余空间之前,项目占据的主轴空间,默认值为auto,即本来项目的大小。它可以设置为和width或height属性一样的值(如350px),则项目占据该固定区域

3.5 flex:

flex-grow,flex-shrink和flex-basis的简写形式,默认值为0 1 auto(后两个值可选)

3.6 align-self :

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

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页