【HTML】弹性盒子 (display: flex) 布局

Flex弹性布局

容器属性
- - flex-direction（主轴的方向）
  - flex-wrap（主轴的项目换行）
  - justify-content（项目在主轴上的对齐方式）
  - align-items（项目在交叉轴上的对齐方式）
  - align-content（项目在交叉轴上的多轴线对齐方式）
项目属性
- - order（排列顺序）
  - flex-grow（放大比例）
  - flex-shrink（缩小比例）
  - flex-basis（项目占据的主轴空间）
  - align-self（自己单个项目的交叉轴对齐方式）

弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位

.box{dispaly: flex; /*任何一个容器都可以指定为Flex布局*/
}
.box{display: inline-flex; /*行内元素也可以使用flex布局*/
}
.box{display: -webkit-flex; /* Safari */ /*Webkit内核的浏览器，需要加上-webkit前缀*/display: flex;
}

在这里插入图片描述

容器属性

flex-direction（主轴的方向）

.box{flex-direction: row;
}row：横向（默认，主轴为水平方向，起点在左端）
row-reverse：横向反向（主轴为水平方向，起点在右端）
column：纵向（主轴为垂直方向，起点在上沿）
column-reverse：纵向反向（主轴为垂直方向，起点在下沿）

在这里插入图片描述

flex-wrap（主轴的项目换行）

.box{flex-wrap: wrap;
}nowrap：不换行（默认，压缩宽度）
wrap：换行
wrap-reverse：换行反序

在这里插入图片描述

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

.box{justify-content: space-between;
}flex-start：默认靠（主轴的）开始对齐，
flex-end：靠（主轴的）结束对齐
center：（主轴）居中对齐
space-between：两端分散对齐（靠着容器内壁，剩余空间平分）
space-around：分散对齐（不靠容器内壁，剩余空间在每个项目两侧平均分配）
space-evenly：平均对齐（不靠容器内壁，剩余空间平分）

在这里插入图片描述

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

/*交叉轴(与主轴垂直的轴，针对的是每个item，当每个item高度不一致时才可看出效果) */
.box{align-items: stretch;
}flex-start：交叉轴的开始对齐（默认）
flex-end：交叉轴的结束对齐
center：交叉轴的居中对齐
baseline：项目的第一行文字的基线对齐
stretch：拉伸（默认，如果项目未设置高度或设为auto，它将自动拉伸占满。为了拉伸效果只为父元素设置高度）

在这里插入图片描述

align-content（项目在交叉轴上的多轴线对齐方式）

/*交叉轴（针对容器list的内容整体，多根轴线（多行或多列）的对齐方式，如果项目只有一根轴线，该属性不起作用）*/
.box{align-content: center;
}flex-start：交叉轴的开始对齐
flex-end：交叉轴的结束对齐
center：交叉轴的居中对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等
stretch：轴线占满整个交叉轴（默认值）

在这里插入图片描述

项目属性

order（排列顺序）

.item {order: 1; 
}
/*order默认值是0，值越小排序越靠前*/

在这里插入图片描述

flex-grow（放大比例）

.item{flex-grow: 1; 
}
/*
对容器中没有占满的剩余空间进行分配
默认0（原大小）；1（剩余的空间分为一份），设置该属性的item放大占据这一整份
也可以每个item均分、不均分（如果其它item也写了该属性那么它也要分一份或多份来占）
*/

在这里插入图片描述

flex-shrink（缩小比例）

.item{flex-shrink: 3;
}/*当容器主轴 "空间不足" 且 "禁止换行" 时, flex-shrink才有意义0（当前item不进行缩放，保持原有尺寸）；1（默认，同其它一样缩放）；n（需要计算）；负值对该属性无效*/

在这里插入图片描述

如何计算？

总权重TW = item1 * item1的shrink系数 + item2 * item2的shrink系数 + itemn * itemn的shrink系数

需要收缩的总宽度 = item1的宽度 + item2的宽度 + itemn的宽度 - box的宽度

此itemn收缩的宽度 = itemn的宽度 * itemn的shrink系数 / 总权重TW * 需要收缩的总宽度

最后itemn渲染的宽度 = itemn的宽度 - 此itemn收缩的宽度

(图中：box总宽度为600px，每个item的宽度为150px；从左往右的第1个item、第4个item分别设置flex-shrink: 6和flex-shrink: 3)

总权重TW = 150 * 6 + 150 * 1 + 150 * 1 + 150 * 3 + 150 * 1 = 1800

需要收缩的总宽度 = 750 - 600 = 150 px

此itemn收缩的宽度 = 150 * 6 / 1800 * 150 = 75
此itemn收缩的宽度 = 150 * 3 / 1800 * 150 = 37.5

最后渲染的宽度(第1个item) = 150 - 75 = 75px
最后渲染的宽度(第4个item) = 150 - 37.5 = 112.5px

在这里插入图片描述

flex-basis（项目占据的主轴空间）

.item{flex-basis:40%;  /*设置项目占据的主轴空间*/
}
/*
属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
当设置了flex-basis的值并且flex-shrink: 0； width的设置就不起作用了
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间
*/

align-self（自己单个项目的交叉轴对齐方式）

.item{align-self: center;  /*只管自己单个项目的对齐方式（交叉轴）*/
}auto：继承align-items属性值
flex-start：与交叉轴的开始对齐
flex-end：与交叉轴的结束对齐
center：与交叉轴的居中对齐
baseline：与交叉轴基线对齐(行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐)
stretch：在交叉轴方向上的拉伸
/*
属性允许单个项目有与其它项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素
的align-items属性，如果没有父元素，则等同于stretch。除了auto，其它都与align-items属性完全一致
*/

在这里插入图片描述