弹性盒:一种布局方式,特别适合移动端布局
效果1、默认让子元素横向排列
2、行内元素会转换成块元素
3、子盒子只有一个的时候利用 margin:auto,便可以实现垂直居中
弹性盒的主轴,侧轴 flex-direction: column /row/row-reverse/column-reverse
调整主轴对齐方式:
justify-content:
flex-start
flex-end
center
space-between:两端对齐
space-around:距离环绕
调整侧轴对齐方式:
align-items:
flex-start
flex-end
center
折行用法:flex-wrap:
控制折航后的间距问题:
order属性:可以改变子元素的排列顺序
剩余宽度:子盒子设置flex:1;可以占满剩余空间
css之弹性盒模型
最新推荐文章于 2024-06-14 09:42:20 发布