菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王嘉乐-2022-10-25 前端 [打印本页]

作者: yousay！ 时间: 2022-10-26 00:07
标题: 王嘉乐-2022-10-25 前端
一、今日学习内容
Flex布局父项常见属性
flex-direction：设置主轴的方向
row-reverse：沿X轴从右到左进行排列
justify-content:设置主轴上的子元素的排列方式
space-between：先让两侧的盒子贴边，然后再平分剩余的空间
flex-wrap：设置子元素是否换行wrap：换行
align-items：设置侧轴上的子元素的排列方式（单行）stretch：拉伸
align-content:设置侧轴上的子元素的排列方式（多行）space-between：子项在侧轴先两侧贴边，然后再平分剩余空间
flex-flow复合属性是flex-direction和flex-wrap的复合属性
Flex布局子项常见属性
align-self: 控制子项自己在侧轴上的排列方式
flex来控制子项占的份数一个盒子可以同时是容器和项目（套娃）如果一个子项有自己的宽度高度，那么其他子项有flex:1; 就代表将剩余的部分进行平分。
align-items和align-content的区别：
1.align-items适用于单行情况下，只有上对齐，下对齐，居中和拉伸
2.align-content适用于多行的情况下（单行无效），可以设置上对齐、下对齐、居中、拉伸以及平分剩余等属性

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)