flex布局

关于flex弹性布局的学习记录与详解

flex弹性布局基础：

• 给一个容器设置display：flex或者inline-flex可以用于设置容器的子元素如何分配空间；
• flex属性是flex-grow，flex-shrink，flex-basis的简写属性；
• 当元素不是弹性盒模型的子元素，则flex属性不生效；
• flex属性规定了弹性元素该如何上场伸长或缩短以适应flex容器中的空间；
• 大多数时候将flex设置为auto，initial，none或者一个无单位正数；
• 默认情况下，元素不会缩短至小于内容框尺寸，软香改变这一情况，可以设置元素的min-width和min-height；
• flex 属性可以指定1个，2个或3个值。

取值语法：

单值语法:

• 值必须为以下其中之一:
  • 一个无单位数: 它会被当作的值；
  • 一个有效的宽度width值: 它会被当作 的值；
  • 关键字none，auto或initial。

双值语法:

• 第一个值必须为一个无单位数，并且它会被当作 的值。第二个值必须为以下之一：

  • 一个无单位数：它会被当作 [] 的值。
  • 一个有效的宽度值: 它会被当作 [] 的值。

三值语法:

• 第一个值必须为一个无单位数，并且它会被当作 []的值。
• 第二个值必须为一个无单位数，并且它会被当作 []的值。
• 第三个值必须为一个有效的宽度值， 并且它会被当作 []的值。

取值节：

initial

• 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。

auto

• 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".

none

• 元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
• 当initial和none没有内容时，不会展示也就是flex-grow设为0；

<'flex-grow'>

定义 flex 元素的 flex-grow 属性，该属性定义弹性盒子项（flex item）的拉伸因子。。默认值为 0，负值无效。

<'flex-shrink'>

• 定义 flex 元素的 flex-shrink属性该属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认值为1，负值无效。

<'flex-basis'>

• 定义 flex 元素的 flex-basis属性；该属性指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。则必须加上单位，以免被视作伸缩性。 默认值为 auto。
• 当使用一个或两个无单位数时, flex-basis会从auto变为0.

flex的样式进阶：

justify-content：

• justify-content属性能水平对齐元素，并接受这些参数：
  1. flex-start: 元素和容器的左端对齐；
  2. flex-end: 元素和容器的右端对齐；
  3. center: 元素在容器里居中；
  4. space-between:元素之间保持相等的距离；
  5. space-around:元素周围保持相等的距离；

align-items：

• align-items属性纵向对齐元素并且可选以下几个值：
  1. flex-start: 元素与容器的顶部对齐。
  2. flex-end: 元素与容器的底部对齐。
  3. center: 元素纵向居中。
  4. baseline: 元素在容器的基线位置显示。
  5. stretch: 元素被拉伸以填满整个容器。

flex-direction：

• flex-direction属性定义了元素在容器里摆放的方向，并且接受这些值：
  1.row：元素摆放的方向和文字方向一致。
  2. row-reverse：元素摆放的方向和文字方向相反。（注意当你调转行或列的方向后，柔性启动和柔性端对应的方向也被调转了。）
  3. column：元素从上放到下。
  4. column-reverse：元素从下放到上。

order

• 有时候仅仅调转行或列的方向是不够的。在这些情况，可以我们设置单个元素的order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。
  用order来调整的顺序。
• 例如：

.lch{
   order 15;
   order -10;
}

align-self：

• 可以使用的控制单个元素的属性是align-self属性，align-self属性接受align-items一样的那些值：
  1. flex-start: 元素与容器的顶部对齐；
  2. flex-end: 元素与容器的底部对齐；
  3. center: 元素纵向居中；
  4. baseline: 元素在容器的基线位置显示；
  5. stretch: 元素被拉伸以填满整个容器。

flew-wrap

• flex-wrap属性把内容分散，这个属性接受这些值：
  1. nowrap：所有的元素都在一行；
  2. wrap：元素自动换成多行；
  3. wrap-reverse：元素自动换成逆序的多行。
• flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。举个例子，可以你用flex-flow: row wrap去设置行并自动换行。

align-content：

• align-content属性可以用来决定行与行之间隔多远，align-content属性接受这些值：
  1. flex-start：多行都集中在顶部；
  2. flex-end：多行都集中在底部；
  3. center：多行居中；
  4. space-between：行与行之间保持相等距离；
  5. space-around：每行的周围保持相等距离；
  6. stretch：每一行都被拉伸以填满容器。
• 这可能有些容易混淆，但align-content决定行之间的间隔，而align-items决定元素整体在容器的什么位置。
• 只有一行的时候align-content没有任何效果。