flexbox弹性盒子布局
2023-11-29 14:03:33 0 举报AI智能生成
flexbox弹性盒子布局
作者其他创作
大纲/内容
flex容器属性
主轴
主轴排列方向:flex-direction
取值
沿x方向row
沿y方向colum
主轴换行方式flex-wrap
取值
换行wrap
不换行nowrap
换行且倒序wrap-reverse
主轴方向的flex子项目布局方式justify-content
取值
以主轴开始处为布局起点flex-start
以主轴结束处为布局起点flex-end
对其主轴中点center
主轴上项目之间的间距相同space-between
所有项目左右沿着主轴两边空白间距相同space-around
副轴
副轴方向上不换行的项目布局方式align-items
取值
将一组项目在副轴上以起点处沿着主轴对齐flex-start
将一组项目在副轴上以起点处沿着副轴对齐flex-end
将一组项目在副轴上以副轴中点处沿着主轴对齐center
将一组项目在副轴上撑满strech
将一组项目在副轴沿着第一项的基线在主轴上对齐baseline
副轴方向上换行项目的布局方式align-content
取值
将一组项目在副轴上以起点处沿着主轴对齐flex-start
将一组项目在副轴上以起点处沿着副轴对齐flex-end
将一组项目在副轴上撑满strech
将一组项目在副轴上以副轴中点处沿着主轴对齐center
flex子项目属性
顺序order
拓展flex-grow
压缩flex-shrink
基础大小flex-basis
副轴上单个项目的布局方式align-self
flex-flow
flex
0 条评论
下一页
