css的flex布局我们以前介绍过,为了加深大家对它的认识,今天我们再来聊聊css的flex布局,flex弹性布局的原理,相当于在一个容器里面,可以指定容器内部元素的排列方式,比如排列顺序,对齐方式等。
其中具体属性有
flex container的样式
display:flex; 变为弹性盒模型 flex-direction:column/row/row-reverse/columu-reverse; 设置弹性盒中的排列方向
改变折行 flex-wrap:wrap/nowrap/wrap-reverse; //是否折行 wrap-reverse从下往上折行
主轴对齐方式 justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly; space-evenly平均的围绕 次轴对齐方式 align-items:center/flex-start/flex-end/stretch stretch拉倒最高
flex item 有哪些属性?
order:100 item的顺序
flex-grow:1 长胖
flex-shrink:0 默认是1,0防止变瘦 在空间不够的时候,控制元素缩的快慢
flex-basis:100px 控制基准宽度 默认是auto
align-self:flex-end 控制自己的排列方式
通过以上内容我们对css的flex布局有了更深的认识,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!