1、改变主轴方向为垂直方向：flex-direction
用法： flex-direction: column;
把主轴方向变成了垂直方向，还是用Jc控制主轴方向的对齐方式
把侧轴方向变成了水平方向，还是用ao控制侧轴方向的对齐方式
注意：主轴侧轴仅仅是对换方向而已
flex-direction运用
<style>
.box {
width: 150px;
height: 150px;
border: 5px solid rgb(48, 33, 33);
display: flex;
/* 改变主轴方向为垂直方向 */
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/media.png" alt="" />
新闻资讯
</div>
</body>
2、弹性盒子换行：flex-wrap
换行用法： 给父元素添加flex-wrap: wrap;
弹性盒子高度被换行的弹性盒子均等分
2、调整多行对齐方式：align-content（默认拉伸）
多行对齐方式用法： 给父元素添加align-content： 取值与justify-content一致
注意点：针对于多行弹性盒子的侧轴设置的，出现的前提条件，必须要先换行 flex-wrap: wrap;
align-items 针对于单行弹性盒子的侧轴对齐方式
伪元素画竖线方法
1.要用子绝父相；
2.高度给竖线的高度，宽度给0
3.选择左或右边框，边框粗细为竖线的宽度
伪元素画横线方法
1.要用子绝父相；
2.高度给0，宽度给横线的宽度
3.选择上或下边框，边框粗细为竖线的高度
练习：个人中心web页面
