主轴方向
使用flex-direction改变元素排列方向
Flex布局模型中，弹性盒子默认沿着哪个方向排列？
l 答：水平方向。
l 思考：如何实现内容垂直排列？
垂直排列.png
需求：让文字在图片下方
flex-direction: column;
改变主轴方向为垂直方向 fd
把主轴方向变成了垂直方向，还是用jc控制主轴方向的对齐方式
把侧轴方向变成了水平方向，还是用ai控制侧轴方向的对齐方式
注意：主轴和侧轴仅仅只是调换了方向而已
现在水平方向是侧轴，需要居中aic
align-items: center;
现在垂直方向是主轴，需要均分空白空间jcsen
justify-content: space-evenly;
image.png
弹性盒子换行
l 思考：默认情况下，多个弹性盒子如何显示？
l 弹性盒子换行显示 : flex-wrap: wrap;
l 调整行对齐方式 ：align-content
Ø 取值与justify-content基本相同
VScode中快速填充文字
快速填充文字
1.从pxcook复制文字,粘贴到空白处
2.鼠标选中第一个换行出,长按鼠标左键
3.长按鼠标左键后拖动鼠标到第一行文字后面
4.松开鼠标左键后按ctrl+d,一直选中到最后一行文字
5.点击删除后即可删除换行
6.复制文字,按住alt+鼠标滚轮拖动,即可完成快速填充文字
例子如下:
个人中心
消息通知
个人信息
安全设置
地址管理
我的积分
我的足迹
邀请有礼
幸运抽奖
用伪元素划竖线
1.要用子绝父相;
2.高度给竖线的高度,宽度给0
3.选择左或右边框,边框粗细为竖线的宽度
伪元素画横线方法
1.要用子绝父相；
2.高度给0，宽度给横线的宽度
3.选择上或下边框，边框粗细为横线的高度
image.png
li标签上,用伪元素写出层级较高的折扣标签"
image.png
