Flex布局

flex布局是一个布局模型（不同于块和内联模型布局，其依赖于块和内联元素的布局方向），而不是一个简单的属性，包括父元素（flex container）和子元素（flex items）的属性。不需要媒体查询就可以控制内容的尺寸随着浏览器的变化而变。它具有定义一个可伸缩项目的能力。flex 元素可以根据他们的 flex-grow 因子拉伸以填充可用空间，或根据他们的 flex-shrink 因子收缩以防止溢出。
MDN解释
demo地址

---

flexbox 基本概念

伸缩容器（flex container）：设置display：flex或者inline-flex的元素。

收缩项目（flex items）：container容器的子元素（每一个单元块）。

主轴（main axis）和主轴方向（侧轴（cross axis）和侧轴方向）：浏览器（准确说是UA【用户代理】）沿着container的一个方向（默认是水平方向）去摆放items，这个方向就叫做主轴方向，侧轴与之垂直，相当于我们经常说的X轴与Y轴。

主轴空间（main size）：每一个item所占据的空间的宽度，反之高度就称之为侧轴空间（cross size）

---

flexbox的具体用法

当设置父元素display：flex（inline-flex）后，其子元素的float，clear，vertical-align属性将不会有效果。

---

flex-direction

设置在父元素上面，控制摆放items的主轴方向。

row （默认值）： 方向为水平方向，起点为左端。
row- reverse：也是水平方向，起点在右端。

column：主轴为垂直方向，起点在top。
column-reverse：垂直方法，起点在bottom。

---

flex-wrap

设置在父元素上面，控制items在主轴方法空间不足时，是否可以换行显示。

nowrap（默认值）：不换行显示，当父容器的宽度太小，items的尺寸会自动调整，不会另起一行。

wrap：当父容器宽度不足时，items会自动换行，切原始行在上面。

wrap-reverse：换行，但是原始行在下面，换的行在上面。

flex-flow是flex-direction/flex-wrap的缩写方式

---

justify-content

设置在父容器上面， 定义了items在主轴方向上的对齐方式；这个属性类似于设置文本对齐方式的text-align属性。

flex-start（默认值）：左对齐
flex-end：右对齐
centent：居中对齐
space-between:两端对齐，items之间的间隔（不包含最开始和最末端的item）是一样的，也就是说，items平分主轴的全部剩余空间（去除两端所占的空间）。通俗说来就是：第一个块和第二个块的距离与第二个块与第三个块的距离是一样的。
space-around：每一个item的两侧的间隔是一样的，故item之间的间隔要比item与浏览器边缘的间隔大。

---

align-items

设置在父容器上面，定义items在垂直轴上面的对齐方式。

stretch（意思是延伸）（默认值）：当items没有设置高度或者设置为auto的时候，就会占满容器的整个高度。遵守max/min height/width的条件下。

flex-start：items的顶部与侧轴的起点（cross start ）对齐。

flex-end：items的底部与侧轴的底部（cross end ）对齐。

center：每一个items与侧轴的中心对齐。

baseline：以每一个items中的第一行文字的底部基线对齐。

align-content

设置在父容器上，定义多条轴线的对齐方式；当我们设置flex-wrap：wrap时，items换行，产生了多条轴线，此时就需要这个属性去设置多条轴线的对齐方式。由于我们可以把每一条轴线整体看作一个item，相当于在主轴上使用“justify-content”一样。

stretch（默认值）：每一条轴线整体又相当于一个item，此时有多少条轴线，就会平分多少等分在垂直方向上的空间；

flex-start：在垂直轴线的起点对齐

flex-end：在垂直轴的终点对齐

center：在垂直轴的中间对齐

space-between：轴线两端对齐，轴线之间的间隔相等，剩下的垂直空间被轴线分成相等的间隙。

space-around：每条轴线两侧的间隔相等，所有轴线之间的间隔（垂直方向上）比轴线与边缘的间隔大一倍。

---

flex-items属性

这些属性是定义在子元素上面的

---

order

定义子元素在父容器里面的排列顺序，数字越小，越前，默认是0.可以为负数，虽然在Html结构里面，负数是排在后面，但是设置了order就可以排在最前面。取值为数字 integer

flex-basis

根据这个属性，为每一个item分配剩余的父容器空间，默认值是auto，即item本身的大小，取决于自身的height和width。取值length

当主轴设置为水平方向的时候，给item设置flex-basis时，item的宽度设置是无效的；flex-basis需要跟flex-grow和flex-shrink搭配使用才能发挥效果。

flex-grow

item的放大比例，默认值0，即存在剩余空间，也不放大。取值number
若值为1，有剩余空间的话就会等分剩余空间。

flex-shrink

item的缩放比例，默认值1，当空间不足的时候，按照等比例缩放，0为不缩放，负值无效。取值number

flex为（flex-grow），（flex-shrink），flex-basis的简写，默认值0 1 auto 即不放大，可缩小，大小与width和height有关。
flex：auto—-1 1 auto；flex：none—-0 0 auto

---

align-self

允许单个item可以与其他的item有不一样的对齐方式，单个item覆盖align-items（作用在全部的item上）定义的属性。
auto（默认值）：继承父元素的align-items的属性，没有父元素，相当于stretch。

---

demo
github
参考资料