flex的应用

2021-11-27 09:30:25 阅读：204 来源： 互联网

标签：flex items align content 应用 wrap justify

使用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;

标签：flex,items,align,content,应用,wrap,justify
来源： https://blog.csdn.net/Traceless_zero/article/details/121572557

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9