一、主轴对齐方式
属性名:justify-content
属性值 | 作用 |
---|---|
flex-start | 默认值, 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
重点: space-between
.box{
/* 弹性容器 */
width: 1200px;
height: 400px;
border: 5px solid pink;
margin: 0 auto;
display: flex;
/* 2边靠边中间距离自适应*/
justify-content: space-between;
}
/* 弹性盒子 */
.box div{
width: 300px;
height: 200px;
background-color: aqua;
}
二、侧轴对齐方式
属性名:align-items
属性值 | 作用 |
---|---|
flex-start | 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
常用 align-items:center配和 justify-content: center;让盒子水平和垂直居中
.father {
width: 500px;
height: 500px;
background-color: pink;
/* 设置为flex布局 */
display: flex;
/* 主轴水平居中 */
justify-content: center;
/* 侧轴垂直居中 */
align-items: center;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
}
三、设置主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
属性值 | 作用 |
---|---|
row | 行, 水平(默认值) |
column | 列, 垂直 |
row-reverse | 行, 从右向左 |
column-reverse | 列, 从下向上 |
常用:flex-direction:column;
修改完毕,主轴是Y轴, 侧轴是X轴。
四、多行侧轴对齐方式
属性值 | 作用 |
---|---|
flex-start | 默认值, 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
注意:
-
align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐
-
content 主轴 justify-content align-content 侧轴多行对齐
五、弹性盒子换行
特性: 给父亲添加了
display: flex;
所有的子盒子(弹性盒子)都会在一行显示,不会自动换行。
特别是多行的情况下,我们需要给弹性盒子换行,给 父盒子 弹性容器加。
语法:flex-wrap: wrap;
.box{
width: 900px;
height: 500px;
border: 5px solid #000;
margin: 0 auto;
/* 弹性容器 */
display: flex;
/* 弹性盒子换行 */
flex-wrap: wrap;
/* 两边边靠边中间距离自适应*/
justify-content: space-between;
}
.box div {
width: 200px;
height: 200px;
background-color: pink;
}