Flex(弹性布局)学习笔记。

本文是学习阮一峰老师flex布局的笔记

一.Flex布局

1、容器的属性

(1) flex-direction 决定主轴的方向

.box{ flex-direction:row | row-reverse | column | column-reverse; } (2) flex-wrap 排不下，如何换行。(不换行，换行-第一行在上方，换行-第一行在下方)

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }   (3) flex-flow  flex-direction和flex-wrap的简写形式

.box { flex-flow: <flex-direction> || <flex-wrap>; }  (4) justify-content   项目在主轴上的对齐方式

.box{ justify-content: flex-start | flex-end | center |space-between | space-around; } 左对齐， 右对齐， 居中， 两端对齐， 两个item之间的间隔相等

    (5) align-items 项目在交叉轴上如何对齐

.box { align-items: flex-start | flex-end | center | baseline | stretch; } baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

             (6) align-content   多根轴线的对齐方式

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 2 、 项目的属性

(1)  order  项目的排列顺序。数值越小，排列越靠前

.item { order: <integer>; } (2) flex-grow 项目的放大比例 (默认值为0,即存在剩余空间，也不放大)

.item{ flex-grow: <number>; } 例如：排列一些图片，画廊之类的时候设置缩放可以自动撑开每一行内的空间     (3) flex-shrink 项目的缩小比例  (默认值为1，如果空间不足，则缩小该项目)

.item{ flex-shrink:<nummber>; } (4) flex-basis 

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

item{ flex-basis: <length> | auto； } (5) flex 属性  （flex-frow， flex-shrink, flex-basis的缩写形式）

.item{ flex: 1 1 auto; }有两个快捷值auto(1,1,auto)  和 none(0 0 auto)

(6) align-self 允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性。默认值为auto。表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }