粉阿吉整理(6)之------Flex 弹性盒

1. 怪异盒模型

想写上border和padding，又不想增加的时候，就可以把它变成怪异盒模型 因为怪异盒模型的boder和padding都在内部。
标准盒模型只针对内容的宽度做了一个指定，没有对元素的总宽度进行指定。在让**boder和padding在内部去解析**的场合，利用border-box属性值会使得页面布局更加方便。
怪异盒模型=IE低版本盒模型=border-box

标准盒：box-sizing: content-box; 总大小=width/height+padding+border+margin
怪异盒：box-sizing: border-box; 总大小=width/height+margin

2. Flex弹性盒、弹性布局

Flex是Flexible Box的缩写，意为’ 弹性布局 '，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。

.box{
 	display:flex
 }

/* 行内元素也可以使用flex布局 */
.box{
 	display:inline-flex
 }
 /* * 
  * 将对象作为内联块级弹性伸缩盒显示
  * flex独占一行  inline-flex可以和其他内敛块在一行
  * */

弹性盒模型用于决定元素在盒子里的分布方式以及如何处理盒子的可用空间。通过盒模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体的弹性布局 ，给父元素设了弹性盒以后，只对子元素有用，隔了一层就没用。

• Webkit内核的浏览器，必须加上-webkit-前缀

display: -webkit-flex; /* Safari */

/*注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
采用flex布局的元素，成为flex容器，他的所有子元素称呼就变成容器成员，称为容器项目*/

容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）。项目默认沿主轴排列。

3. 属性

• 1、flex-direction 定义项目主轴的方向（即项目的排列方向）

.box{
   flex-direction: row |row-reverse|column|column-reverse
    }

/*
	Row(默认值)：主轴为水平方向，起点在左端。
	Row-reverse:主轴水平方向，起始点在右端。 
	Column:主轴为垂直方向，起点在上沿。 
	Column-reverse:主轴在垂直方向，起点在下沿
*/

• 2、Justify-content 定义项目在主轴上的对齐方式

.box{
   justify-content: flex-start |flex-end |center |space-between |space-around;
    }

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

• 3、align-items 定义项目在交叉轴上如何对齐

.box{
   align-items:flex-start | flex-end | center | baseline |stretch
    }

/*
宽度不写 由内容撑开 高度不写 默认拉伸 和平常的正好完全相反
*/

• 4、flex-wrap 换行

.box{
   flex-wrap:nowrap | wrap | wrap-reverse;
    }

/*	Nowrap默认 不换行
	Wrap  换行 第一行在上方   
    Wrap-reverse  */

• 5、align-content 多根轴线的对齐方式

只要出现换行 就会出现多根轴。如果项目只有一根轴线，该属性不起作用。

.box{
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

• 6、align-self 允许单个项目有与其他项目不一样的对齐方式 （从这里开始加给子项目）

align-self，可覆盖align-items，默认值为auto。表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

.wrap p:nth-child(2){
	align-self:flex-end
	}

• 7、order 定义项目的排列顺序

数值越小，排列越靠前，默认为0

.item{
   order: <num>;
    }

.wrap p:nth-child(2){
	align-self:stretch;
	order:1
	}

• 8、flex-grow 定义项目的放大比例

默认为0，即如果存在剩余空间，也不放大。

.item{
   flex-grow: <number>; 
    }

/**
*如果所有项目的flex-grow属性都为 1,则它们将等分剩余空间。
*如果一个项目的flex-grow属性为2,其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
**/

• 9、flex-shrink 定义了项目的缩小比例

默认为1，即如果空间不足，该项目将缩小。

.item{
   flex-shrink: <number>;
    }

/**
*如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
*如果一个项目的flex-shrink属性为0，其他项目都为1，空间不足时，前者不缩小。
*负值对该属性无效。
**/

• 10、flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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

/**
*它可以设为跟width或height属性一样的值，则项目将占据固定空间。
**/

• 11、flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
优先使用这个属性，浏览器会推算相关值，不写三个分离的属性。

flex 复合属性，设置或检索弹性盒模型对象的子元素如何分配空间

使用自适应窗口的弹性盒布局：通过设置flex来使盒布局变为弹性盒布局
让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容

-webkit-box-flex: 1;  -moz-box-flex: 1;   -ms-flex: 1;   -webkit-flex: 1; 
flex: 1;