弹性布局

导航

弹性布局 flex
父级：弹性容器
子级：弹性盒子
主轴：默认水平
侧轴：默认垂直 (交叉轴)

子级自动挤压/拉伸
主轴：默认靠内容撑开
侧轴：默认拉伸

1
2
3
1
2
3
1
2
3

主轴对齐方式 justify-content
居左 flex-start
居右 flex-end
居中 center
之间 space-between
两侧 space-around
均分 space-evenly

1
2
3
1
2
3
1
2
3
1
2
3

侧轴对齐方式 align-items(全部) align-self(单独)
拉伸 stretch
居中 center
起点 flex-start
终点 flex-end

1
2
3

修改主轴方向 flex-direction
水平 row
垂直 column
反向 row-reverse
反向 column-reverse

1
2
3

应用：修改主轴，居中
flex-direction: column (主轴垂直，侧轴水平)
justify-content: center (主轴)
align-items: center; (侧轴)
1

弹性伸缩比 flex
flex-direction: column; (主轴垂直，侧轴水平)
.container5 div:nth-child(1) { width: 200px; }
.container5 div:nth-child(2) { flex: 1; background-color:aliceblue; }
.container5 div:nth-child(3) { flex: 2; background-color:lightcyan; }

1
2
3

弹性盒子换行 flex-wrap

行对齐方式 align-content