css 布局之flex
Flex 是 CSS 中的一种布局模型，是 Flexible Box 的缩写。它可以帮助开发者轻松地实现各种复杂的布局效果，比如少量元素居中对齐、多个元素自动分列、元素自适应宽度等等。
Flex 布局模型的关键在于将容器（即 parent 元素）和其中的子元素（即 children 元素）分别视为一个整体，子元素可以沿着主轴（main axis）或交叉轴（cross axis）方向进行伸展和收缩，从而达到不同的布局效果。
Flex 布局提供了一系列 CSS 属性来控制这些方向、伸缩比例、空间分配、对齐方式等基本特性。其中比较常用的属性包括 display: flex;、flex-direction、justify-content、align-items 等，可以通过组合不同的属性值以及子元素上的一些属性值来实现复杂的布局效果。
任何一个容器都可以指定为 Flex 布局。
Flex 布局怎么用
.box{
display: flex;
}行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}Webkit 内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
flex的布局原理
Flexbox 的布局原理基于一个叫做 Flex Container（Flex 容器）和 Flex Item（Flex 项目）的概念。
Flex Container 是包含一组 Flex Item 的父容器，在该容器上设置 display: flex 或者 display: inline-flex 即可将其转换为一个 Flex Container。Flex Container 上的属性控制如何布局其所有的 Flex Item。
Flex Item 是 Flex Container 中的每个子元素，它们根据容器的方向排列。默认情况下，Flex Item 是从左到右（从上到下）依次排列的。但是，可以通过设置 Flex Container 属性来改变其方向、对齐方式、换行方式等等。
Flexbox 布局的工作原理就是在 Flex Container 中对 Flex Item 进行定位。通过对 Flex Container 的属性设置，例如 flex-direction、justify-content、align-items 等属性，可以控制 Flex Item 在容器中的位置、排列方式和间距等效果。
flex布局父项常见属性
flex-direction：
flex-direction属性决定主轴的方向（即项目的排列方向）。justify-content：
justify-content属性定义了项目在主轴上的对齐方式。flex-wrap：
flex-wrap属性定义，如果一条轴线排不下，如何换行。align-items：
align-items属性定义项目在交叉轴上如何对齐。align-content：
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-flow：
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-direction
flex-direction 是用来设置 flex 布局的主轴方向的属性。
具体来说，这个属性控制子元素在主轴上的排列方向，可以设置为以下四个值之一：
row：默认值，表示主轴方向是水平方向，子元素从左到右排列；row-reverse：表示主轴方向是水平方向，子元素从右到左排列；column：表示主轴方向是垂直方向，子元素从上到下排列；column-reverse：表示主轴方向是垂直方向，子元素从下到上排列。
交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的。
如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。
在一个 Flex 容器中，子元素沿着主轴依次排列，并且默认以左对齐方式布局；同时，它们也可以在交叉轴上进行对齐或者布局。
justify-content
justify-content属性定义了项目在主轴上的对齐方式。
justify-content 是一个 CSS 属性，用于设置 flex 容器中的子元素在主轴上的对齐方式。它可以接受以下五个值之一：
flex-start：默认值，子元素向行首对齐。flex-end：子元素向行尾对齐。center：子元素居中对齐。space-between：子元素平均分布在行里，两端不留空白。space-around：子元素平均分布在行里，每个元素周围留有空白。
flex-wrap
flex-wrap 是用于设置 flex 容器中子元素的换行方式的属性。
具体来说，这个属性控制当子元素在主轴方向上无法全部放置在一行（或一列）时，是否允许换行，以及换行的方式。它可以设置为以下三个值之一：
nowrap：默认值，表示不允许换行，所有子元素将尽量放在同一行（或同一列）显示；wrap：表示允许换行，子元素如果放不下，就会自动换行到下一行（或下一列），并继续排列子元素；wrap-reverse：表示允许换行，子元素如果放不下，就会自动换行到下一行（或下一列），但是从当前行（或列）的反方向开始排列子元素。
align-items
align-items 是用于设置 flex 容器内的所有子元素在交叉轴上的对齐方式的属性。
具体来说，这个属性可以设置为以下五个值之一：
stretch：默认值，表示子元素沿交叉轴方向被拉伸到与容器相同的高度或宽度，使得所有子元素基线对齐；flex-start：表示子元素沿交叉轴方向靠近容器的起始端对齐；flex-end：表示子元素沿交叉轴方向靠近容器的末尾端对齐；center：表示子元素沿交叉轴方向居中对齐；baseline：表示子元素沿交叉轴方向按照其基线对齐。
align-content
align-content 是用于设置 flex 容器内的所有子元素在交叉轴上的排列方式的属性。
它与 align-items 相似，不同之处在于 align-items 只影响单行或单列内子元素的对齐方式，而 align-content 影响多行或多列子元素的排列方式。
具体来说，align-content 可以设置以下五个值之一：
stretch：默认值，表示子元素沿交叉轴方向被拉伸到与容器相同的高度或宽度；flex-start：表示所有行或列的起始端对齐；flex-end：表示所有行或列的末尾端对齐；center：表示所有行或列居中对齐；space-between：表示所有行或列之间平分剩余空间；space-around：表示所有行或列两侧留有相等的空间。
以下是一个示例代码，展示了 align-content 属性的不同取值及对应的效果：
flex-flow
flex-flow 是一个 CSS 属性，用于设置 flex-direction 和 flex-wrap 两个属性的简写形式。它可以同时设置这两个属性的值，从而更便捷地控制 flex 容器中子元素的排列方式。
具体来说，flex-flow 属性的语法格式为：
flex-flow: <flex-direction> <flex-wrap>;下面是一个示例代码，展示了 flex-flow 属性的用法：
flex布局常见子项选项
order属性
order：指定 Flex 容器中子项的显示顺序，可以设置为整数值，默认值为 0。数值越小，则该子项越靠前；数值相同，则按照 HTML 代码的排列顺序来进行排序。
flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
假设一个 Flex 容器中存在多个子项，并且这些子项的宽度总和小于容器的宽度，这时候就会出现一部分没有分配到宽度的空闲空间。这时，Flex 布局就会按照 flex-grow 属性的值来为子项分配剩余的空间。
如果所有子项都设置了相同的 flex-grow 属性值，则它们会平均分配剩余空间。如果其中一个子项的 flex-grow 值大于其它子项，则该子项将获得更多的空间。例如，如果有两个子项 A 和 B，它们的 flex-grow 属性值分别为 1 和 2，则子项 B 将获得的额外空间是子项 A 的两倍。
flex-shrink属性
flex-shrink 属性是用于控制 Flex 子项缩小的比例，当 Flex 容器空间不足以容纳所有子项时，根据 flex-shrink 的值来确定子项缩小的优先级，以便适应容器的大小。
具体来说，flex-shrink 属性定义了子项的自动收缩比例，用于指定子项在父容器空间不足时缩小宽度（或高度）的相对比例。如果某个子项的 flex-shrink 属性值为 0，则该子项不会自动缩小，即使是在容器空间不足的情况下也不会被挤占。
如果所有子项的 flex-shrink 属性值相等，则它们平均收缩。如果其中一个子项的 flex-shrink 值大于其它子项，则该子项将优先被缩小。
flex-basis属性
flex-basis 是 CSS 属性 flex 布局中的一个属性，用于指定 flex 项在主轴上的初始尺寸。它定义了当 flex 容器没有足够空间使 flex 项目充满容器时，每个项目应该有多少空间。
flex-basis 的语法如下：
flex-basis: <length> | auto;其中，<length> 表示一个长度值，可以是像素、百分比等单位的数值；auto 表示使用元素的固有尺寸作为基础尺寸，即默认值为 auto。如果设置为 auto，则表示元素的大小将由 width 或者 height 属性来控制。
flex-basis 属性的取值范围为非负数值，如果设置为负数，则会被视为 0。
在不同情况下，flex-basis 的表现方式也会有所不同：
当
flex-wrap属性为nowrap时，flex-basis会被忽略，相当于设置为0%。当
flex-wrap属性为wrap或wrap-reverse时，flex-basis会生效，且会影响到伸缩性。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性
align-self 属性是在 Flexbox 布局中用来设置单个项目在交叉轴（垂直方向）上的对齐方式的属性。这个属性只会影响一个项目，与其它项目无关。
在默认情况下，Flexbox 容器会将所有项目在交叉轴上居中对齐。但是 align-self 属性可以用来覆盖这一行为，令一个项目根据自己的需要重新定位。
该属性可以有以下几种值：
auto：默认值，表示使用容器的align-items值。flex-start：将项目在交叉轴的起始位置对齐。flex-end：将项目在交叉轴的结束位置对齐。center：将项目在交叉轴的中间位置对齐。baseline：将项目在交叉轴上以其文字基线对齐。stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
以下是一个示例代码，演示如何使用 align-self 属性：
评论