Flexbox指南

Flexbox指南

Flexbox，也称为弹性盒子模型，是两个现代布局系统之一，以及CSS Grid

• 介绍
• 浏览器支持
• 启用Flexbox
• 容器属性
  • 对齐行或列
  • 垂直和水平对齐
  • 更改水平对齐
  • 更改垂直对齐
    • 关于的注释 baseline
  • 包
• 适用于每一项的属性
  • 使用订单在另一个物品之前/之后移动物品
  • 使用align-self进行垂直对齐
  • 必要时增加或缩小项目
    • 弹性成长
    • 弯曲收缩
    • 弹性基础
    • 柔性

##介绍
Flexbox，也称为Flexible Box Module，是两个现代布局系统之一，以及CSS Grid。

与CSS Grid（二维）相比，flexbox是一维布局模型。它将基于行或列控制布局，但不能同时控制布局。

flexbox的主要目标是允许项目填充其容器提供的整个空间，具体取决于你设置的某些规则。

除非你需要支持IE8和IE9等旧版浏览器，否则Flexbox可以让你忘记使用

• 表格布局
• 浮点数
• clearfix
• display: table

让我们进入flexbox，并在很短的时间内掌握它

##浏览器支持
在撰写本文时，它得到97.66％的用户的支持，多年来所有最重要的浏览器都实现了它，因此即使是较旧的浏览器（包括IE10 +）也都适用：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0SJ0IKqH-1606139621842)(media/16061377805874/caniuse.png)]
尽管我们必须等待几年时间才能让用户赶上CSS Grid，但Flexbox是一项较旧的技术，可以立即使用。

启用Flexbox
通过设置将flexbox布局应用于容器
display: flex;
要么
display: inline-flex;
内容容器内将使用Flexbox的对齐。
##容器属性
一些flexbox属性适用于容器，该容器为其项目设置通用规则。他们是

• flex-direction
• justify-content
• align-items
• flex-wrap
• flex-flow

对齐行或列
我们看到的第一个属性flex-direction，确定容器是将其项目对齐为行还是列：

• flex-direction: row沿文本方向将项目连续放置（西方国家从左到右）
• flex-direction: row-reverse放置物品的方式相同，row但方向相反
• flex-direction: column将项目放在一列中，从上到下排序
• flex-direction: column-reverse将项目放在一列中，就像column在相反方向上一样

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sSVBm0un-1606139621845)(https://flaviocopes.com/flexbox/1.png)]

##垂直和水平对齐
默认情况下，项目从左边开始，如果flex-direction是row，从如果顶部flex-direction是column。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wTrg6oAy-1606139621846)(https://flaviocopes.com/flexbox/2.png)]

你可以使用justify-content更改水平对齐方式和align-items垂直对齐方式来更改此行为。

##更改水平对齐
justify-content 有5个可能的值：

• flex-start：对准容器的左侧。
• flex-end：对准容器的右侧。
• center：对准容器的中心。
• space-between：以相等的间距显示。
• space-around：以等间距显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zBj122nc-1606139621848)(https://flaviocopes.com/flexbox/3.png)]

##更改垂直对齐
align-items 有5个可能的值：

• flex-start：对准容器的顶部。
• flex-end：对准容器的底部。
• center：对准容器的垂直中心。
• baseline：显示在容器的基线。
• stretch：拉伸物品以适合容器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uhmFAQ2k-1606139621850)(https://flaviocopes.com/flexbox/4.png)]

关于的注释 baseline
baselineflex-start由于我的盒子太简单了，所以该示例看起来与此示例类似。

##包
默认情况下，flexbox容器中的项目保持在一行上，将其缩小以适合该容器。

要强制项目分散在多行中，请使用flex-wrap: wrap。这将根据中设置的顺序分配商品flex-direction。使用flex-wrap: wrap-reverse扭转这种秩序。

称为A速记属性flex-flow允许你指定flex-direction，并flex-wrap在一个单一的线，通过将flex-direction第一个值，其次是flex-wrap价值，例如：flex-flow: row wrap。

##适用于每一项的属性
从现在开始，我们已经看到了可以应用于容器的属性。

单个项目可以具有一定程度的独立性和灵活性，你可以使用以下属性更改其外观：

• order
• align-self
• flex-grow
• flex-shrink
• flex-basis
• flex

让我们详细了解它们。

##在另一个物品之前/之后移动物品
根据项目分配的顺序对项目进行排序。默认情况下，每个项目都有顺序0，HTML的外观决定了最终顺序。

你可以order在每个单独的项目上使用来覆盖此属性。这是你在项目而非容器上设置的属性。你可以通过设置负值使一个项目出现在所有其他项目之前。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ilq1L4H-1606139621852)(https://flaviocopes.com/flexbox/5.png)]

##使用align-self进行垂直对齐
一个项目可以使用选择覆盖容器align-items设置，该设置align-self具有以下5个相同的可能值align-items：

• flex-start：对准容器的顶部。
• flex-end：对准容器的底部。
• center：对准容器的垂直中心。
• baseline：显示在容器的基线。
• stretch：拉伸物品以适合容器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5nid2V8z-1606139621853)(https://flaviocopes.com/flexbox/6.png)]

##必要时增加或缩小项目
弹性成长
任何项目的默认值为0。

如果将所有项目定义为1，将所有项目定义为2，则较大的元素将占用两个“ 1”项目的空间。

弯曲收缩
缺省值为1。

如果将所有项目定义为1，将一个项目定义为3，则较大的元素将缩小为其他项的3倍。如果可用空间较少，则占用的空间将减少3倍。

弹性基础
如果设置为auto，则根据项目的宽度或高度调整其大小，并根据该flex-grow属性添加额外的空间。

如果设置为0，则在计算布局时不会为该项目添加任何额外的空间。

如果你指定像素数字值，它将使用它作为长度值（宽度或高度取决于它是行还是列项目）

柔性
此属性结合了以上3个属性：

• flex-grow
• flex-shrink
• flex-basis

并提供了一种简短的语法：flex: 0 1 auto