Flex布局介绍

传统的布局解决方案–盒状模型–diplay + position + float

缺陷：对于一些特殊布局（垂直居中）和网格式布局（几行几列）不易实现

09年w3c颁布的–flex布局–使用简单、api完整丰富、响应式动态地实现各种页面布局（一些常见的布局思想）

当然针对gekco30+以下，最好的布局选择就是flex了，更新式的grid布局它不支持。

本文来源地： ，一个非常好的css内容及前端资讯的网站

flex

flexible box弹性布局

任意容器都可以指定成flex布局：

.box {  display: flex;}<!-- 行内元素 -->.box {  display: inline-flex;}

设为flex布局后，子元素的float、clear、vertical-align将失效

称采用flex布局的元素为flex容器（flex container），它的所有子元素自动成为容器成员，称为flex项目(flex item)。

两根轴：水平主轴 main axis主轴与边框的左右交叉点 main start/main end垂直交叉轴 cross axis交叉轴与边框的上下交叉点 cross start/cross end项目（flex item）默认沿主轴排列，单项目占据的主轴空间/交叉轴空间 main size/cross size

flex容器属性

flex-directionsnowed 决定主轴方向=项目排列方向flex-wrap 定义如何换行flex-flow 它是flex-direction和flex-wrap的简写形式，语法糖justify-content 定义项目在主轴上的对齐方式align-items 定义项目在交叉轴上的对齐方式align-content 定义多根轴线的对齐方式。若项目只有一根轴线则不生效。

1.flex-direction值：

row(默认值) 主轴为水平方向，起点在左端row-rever 主轴为水平方向，起点在右端column 主轴为垂直方向，起点在左端column-rever 主轴为垂直方向，起点在右端

2.flex-wrap值：

nowrap(默认) 不换行wrap 换行，第一行在上方wrap-rever 换行，第一行在下方

默认情况，所有flex项目会排在一条线上，不会自动换行

3.flex-flow默认值：row nowrap

.box {  flex-flow: &电厂实习报告lt;flex-direction> <flex-wrap>;}

4.justify-content值：

flex-start(默认值) 左对齐flex-end 右对齐center 居中space-between 两端对其，项目间间隔相等space-around 单个项目两侧的间隔相等，故项目间间隔相比项目与边框间间隔多一倍

5.align-items值：

strech(默认值) 如果flex项目未设置高度或设置高度为auto，将占满整个容器的高度flex-start 交叉轴起点处对齐flex-end 交叉轴终点处对齐center 交叉轴中点处对齐baline 项目第一行文字的基线对齐

6.align-content值：

strech(默认值)flex-startflex-endcenterspace-between 与交叉轴两端对齐，轴线间间隔平均分布space-around 单轴线两侧间隔相等。轴线间间隔比轴边间隔大一倍

flex项目属性

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

.item {  order: <integer>;}

flex-grow 定义项目放大比例，默认为0

如果所有项目flex-grow属性为1，它们将等分剩余空间。以此类推

flex-shrink 定母亲节那天义项目缩小比例，默认为1

如果所有项目flex-shrink属性为1，当空间不足时等比例缩小。
如果有一个项目flex-shrink为0，其他项目都为1，空间不足时前者不缩小

flex-basis 定义在分配多余空间前，项目占据的主轴空间(main size)

浏览器据此计算主轴是否有多余空间，默认值为auto即项目本来的大小

.item {  flex-basis: <length> | auto;}

flex 是flex-grow,flex-shink,flex-basis的简写，语法糖，默认值0,1,auto，后两者可选

.item {  flex: none | [<flex-grow> <flex-shrink> ? || <flex-basis>]}

有两个快捷值：

auto： 1 1 auto

none： 0 0 auto

建议优先使用此属性代替单独写3个分离的属性，因为浏览器会推算相关值。

align-lf 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性

默认值auto，表示继承父元素的a高中入学时间lign-items，如果没有父元素则等同于strech

.item {  align-lf: auto | flex-start最美人间四月天 | flex-end | center | baline | stretch;}