移动web第四天------Flex布局和实战演练

主轴方向

使用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

image.png