Flex 布局

---

兼容性

caniuse中的兼容性报告：

Paste_Image.png

总体来说，Flex布局已经得到了所有浏览器（高版本）的支持.

兼容性写法小技巧

flexbox由于历史原因，出现了多个语法版本，我们可以通过使用autoprefixer来跟踪最新的浏览器版本，自动化生产前缀

a { display: flex;}

a { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex
}

基本概念

Paste_Image.png

弹性容器：

包含着弹性项目的父元素。通过设置display属性的值为flex 或 inline-flex来定义弹性容器。

弹性项目：

弹性容器的每个子元素都成为弹性项目。

轴：

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴

主轴:

垂直于主轴的那根轴为侧轴。

和轴相关的属性
1 flex-direction 属性确立主轴

Paste_Image.png

2 justify-content 属性定义了在当前行上弹性项目沿主轴如何排布

Paste_Image.png

flex-start(默认值)：左对齐
flex-end: 右对齐
content: 居中
space-between: 两端对齐，项目之间的间隔都相等
space-around: 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍 

3 align-items 属性定义了在当前行上弹性项目沿侧轴如何排布

Paste_Image.png

flex-start: 交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch(默认值)：如果项目未设置高度或设suto,将占满整个容器的高度

4 align-self 属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由align-items所确立的默认值

Paste_Image.png

该属性可能取6个值，除了auto,其他都与align-items属性完全一致

方位

弹性容器的各个边，描述了弹性条目流的起点与终点。它们具体取决于弹性容器的主轴与测轴以及由writing-mode确立的方向（从左到右，从右到左等等）；
1 order属性将元素与序号组关联起来，并决定哪些元素先出现。数值越小，排列越靠前，默认为0

Paste_Image.png

2 flex-flow属性是flex-direction 和 flex-wrap属性的简写，决定弹性项目如何排布。默认值是row nowrap

行

根据flex-wrap属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

Paste_Image.png

Paste_Image.png

尺寸

根据弹性容器的主轴和侧轴，弹性项目的宽和高相应称为主轴尺寸与测轴尺寸
min-height 与 min-width属性初始值为0
flex属性是flex-grow, flex-shrink 和 flex-basis属性的简写，确立弹性项目的伸缩性
该属性有两个快捷键：auto(1 1 auto)和 none(0 0 auto)
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关的值。