【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: flex;
	display: -webkit-flex; /* Safari */ /*Webkit内核的浏览器，需要加上-webkit前缀*/
}

注意：主轴和交叉轴是相对来说的。如果设置的主轴是row(横向)，那么交叉轴则为cross(纵向)；如果设置的主轴是cross(纵向)，那么交叉轴则为row(横向)

在这里插入图片描述

容器属性

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的宽度

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

最后某item渲染的宽度 = 某item的宽度 - 某item收缩的宽度

图中：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

某item收缩的宽度 = 150 * 6 / 1800 * 150 = 75
某item收缩的宽度 = 150 * 3 / 1800 * 150 = 37.5

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

在这里插入图片描述

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

.item{
	flex-basis:40%;  /*指定了在主轴方向上的初始大小，默认auto*/
}

表示分配剩余空间之前，指定项目占据主轴多少空间，如果不设置，则等于内容本身的空间。并不能保证能够按照flex-basis设置的大小展示，浏览器会根据flex-basis计算主轴是否有剩余空间。在Flex布局中flex-basis优先级是比width高的

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

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

.item{
	align-self: center;  /*只管自己单个项目的对齐方式（交叉轴）*/
}

auto：继承align-items属性值
flex-start：与交叉轴的开始对齐
flex-end：与交叉轴的结束对齐
center：交叉轴的居中对齐
baseline：与交叉轴基线对齐(若容器box没有设置align-items: baseline，在这里只对某一个item设置align-self: baseline，则无效果；可为2个或以上的item设置该属性，以最低的基线为基准参照，以达到效果)
stretch：在交叉轴方向上的拉伸

在这里插入图片描述