弹性布局总结

空空777

已于 2022-09-07 20:31:27 修改

阅读量149

点赞数

分类专栏： HTML个人笔记文章标签： css css3 html

于 2022-07-17 06:22:44 首次发布

本文链接：https://blog.csdn.net/m0_56595330/article/details/125827801

版权

HTML个人笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

十分钟学会弹性盒子：https://www.jianshu.com/p/f21b799d268a

flex布局的小教程：http://flexboxfroggy.com/

display: flex;
flex-wrap: wrap;     	 	换行
flex-wrap: wrap-reverse;	换行但是位置是反的

主轴方向&换行复合写法

flex-flow:row wrap;					主轴方向,弹性项目换行

主轴方向
flex-direction: row;				从左到右（默认）
flex-dirction: row-reverse;			从右到左
flex-direction: column;				从上到下
flex-direction: column-reverse;		从下到上

主轴方向 高度进阶
justify-content: flex-start;		左对齐
justify-content: flex-end;			右对齐
justify-content: center;			居中
justify-content: space-between;	两端对齐  
justify-content: space-around;	每个子元素间隔等分，两端留白
justify-content: space-evenly;	左右均匀分布

弹性项目交叉轴方向排布

align-items: strech			默认值没有高度会填满整个容器高度
align-items: flex-start		交叉轴的起点对齐（上面）
align-items: flex-end		交叉轴的终点对齐（底边）
align-items: center			交叉轴的中点对齐（子项中线中间）
align-items: baseline		第一行文字的基线对齐（很少用太丑）

<!-- 进阶会影响我，会失效 --!>
align-conten: stretch;		默认值。高度会分成几等分（弹性项目数量）
align-content: center;		所有子盒子会居中对齐
align-content: flex-start;	元素位于容器的开头
align-content: flex-end;		元素位于容器的结尾
align-content: space-between;	各行在弹性盒容器   平均分布
align-content: space-around;	各行在弹性盒容器平均分布，两端留白

弹性大小因子复合写法

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和

flex: 1	1 auto; 简写(flex: 1;)
flex: 0	0 auto;

flex-grow:2;		扩大分成两份
flex-shrink:2;		缩小成2份

flex-basis: 20px;	单个弹性项目设置尺寸

弹性项目的排布顺序

设置子盒子的排列顺序按照坐标系的方向，数值越大越靠近

横向，纵向都能设置，看坐标系的方向

有个小技术，两个子盒子互换位置，悬停加上这两个属性不就很轻松，不用设置平移距离定位

order: 1;

单个弹性项目的位置设置

align-self: auto; 		 默认
align-self: flex-start;	顶部对齐
align-self: flex-end;	底部对齐
align-self: center;		居中对齐
align-self: baseline;	文本基线对齐
align-self: stretch;		上下对齐并填满