AI
推荐
模板社区
专题
登录
免费注册
首页
思维导图
详情
flexbox弹性盒子布局
2023-11-29 14:03:33
0
举报
分享方式
使用 (￥5)
flexbox弹性盒子布局
内容运营
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
收藏
立即使用
数据图形-223
收藏
立即使用
基金组织架构图
收藏
立即使用
数据图形-263
收藏
立即使用
数据图形-219
Lady-M
职业：吉林大学
去主页
Collect
Get Started
弹性布局
Collect
Get Started
消息盒子-消息内容
Collect
Get Started
盒子升级
Collect
Get Started
CSS Flex 弹性布局
评论
0
条评论
下一页
图形选择
思维导图
主题
补充说明
AI生成
修改AI描述
去编辑
重新生成
提示
关闭后当前内容将不会保存，是否继续？
取消
确定
Document
