前端基础4

news2024/9/21 14:29:14

本节内容：

1.CSS的弹性布局，也称Flex布局
2.Vue2的生命周期

一、Flex布局

弹性布局是前端页面布局最常用的方式之一，通常使用四个属性。

1.创建盒子

先创建一个盒子并为其添加一些样式可以更直观的体验弹性布局，
代码如下：

页面如下：

2.四个属性

接下来介绍实现Flex布局的四个元素，如下：
display，flex-direction，justify-content，align-items

2.1 display

因为这里要创建因为这里要创建的是Flex布局所以display的值毋庸置疑flex; 即display:flex;
display还有其他布局方式如栅栏布局：display:grid;等

2.2 flex-direction

flex-direction是控制页面元素主轴的方向，也就是竖着排还是横着排。
默认值是row，你不写这个属性他也默认有这个属性并且属性值是row，
row的意思也就是横着排，从左到右，如图：

不知道有没有人注意这里span也有了宽高，span不是一个行内元素吗？

当 .box 设置为 display: flex; 时，它的子元素都会成为 flex 项目。
在 flex 布局中，即使是默认为行内元素的 <span> 也会表现得像块级元素一样，可以设置宽度和高度。这是Flex容器的影响。

然后是属性值row-reverse，学过数组的都知道reverse是反转的意思，所以他就是反转，又因为他是row的反转，所以也就是说他现在是从右到左的排列，如图：

这就是从右往左排列了，但是，这对吗？

答案肯定是不对的，因为他无论从左到右还是从右到左排列都是页面内元素从上到下加载的，
页面内元素顺序：

所以正确的页面显示结果是：

另外两个属性同理：column，是竖着排，从上到下，column-reverse就是竖着从下到上，如图

2.3 justify-content

justify-content的属性值就较多了，具体对齐方式与轴的方向有关。
下面默认主轴方向为从左到右，有5种，属性值如下：
1. flex-start(默认值):左对产

2. flex-end:右对产

注意：justify-content的控制是弹性的盒子里面已经排好序的元素的位置，不会影响盒子里面元素的位置。
3. center:居中

4. space-between:两端对齐，项目之间的间隔都相等。

5. space-around:每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。