20170610

基本介绍

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用Flex布局的好处就是免去float的困扰，但是也有一定的问题就是浏览器兼容性问题，这里暂且不做讨论，只阐述基础知识。
任何一个容器都可以指定为 Flex 布局，将class为box的盒子设为Flex布局，如下：

.box{
    display: flex;
}

如果行内元素也需要Flex布局，那么应该写成

.box{
    display: inline-flex;
}

不过这个行内元素的Flex布局我至今都还没用过。

需要注意的是，当容器被设为Flex布局后，子项目的float、clear和vertical-align属性都将失效。

---

6+6属性介绍

通过自己的实践，熟练掌握容器的6属性和子项目的6属性就能够解决我们基本的布局要求了。

容器的六个属性

• flex-direction
  决定主轴的方向即项目的排列方向。
  row：默认值，主轴为水平方向，起点在左端；
  row-reverse：主轴为水平方向，起点在右端；
  column：主轴为垂直方向，起点在上沿；
  column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap
  默认情况下，子项目都排在一条轴线上，flex-wrap属性定义的是当一行排不下时如何换行。
  no-wrap：默认值，不换行；
  wrap：换行，第一行在上面；
  wrap-reverse：换行，第一行在下面。

• flex-flow
flex-direction和flex-wrap的简写形式，默认值是row no-wrap。

• align-content
  容器内必须有多行的项目，该属性才能渲染出效果。
  stretch：默认值。多行项目在竖直方向上被拉伸以适应容器；
  center：项目位于容器竖直方向上的中心；
  flex-start：项目位于容器的开头；
  flex-end：项目位于容器的结尾；
  space-between：多行项目之间留有空白；
  space-around：多行项目之前、之间、之后都留有空白；
  initial：设置该属性为它的默认值，该属性值可以定义任何HTML元素的任何CSS属性；
  inherit：继承父容器的属性值，该属性值可以定义任何HTML元素的任何CSS属性。

• justify-content
  定义子项目在主轴上的对齐方式，具体的对齐方式跟主轴的方向有关，也就是跟flex-direction的属性值有关。
  假设主轴方向的属性值是row :
  flex-start是默认值为左对齐；
  flex-end，右对齐；
  center，水平居中；
  space-between，两端对齐，子项目间的间隔相等；
  space-around，每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍。
  这些属性值跟align-content的属性值表示的意义相同。

• align-items
  定义项目在交叉轴上如何对齐。属性值有 flex-start | flex-end | center | baseline | stretch，这些属性值跟align-content的属性值表示的意义相同，默认值也是stretch。

子项目的六个属性

• order
  定义子项目的排列顺序。取值为整数，数值越小，排列越靠前，默认为0。

• flex-grow
  定义子项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有子项目的flex-grow属性都为1，如果有剩余空间，则它们将等分剩余空间。如果一个子项目的flex-grow属性为2，其他子项目都为1，则前者占据的剩余空间将比其他项多一倍。

• flex-shrink
  定义子项目的缩小比例，默认为1，即如果空间不足，该子项目将缩小。如果所有子项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个子项目的flex-shrink属性为0，其他子项目都为1，则空间不足时，前者不缩小。

• flex-basis
  定义在分配多余空间之前，子项目占据的主轴空间（main size），属性值是长度。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子项目的本来大小。它可以设为跟width或height属性一样的值，如果设定了某个像素值，则该子项目将占据固定空间。

• flex
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

• align-self
  定义了Flex子项纵轴方向上的对齐方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
  auto：默认值，继承父容器的属性，如果没有父容器，就跟stretch的效果一样；
  stretch：被拉伸以适应容器；
  center：位于容器中心；
  flex-strat：位于容器开头；
  flex-end：位于容器结尾；
  baseline：位于容器的基线；
  initial：设置该属性为它的默认值，该属性值可以定义任何HTML元素的任何CSS属性；
  inherit：继承父容器的属性值，该属性值可以定义任何HTML元素的任何CSS属性。