CSS3弹性盒子

CSS3弹性盒子flex

CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式，提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

1、display

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

2、flex-direction

display: flex 属性可以让它变成 flex 容器， 然后可以让元素的项目排列成行或列。 只要给父元素添加 flex-direction 属性，并把属性值设置为 row 或column，即可横向排列或纵向排列它的所有子元素。
flex-direction 的其他可选值还有row-reverse 和column-reverse。
flex-direction 的默认值为 row

flex-direction的值有:

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

3、justify-content

（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

• flex-start：
  从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 justify-content 的值，那么这就是默认值。
• flex-end：
  从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部。
• center：
  弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
  -space-between：
  项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
• space-around：
  与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
  

4、 align-items

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-items的可选值包括：

• flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。
• flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。
• center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。
• stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。如未设置align-items的值，那么这就是默认值。
• baseline：沿基线对齐。基线是文本相关的概念，可以认为它是字母排列的下端基准线。

flex-start

flex-end

center

stretch

baseline

5、flex-wrap

用于指定弹性盒子的子元素换行方式。

• nowrap：默认值，不换行。该情况下弹性子项可能会溢出容器
• wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
• wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列

nowrap

wrap

wrap-reverse

6、flex-shrink

使用之后，如果 flex 容器太小，则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。子元素的 flex-shrink 接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害。 比如，一个项目的 flex-shrink 属性值为 1，另一个项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩。

7、flex-grow

flex-grow 会在容器太大时对子元素作出调整。
例子与上一个挑战相似，如果一个项目的 flex-grow 属性值为 1，另一个项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍。

8、flex-basis

flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。flex-basis 属性的单位与其他表示尺寸的属性的单位一致（px、em、% 等）。 如果值为 auto，则项目的尺寸随内容调整

9、flex

上面几个 flex 属性有一个简写方式。flex-grow、flex-shrink 和 flex-basis属性可以在 flex 中一并设置。
例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。
属性的默认设置是 flex: 0 1 auto;。

10、order

flex 容器里子元素的顺序,用整数值来定义排列顺序，数值小的排在前面。可以为负值

11、algin-self

align-self允许你调整单个子元素的对齐方式，而不会影响到全部子元素
align-self 可设置的值与 align-items 的一样，并且它会覆盖align-items 所设置的值。