一、今日学习内容
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适用于多行的情况下(单行无效),可以设置上对齐、下对齐、居中、拉伸以及平分剩余等属性
|