移动Web -09flex布局plus
一. 主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
.box {
/* 弹性容器 */
display: flex;
/* 主轴排列方向 默认是水平方向 */
/* 改变为垂直方向排列 使用最多 */
flex-direction: column;
/* 主轴居中 */
justify-content: center;
/* 侧轴居中 */
align-items: center;
/* 水平方向排列,默认值 */
/* flex-direction: row; */
/* 水平方向从右往左排列 */
/* flex-direction: row-reverse; */
/* 垂直方向从下往上排列 */
/* flex-direction: column-reverse; */
width: 400px;
height: 400px;
background-color: pink;
margin: 0 auto;
}
.box span {
/* 弹性盒子 */
width: 150px;
height: 150px;
background-color: aqua;
}
二. 背景图片二/三倍图的做法
到像素大厨/pxbook里面选择2X，利用background-size缩放背景图片
测量坐标即可
三.弹性盒子换行
弹性盒子换行显示 : flex-wrap: wrap;
/* 弹性容器 */
.box {
display: flex;
width: 1000px;
height: 600px;
background-color: pink;
list-style: none;
/* 解决方法:换行显示 */
/* 换行 */
flex-wrap: wrap;
/* 不换行 */
/* flex-wrap: nowrap; */
/* 方向换行 */
/* flex-wrap: wrap-reverse; */
}
/* 弹性盒子 默认在一行排列 不会换行显示 */
.box li {
width: 250px;
height: 200px;
background-color: red;
}
.box li:nth-child(2n) {
background-color: aquamarine;
}
四.flex多行侧轴排列方式
/* 弹性容器 */
.box {
display: flex;
width: 1000px;
height: 600px;
background-color: pink;
list-style: none;
/* 换行 */
flex-wrap: wrap;
/* 侧轴居中 多行(前提是flex布局换行)元素垂直排列 */
align-content: center;
/* 多行,从起点开始排列 */
/* align-content:flex-start; */
/* 多行,从终点开始排列 */
/* align-content:flex-end; */
/* 多行,盒子上下两边靠边 */
/* align-content:space-between; */
/* 多行,盒子上下1:2进行排列 */
/* align-content:space-around; */
/* 多行,盒子上下1:1进行排列 */
/* align-content:space-evenly; */
}
/* 弹性盒子 */
.box li {
width: 250px;
height: 200px;
background-color: red;
}
.box li:nth-child(2n) {
background-color: aquamarine;
}
