CSS display 和 Flexbox 解析

display属性值

• block

使元素成为块级元素（独占一行，可设置宽高）

• inline-block

使元素成为行内块级元素（不独占一行，可设置宽高）

• inline

使元素称为行内元素（不独占一行，设置宽高不生效）

为什么行内元素设置宽高不生效？

1. 内容决定尺寸：行内元素的尺寸是根据其内容自动调整的。例如，一个 <span> 元素的宽度是由其内部文本的长度决定的，而不是由 CSS 的 width 属性决定的。
2. 没有块级格式化上下文：行内元素不会创建一个新的块格式化上下文（Block Formatting Context, BFC），因此它们的行为与块级元素不同。块级元素会创建一个新的 BFC，并且可以设置宽度和高度。
3. 布局方式：行内元素在一行中与其他行内元素并排显示，它们的布局方式是基于文本流的，而不是基于固定的尺寸。

• none

隐藏元素，也不占用宽高

display: none;、visibility: hidden; 和 opacity: 0;都是隐藏元素有什么区别？

属性	display: none	visibility: hidden	opacity: 0
可见性	完全不可见	完全不可见	完全不可见
布局空间	不占空间	占空间	占空间
交互性（事件处理器是否会触发）	不可交互	不可交互	可交互
css层叠	最高优先级	中等优先级	最低优先级
适用场景	完全移除元素	隐藏元素但保留空间	隐藏元素并可交互

• flex

使元素成为一个弹性容器，其元素可以根据flex布局规则进行排列

• inline-flex

使元素成为一个内联弹性容器，与flex类似，但作为内联元素存在

• grid

使元素成为一个网格容器，其子元素将根据grid布局规则进行排列。

grid布局属性有哪些？

• inline-grid

使元素称为一个内联网格容器，与grid类似，但作为内联元素存在。

• table

使元素表现为表格，用于创建表格布局，类似于<table>元素。

• table-row

使元素表现为表格行，类似于<tr>元素。

• table-cell

使元素表现为表格单元格，类似于<td>或<th>元素。

• table-header-group

使元素表现为表格头部组，类似于 <thead> 元素。

• table-footer-group

使元素表现为表格尾部组，类似于 <tfoot> 元素。

• table-column

使元素表现为表格列，类似于 <col> 元素。

• table-column-group

使元素表现为表格列组，类似于 <colgroup> 元素。

• list-item

使元素表现为表格列组，类似于 <li> 元素。通常为自动添加项目符号或编号。

• run-in

使元素表现为运行中的元素，如果钱一个兄弟是块级元素，则该元素会变成内联元素并插入到前一个兄弟元素中，否则该元素变为块级元素。

• flow-root

使元素成为一个根流（flow root），创建一个新的块级格式化上下文（BFC）。

• contents

使元素的内容直接显示，而不是作为一个独立的框。用于某些特定的布局需求，如表格中的单元格合并。

flex属性以及用法

容器属性 (应用于父元素)

1. display: flex; 或 display: inline-flex;

   • 将一个块级容器设置为 Flex 容器。
   • inline-flex 使容器成为内联级 Flex 容器。

2. flex-direction

   • 设置主轴的方向（即项目的排列方向）。
   • 可选值：row（默认，从左到右）、row-reverse、column（从上到下）、column-reverse。

3. flex-wrap

   • 控制项目是否换行。
   • 可选值：nowrap（默认，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。

4. justify-content

   • 在主轴上对齐项目。
   • 可选值：flex-start（默认，靠左/上对齐）、flex-end（靠右/下对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（每个项目两侧间隔相等）、space-evenly（每个项目之间的间隔完全相等）。

5. align-items

   • 在交叉轴上对齐项目。
   • 可选值：stretch（默认，拉伸以填充容器）、flex-start（靠顶部对齐）、flex-end（靠底部对齐）、center（垂直居中对齐）、baseline（基线对齐）。

6. align-content

   • 在多行情况下，在交叉轴上对齐多行。
   • 可选值：stretch（默认，拉伸以填充容器）、flex-start、flex-end、center、space-between、space-around、space-evenly。

项目属性 (应用于子元素)

1. order

   • 定义项目的排列顺序。
   • 数值越小，排列越靠前，默认值为 0。

2. flex-grow

   • 定义项目的放大比例。
   • 默认值为 0，表示不放大。如果所有项目的 flex-grow 都为 1，则它们将平分剩余空间。

3. flex-shrink

   • 定义项目的缩小比例。
   • 默认值为 1，表示当空间不足时，项目会缩小。如果所有项目的 flex-shrink 都为 1，则它们会按比例缩小。

4. flex-basis

   • 定义在分配多余空间之前，项目占据的主轴空间。
   • 可以是一个长度值（如 100px）或百分比（如 50%），也可以是 auto（默认，根据内容自动调整）。

5. flex

   • 是 flex-grow, flex-shrink 和 flex-basis 的简写。
   • 默认值为 0 1 auto。例如，flex: 1 1 0; 表示 flex-grow: 1; flex-shrink: 1; flex-basis: 0;。

6. align-self

   • 允许单个项目有与其他项目不一样的对齐方式，可以覆盖 align-items 属性。
   • 可选值：auto（默认，继承 align-items 的值）、flex-start、flex-end、center、baseline、stretch。