1 flex布局(弹性布局、伸缩布局)
/* 设置当前盒子为弹性盒子*/
display: flex;
/* 设置主轴方向的对齐方式:justify-content */
justify-content: center;
/* 设置侧轴方向的对齐方式:align-items */
align-items: center;
给父元素设置的相关属性
(1)主轴方向 flex-direction
取值 | 效果(主轴方向) |
row | 水平向右(默认) |
row-reverse | 水平向左 |
column | 垂直向下 |
column-reverse | 垂直向上 |
(2)主轴对齐方式 justify-content
取值 | 效果 |
flex-start | 向主轴开始方向对齐 |
flex-end | 向主轴结束方向对齐 |
center | 居中对齐 |
space-around | 让空白环绕盒子显示 |
space-between | 空白只在两者之间显示 |
space-evenly | 空白均分 |
(3)单行侧轴对齐方式 align-items
取值 | 效果 |
flex-start | 向侧轴开始方向对齐 |
flex-end | 向侧轴结束方向对齐 |
center | 居中对齐 |
stretch | 拉伸显示(默认值) |
(4)是否换行 flex-wrap
取值 | 效果 |
wrap | 换行 |
nowrap | 不换行(默认值) |
(5)多行侧轴对齐方式 align-content
取值 | 效果 |
flex-start | 向侧轴开始方向对齐 |
flex-end | 向侧轴结束方向对齐 |
center | 居中对齐 |
space-around | 让空白环绕盒子显示 |
space-between | 空白只在盒子之间显示 |
stretch | 子元素高度拉伸显示(只有没设高才有效果) |
2 给子元素设置的相关属性~
- 分配子元素空间 flex flex:份数;
- 子元素排序 order设置弹性盒子中子元素的排列顺序,数值越小,排列靠前,默认是0
- 单个子元素侧轴对齐方式 align-self
取值 | 效果 |
flex-start | 向侧轴开始方向对齐(默认相当于顶部对齐) |
flex-end | 向侧轴结束方向对齐(默认相当于底部对齐) |
center | 居中对齐 |
stretch | 子元素高度拉伸显示(只有没设高才有效果) |