flex的应用

2023-10-22 16:25:16

使用flex居中对齐：

.warp{
	display: flex;
	justify-content: center;
	align-items: center;
}
复制代码

容器属性：

flex-direction:

display: flex;

1.主轴水平方向，起点在左端，默认值 flex-direction: row; 2.主轴水平方向，起点在右端 flex-direction: row-reverse; 3.主轴垂直方向，起点在上沿 flex-direction: column; 4.主轴垂直方向，起点在下沿 flex-direction: column-reverse;

flex: 1; /* 子项目占父容器的空间均为1，均分父容器元素的空间 */

flex-wrap:

属性定义的内容，如果一行排不下，如何换行 1.nowrap：不换行 flex-wrap: nowrap; 2.wrap:第一行在上方 flex-wrap: wrap; 3.wrap:第一行在下方 flex-wrap: wrap-reverse;

justify-content:

默认值是左对齐 justify-content: flex-start; 右对齐 justify-content: flex-end; 中间对齐 justify-content: center; 两端对齐，项目之间的间隔相等 justify-content: space-between; 每个项目的两端的间隔是相等的，项目之间的间隔比项目与边框的间隔大一倍 justify-content: space-around; 均匀排列每个元素,每个元素之间的间隔相等 justify-content: space-evenly;

align-item:

display: flex; 默认值:stretch align-items: stretch ; align-items: center; align-items: flex-start; align-items: baseline;

align-items: center; justify-content: center;

align-content:

display: flex; align-content属性:设置排列方向后,并且设置换行,这个属性才会起作用 flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around; align-content: stretch; 默认设置：会拉伸容器内每个项目所占的空间，填充方式为每个项目下方增加空白，第一个项目默认从容器的顶端开始排列

项目容器：

order:值小的排在前面（从左往右）

.item:first-child{
	order: 2;
}
.item:nth-child(2){
	order: 0;
}
.item:nth-child(3){
	order: 3;
}
.item:last-child{
	order: 1;
}
复制代码

flex-grow:

flex-grow: 1;

所有项目的flex-grow:;为1,将等分剩余空间,剩余空间的含义,去掉固定内容的之外的空间, 如果本身内容很多,比如我们这里第二个项目,虽然均分,但是还是会相比内容较少的项目占据比较大的空间

flex-shrink:

之前学习的容器属性flex-wrap,默认值不换行,项目宽度超过了容器的宽度的时候,项目会进行缩放

flex-shrink: 1; 默认情况下,所有的项目进行统一缩放,默认值为1

flex-shrink: 0; /* 不缩放 */

flex-shrink: 3; /* 严重缩放 */

flex-basis:

第一步:平分剩余空间(伸缩项目分配的剩余空间=容器的空间-所有项目内容的空间)

第二步:虽然内容少,想占多的地方,可以给他设置宽度 width: 150px; flex-basis设置. flex-basis:150px; flex-basis:40%; flex-basis:12rem; 伸缩项目分配的剩余空间=容器的空间-basis设置的空间（150px）

第三步:默认值auto flex-basis: auto;

第四步:flex-basis 是0的情况,设置为0.项目内容就不再占空间

align-self:

第一步: align-items: center;

第二步:第一个项目把自己的对齐方式设置为auto,表示继承父元素align-items属性 align-self: auto;

码农公寓