关于flex布局

1.对flex布局的介绍

！！！

！！！此些样式是在css样式所写（想自己试验的话记得要新建css专门写样式）

！！！

Flex 布局是一种新型的 CSS 布局模式，它主要用于弹性盒子布局。相比于传统的布局方式，它更加灵活，易于调整，也更加适应不同的设备和屏幕尺寸。它的特点有：

• 父容器设置了 display: flex 属性后，其子元素就可以变成弹性盒子，从而实现灵活的布局。

2.flex布局的基本概念

1. 容器（Container）：使用`display: flex;属性的元素称为容器。容器负责管理其内部的项目。

2. 项目（Item）：容器内的子元素称为项目。项目可以是文本、图片或其他HTML元素。

3. 主轴（Main Axis）和交叉轴（Cross Axis）：主轴是项目在容器内的排列方向，默认为水平方向。交叉轴是垂直于主轴的方向。 

4. 方向（Direction）：可以通过设置容器的`flex-direction`属性来改变主轴的方向，包括`row`（水平）、`row-reverse`（水平反转）、`column`（垂直）和`column-reverse`（垂直反转）。

5. 对齐（Alignment）：可以通过设置容器的`justify-content`属性来控制项目在主轴上的对齐方式，包括`flex-start`（起始对齐）、`flex-end`（结束对齐）、`center`（居中对齐）和`space-between`（两端对齐，空间均匀分布）。(后续效果不将继续展示可以自己试试以下展示的是justify-content：flex-end)

3.Flex布局的属性

以下是一些常用的Flex布局属性：

1. `display: flex;`：将元素设置为Flex容器。
2. `flex-direction: row | row-reverse | column | column-reverse;`：设置主轴的方向。
3. `justify-content: flex-start | flex-end | center | space-between | space-around;`：设置项目在主轴上的对齐方式。
4. `align-items: flex-start | flex-end | center | baseline | stretch;`：设置项目在交叉轴上的对齐方式。(后续效果不将继续展示可以自己试试以下展示的是align-items：flex-end)

5. `flex-wrap: nowrap | wrap | wrap-reverse;`：设置项目是否换行。