Flex弹性盒子

这篇文章主要是分享了Flex弹性盒模型的基本概念, 简要介绍了Flex弹性盒模型的发展历程，最后重点介绍了Flex container六个属性以及Flex item的六个属性。下面我们就一一的往下看：

基本概念

Flex弹性盒模型是2009年W3C提出的一种新的布局方案，叫做Flex布局也叫作弹性盒子模型。它可以完整、简便、响应式的实现各种页面布局。布局的最外层元素叫做Flex容器（flex container），flex容器下面的子元素称之为容器成员（flex item）。

Flex容器默认存在两根轴，分别是：水平主轴（main axis）和垂直交叉轴（cross axis）；水平主轴的起始轴叫做main start，结尾叫做main end；垂直交叉轴的起始和结尾轴分别是cross start和cross end。容器成员flex item默认沿着主轴排列，单个容器成员占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

如下图所示：

发展历程

从2009年W3C制定这个标准以来，总共经历了三个版本。

最老版本，两个属性分别为：
box（弹性伸缩盒）和inline-box（内联块级弹性伸缩盒）
过渡版本
flexbox（弹性伸缩盒）和inline-flexbox（内联块级弹性伸缩盒）
最新版本
flex（弹性伸缩盒）和inline-box（内联块级弹性伸缩盒）

容器（Flex container）属性

Flex container容器属性分为六个：flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content，决定了子元素的排列方式，包括横向、纵向和一些对齐方式。

flex-direction（决定主轴方向），主要有四个值：

• row（横向从左到右排列，左对齐）
• row-reverse（右对齐）
• column（纵向排列）
• column-reverse（反转纵向排列）

flex-wrap（换行），主要有三个值：

• nowrap（子元素溢出时不换行）
• wrap（子元素溢出自动换行）
• wrap-reverse（反转wrap排列）

flex-flow（flex-direction与flex-wrap简写）

.main {
        display: flex;
        flex-flow: wrap row;
}

justify-content（容器成员 (flex item) 主轴上的对齐方式），主要有六个值：

• flex-start（主轴起始位置对齐 - 左对齐）
• flex-end（主轴结束位置对齐 - 右对齐）
• center（主轴中间位置对齐 - 居中）
• space-between（平均地分布在主轴上）
• space-around （平均地分布在主轴上, 两端保留子元素与子元素之间间距大小的一半）
• space-evenly（平均地分布在主轴上, 两端保留子元素与子元素之间间距相同间距）

align-item（容器成员 (flex item) 交叉轴上的对齐方式），主要有五个值：

• stretch（拉伸容器成员 (flex item) 适应容器 - 默认属性）
• flex-start（交叉轴起始位置对齐 - 上对齐）
• flex-end（交叉轴结束位置对齐 - 下对齐）
• center （交叉轴中间位置对齐 - 居中）
• baseline（容器成员 (flex item) 基线对齐）

align-content（多根轴线的对齐方式, 单轴线不起作用 - 每一根轴线理解为一个容器成员 (flex item)），一共有七个属性，和justify-content属性很相似但是多了一个stretch属性：

• flex-start（子元素溢出并且换行，父元素的高度大于子元素高度的总和-上对齐）
• flex-end（下对齐）
• center（居中对齐）
• space-between（中间间隔）
• space-around（两侧间隔）
• space-evenly（平均分布）
• stretch（拉伸，如果有高度的设置，属性不起作用）

容器成员 (flex item) 属性

flex item容器成员属性主要也包括了六个属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self，决定每一个容器成员自己的属性。

order（容器成员排列顺序，默认值是0，数值越小，排列越靠前，可以为负值）

.item{
      order: 1;
}

flex-grow（容器成员放大比例，默认值也是0，也就是不增长，数值越大，占据剩余空间越大，不允许为负值）

flex-shrink（容器成员缩小比例，默认值是1，0是不压缩，1是等比例压缩，数值越大，压缩比例越大，不允许为负值，压缩有一个最小宽度制约）

flex-basis（分配多余空间之前，容器成员占据的主轴空间）

实际上flex-basis就是width，但是优先级比width要高，比min-width和max-width又要低，是介于三者之间的一个属性，总共有三个值：

• auto
• px
• %

flex（flex-grow, flex-shrink 和 flex-basis的简写）

有三个特殊的值：auto（1 1 auto）、none（0 0 auto）、1（1 1 auto）。

.item {
     flex-basis: 50px;
 }

align-self（允许单个容器成员有与其他容器成员不同的对齐方式），总共有六个值：

• auto （默认，遵循flex-content的属性）
• flex-start
• flex-end
• center
• baseline
• stretch

.item {
    align-self: auto;
}