本文主要是介绍CSS学习笔记(01)flex布局,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1、首先对父元素设置disiplay:felx, 其有6个属性
fex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
2、 justify-content 设置主轴上的子元素排列方式
3、align-items 设置侧轴上的子元素排列方式(单行)
4、align-content 设置侧轴上的子元素的排列方式(多行)
5、align-content 和 align-items 区别
align-items 适用于单行情况下,只有上对齐、下对齐、居中和拉伸
align-content适应于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找 align-items 多行找 align-content
6、flex-flow 属性是 flex-direction和flex-wrap 属性的复合属性
flex-flow:row wrap;相当于flex-direction:row和flex-wrap:wrap
参考:09-子项flex属性使用_哔哩哔哩_bilibili
这篇关于CSS学习笔记(01)flex布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!