CSS Flex布局教程

CSS Flex 布局

是什么

Flexible Box
缩写
弹性布局
声明
块
.box { display: flex }
行块
.box { display: inline-flex }

基本概念

Flex 容器
定义
Flex 布局元素
轴
主轴（水平）
main start（开始）
main end（结束）
交叉轴（垂直）
cross start（开始）
cross end（结束）
Flex 项目
定义
Flex 布局
子元素
默认
轴
main size（主轴）
cross size（交叉轴）

容器属性

flex-direction（主轴方向）
row
row-reverse
column
column-reverse
flex-wrap（换行方式）
nowrap
wrap
wrap-reverse
flex-flow（简写）
justify-content（主轴对齐）
flex-start
flex-end
flex-end
space-between
space-around
align-items（交叉轴对齐）
flex-start
flex-end
center
baseline
stretch
align-content（多轴对齐）
flex-start
flex-end
center
space-between
space-around
stretch

项目属性

order（排列顺序）
flex-grow（放大比例）
flex-shrink（缩小比例）
flex-basis（占据空间）
默认值
auto
举例
300px
500px
flex（简写）
align-self
auto
flex-start
flex-end
center
baseline
stretch