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;}