引言：关于前端布局，我学习了Pink老师的Flex。以下是我自己做的一些简单笔记。
一个小套路
凡使用Flex布局，我们都会在其父元素设置display:flex;
那么就有人问了，这句代码的意义何在？别急，看下面GPT怎么回答！
display:flex是一种CSS属性，用于定义一个容器元素以及其子元素的布局方式。它引入了一种新的布局模型，称为Flexbox，旨在简化和改善页面的布局。
display:flex的意义在于:
弹性布局：Flexbox模型是一种基于弹性的布局方式，它使得容器元素中的子元素可以根据可用空间自动调整大小和位置。这意味着你可以轻松地创建自适应和响应式的布局，而不需要使用复杂的计算或定位技巧。
简洁的布局语法：Flexbox提供了一组简单而强大的属性，用于控制容器元素和子元素的布局行为。你可以使用这些属性来定义子元素的排列方向、对齐方式、间距以及比例分配等。这种声明式的布局语法使得代码更加清晰明了，减少了大量繁琐的计算和调整。
灵活的布局控制：Flexbox允许你灵活地控制容器中的子元素的尺寸和位置。你可以通过调整子元素的宽度、高度、缩放比例和空间分配权重等属性来实现各种布局效果，包括居中对齐、均匀分布和对齐方式的改变等。
解决多列布局的问题：在传统的CSS布局中，实现多列布局往往需要使用浮动或定位等技巧，并且容易出现一些问题，如不均匀高度、不灵活的调整和复杂的代码结构等。而Flexbox提供了更简单和强大的方式来实现多列布局，可以轻松地实现等高列、自适应宽度和动态排序等功能。
总的来说，使用display:flex可以带来更简便、灵活和强大的布局能力，使得页面布局更加直观和易于管理。它已经得到了广泛的支持，成为现代Web开发中常用的布局方式之一。
那么标注的部分，也就是他的特点！
小知识
在Flex中有两个名词，主轴和侧轴，其实默认主轴即“X轴”，侧轴即“Y轴”。如下图所示：
当然，我们也可以切换主轴和侧轴。
具体内容
justify-content
描述
使用该属性要确定好主轴
其中他的属性值包括以下几个：
- flex-start：默认值 从头部开始，若主轴是x轴则从左到右
- flex-end：从尾部开始排列
- center：在主轴居中对齐
- space-around：平分剩下空间
- space-between：两侧贴边，平分剩余空间
注意：以上属性均在父元素设置，效果会在父元素里面的布局体现
flex-wrap
描述
因为flex只能操作一行或一列，并不会出现换行效果，那么我们使用该属性，可以控制是否换行。
- wrap：换行
- nowrap：不换行
以上暂介绍这两个属性。
align-items
描述
若是单行/列侧轴，我们可以使用该属性
-
stretch ：默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 -
center ：元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 -
flex-start ：元素位于容器的开头。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 -
flex-end ：元素位于容器的结尾。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 -
baseline ：元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
align-content
描述
操作于多行/列排列，使用该属性
-
和align-items大差不差，多了两个属性
-
space-between
元素位于各行之间留有空白的容器内。 -
space-around
元素位于各行之前、之间、之后都留有空白的容器内。
flex-flow
描述
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
操作语法
flex-flow: flex-direction flex-wrap|initial|inherit;