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