导图社区 弹性布局
弹性布局思维导图,包括容器属性和项目属性两大分支。
JavaScript运算符思维导图笔记,分支内容包括:算术运算符、赋值运算符、逻辑运算符、关系运算符。
这是一篇关于H5表单控件的思维导图。
社区模板帮助中心,点此进入>>
安全教育的重要性
个人日常活动安排思维导图
西游记主要人物性格分析
17种头脑风暴法
如何令自己更快乐
头脑风暴法四个原则
思维导图
第二职业规划书
记一篇有颜又有料的笔记-by babe
伯赞学习技巧
弹性布局
容器属性
display:flex;
flex-direction(主轴方向)
row
行排列,起点在左端
row-reverse
行排列,起点在右端
column
列排,起点在上沿
column-reverse
列排,起点在下沿
flex-wrap(是否换行)
nowrap(默认不换行)
wrap
换行
wrap-reverse
换行后第一行在下边
flex-flow(以上两者简写)
flex-flow:direction wrap;(1.方向,2.换行)
justify-content(水平对齐方式)
start(起点对齐方式)
end(末尾对齐方式)
center(居中对齐方式)
space-between(两端对齐)
两端对齐后,每个项目间隔相等
space-around(等距对齐)
按比例划分间隔,每个项目的间隔是两端的一倍
align-items(垂直对齐方式)
center(垂直居中)
stretch(拉伸占满垂直高度)
flex-start(在上沿对齐)
flex-end(在下沿对齐)
baseline(项目中第一行文本对齐)
align-content(多交叉轴对齐方式)
不满多交叉轴不生效此属性
项目属性
order(排序)
数字值(int)
flex-grow(扩展比例)
flex-shrink(缩小比例)
flex-basis(检测伸缩基准值)
align-self(自身对齐方式)
按照上沿(flex-start)
按照下沿(flex-end)