Flex弹性布局

1. 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局，注意浏览器兼容性问题，chrome21+，Opera12.1+，Firefox22+，Safari6.1+， IE10+才支持。

6个属性for flex container， 6个属性 for flex item， 他有主轴和交叉轴

触发方式是display:flex, or 对于行内元素 inline-flex

2.  容器属性

• flex-direction， 决定容器主轴的方向，默认为row，可取row-reverse | column | column-reverse
• flex-wrap，元素太多，怎么换行，nowrap（default value） | wrap | wrap-reverse
• flex-flow， flex-direction 和 flex-wrap的组合
• justify-content， 主轴对齐方式，flex-start（默认值） | flex-end | center | space-between | space-around;
• align-items， 定义项目在交叉轴上如何对齐，flex-start | flex-end | center | baseline | stretch（默认值）
        如果项目未设置高度或设为auto，将占满整个容器的高度，即stretch对齐方式

• align-content，多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，

  flex-start | flex-end | center | space-between | space-around | stretch （也是他的默认值）

3. 项目属性

• order，数值越小，排列越靠前，默认为0
• flex-grow，定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink，项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
注意，这里的缩小不是等比缩小，而是会考虑元素自身的大小计算缩小值，否则可能导致这个元素消失了。
• flex-basis， 定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto，即项目自身的大小。
• flex，它是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
• align-self，单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

4. 一些注意点

flex取值

auto =（1,1，auto），即放大又缩小

none = （0,0，auto），即不放大也不缩小

flex-baisis

他是对主轴上的长度，所以，可能是width，也可能是height，取决于flex-direction的值，row则是width，column则是height。

下面我们分享几个例子，基于flex-direction : row | row-reverse， 因此讨论width的实际占宽。

case 1

item {
    width: 300px;
    flex-basis: 150px;
}

这里最后每一个item会占150px，width无论设置为多少值都会被忽略，所以为了避免混淆，直接使用flex-basis，不要使用width。

case 2

item {
    flex-basis: 150px;
    max-width: 100px;
}

这里item的宽度还是被限制在了100px。所以在这个示例中最终的flex-basis是100px，如果max-width：200px，最后flex-baise：150px

case 3

item {
    flex-basis: 100px;
    min-width: 250px;
}

最终item的宽度是250px而不是100px，如果min-width < flex-bais, 则flex-basis的值生效。

结论

width属性只是一个当flex-basis没有被设置时的回退选项， min-width和max-width则是flex-basis的下限和上限

flex-basis没有设置，则他的值等于width，如果width也没有设置，则等于内容的content宽带。

 

居中小应用

// way 1
div.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

//way 2
div.parent{
  display:flex;
}
div.child{
  margin:auto;
}
 
// way 3
div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}

//way 4
div.parent {
    display: grid;
}
div.child {
    justify-self: center;
    align-self: center;
}