CSS的 display详解：flex、list-item、grid、none、inline、block、inline-block

1. block
   说明：将元素变为块级元素，独占一行，可以设置宽高、内外边距。
   示例：
   .block-element {
   display: block;
   width: 100px;
   height: 100px;
   background-color: blue;
   }

2. inline
   说明：使元素成为内联元素，与其他内联元素同行显示，宽度由内容决定，不可直接设置宽高。
   示例：
   .inline-element {
   display: inline;
   background-color: red;
   }

3. inline-block
   说明：结合了块级和内联的特性，允许设置宽高，同时保持内联显示，相邻元素可同行显示。
   示例：
   .inline-block-element {
   display: inline-block;
   width: 50px;
   height: 50px;
   background-color: green;
   }

4. none
   说明：隐藏元素，不占据页面上的任何空间。
   示例：
   .hidden-element {
   display: none;
   }

5. list-item
   说明：将元素显示为列表项，类似于

6. ，前后有换行，且可能带有标记（如项目符号）。
   示例：
   .list-item-element {
   display: list-item;
   list-style-type: square;
   }

7. flex
   说明：启用弹性盒子模型布局，让元素成为弹性容器，其子元素成为弹性项目。弹性布局，css3引入。为盒状模型提供极大的灵活性，易于实现水平和垂直居中。
   示例：
   .flex-container {
   display: flex;
   }
   .flex-item {
   flex: 1;
   background-color: yellow;
   }

8. grid
   说明：将元素设置为网格容器，允许子元素按照网格布局排列。栅格布局。可看作强大的二维网格结构。
   示例：
   .grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   }
   .grid-item {
   background-color: orange;
   }

Flex布局
流式布局、浮动布局、定位布局是最基础的三种布局方式，但CSS还提供其他布局方式，首先是Flex也是特别常用的布局方式。因为经常会遇到匀称对齐的布局要求，不管是flex还是grid都是为了对齐。

在display的inside属性中有一 flex 属性值，这便是弹性盒子，在设定好 display: flex; 后可以使用 flex 相关的属性

FlexBox是什么？
Flexible Box 模型是CSS提供的一种一维布局模型，其在空间分布、对齐能力上极为出色。之所以是一维布局因为只能处理一行或一列，还有另外一种Grid则是二维布局模型，可以同时处理行列

此外flex特别重要的一点是伸缩性，简单来说就是会根据不同的盒子大小来自动伸缩元素大小。

主轴与交叉轴
主轴通过 flex-direction 定义，是最基本的属性

flex-direction属性值 说明
row 默认，水平左到右
row-reverse 水平右到左
column 垂直上到下
column-reverse 垂直下到上
选择row则会是水平类似于inline的方式布局，column则是垂直类似于block的方式布局。若附带reverse则可以逆向排列。

所谓交叉轴则是指垂直于主轴的方向，交叉轴不再分有没有reverse因为不需要