了解Flex布局

了解Flex布局

Flex布局作为2009年推出的一种新的响应式布局方案，目前已经得到了所有浏览器的支持。

1. Flex布局概念

Flex布局是Flexible Box的缩写，意为"弹性布局"，其作为2009年推出的一种新的响应式布局方案，目前已经得到了所有浏览器的支持。

任何一个容器或者行内元素，都可以指定为Flex布局。

.box{
    display:flex;
}
.inline-box{
    display:inline-flex;
}

容器和容器成员

• 采用Flex布局的元素，被称为Flex 容器（flex container）
  
• Flex容器内的元素自动成为容器成员（flex item）
  

容器的属性

• flex-direction : 决定了项目的排列方向。包括row（默认值）：从左往右，水平排列；row-reverse：从右往左，水平排列；column：从上往下，竖直排列；column-reverse：从下往上，竖直排列；
• flex-wrap：如果一行排不下，容器成员是否换行。nowrap（默认值）：不换行；wrap：换行，下一行在上一行下方；wrap-reverse：换行，下一行在上一行上方；
• justify-content: 决定了容器成员的对齐方式。flex-start（默认值）：左对齐；flex-right：右对齐；center：居中；space-between：两端对齐，容器成员间隔相等；space-around：每个项目两侧间隔相等。
• align-items: 决定了容器成员在竖直方向上怎么对齐。stretch（默认值）：未设置，容器成员占满整个高度；flex-start：顶部对齐；flex-end：底部对齐；center：中点对齐；baseline：第一行文字的基线对齐；

容器成员的属性

• order：容器成员的排列顺序，数字越小越靠前，默认是0；
• flex-grow：决定了容器成员在有剩余空间的情况下，是否放大。默认是0，即不放大；假设设置了大于0，容器成员间会按照这个数的系数占比进行放大，哪怕设置了固定宽度也会放大。
• flex-shrink:决定了容器成员在空间不足时，是否按比例缩小。默认是1，既空间不足时所有成员一起等比缩小，哪怕设置了固定宽度也会缩小。如果某个容器成员设置为0，则不会缩小。
• flex-basis：决定了容器成员所占的基础宽度，一般是个百分比。默认为auto，即不设置，此时设置容器成员的width是起作用的；但是当设置了此属性不是auto，则width将不起作用。
• align-self：此设置可以覆盖父容器的align-items属性，默认auto，表示继承父容器的属性。

2. flex 属性缩写

flex属性是flex-grow, flex-shrink, flex-basis 三个属性的简写，用于定义容器成员的放大、缩写、宽度。默认值是0 1 auto.

flex 还有几个快捷键，可记住

.box-item{
    flex:auto; //(1 1 auto)   等比放大缩写，可设置width
    flex: 1; //(1 1 0%)       等比放大缩写，不可设置width
    flex: none; //(0 0 auto)  不随容器变化放大缩小，可设置width
    flex: 0; //(0 1 0%)        不随容器变化放大，不可设置width
}