flex弹性盒子,,弹性盒子布局

flex(弹性)布局:
2009年W3c推出flex布局.可以简便,完整,响应式的实现各种网页布局(IE10)
以往的网页布局(layout)方式:基于盒模型,依赖display属性+margin属性+position属性+float属性特殊布局比较麻烦(比如元素的垂直居中)

一.flex是什么?
flex:flexible box 弹性布局(可以用来给盒子提供最大的灵活性)
任何同期都可以指定为flex布局
.box {
display:flex;
}
webkit内核:加浏览器私有前缀-webkit
.box {
display:-webkit-flex;
display:flex;
}
注意:给盒子设置flex属性之后,子元素的float,clear,vertical-align(垂直方向排列方式)将失效

二.基本概念:
2.1采用flex布局的元素,称为flex容器(flex container)称为容器.他的所有子元素自动成为容器的成员,称为flex项目(flex item)称为项目.
2.2:容器默认存在两根轴:水平方向主轴(main axis)和垂直交叉轴(cross axis).主轴的开始位置(与边框的交点)叫做main start
结束位置叫main end.交叉轴的开始叫做cross start 结束位置叫cross end
2.3:项目(flex item)默认沿主轴排列.单个项目(flex item)占据的主轴空间叫做main size,所占据的交叉轴空间叫做cross size

三.容器属性:6个
3.1flex-direction属性:(决定主轴的方向:即项目的排列方向)
语法:
.box{
flex-direction:row | row-reverse | column | colum-reverse
}
四个默认值:
row(默认的值):主轴为水平方向,起点在左端
row-reverse:主轴为水平方向,起点在右端
column:主轴为垂直方向,起点在上
column-reverse:主轴为垂直方向,起点在下

3.2:flex-wrap:默认情况下,项目都是排在一条线(轴线)上.而flex-warp属性定义:如果一条线排不下,如何换行?
语法:
.box{
flex-wrap:nowrap | wrap | wrap-reverse
}
三个值:
nowrap:(默认)不换行
wrap:换行,第一行在上方
wrap-reverse:换行第一行在下方

3.3:flex-flow:是flex-direction和flex-wrap属性的简写形式.默认值为:row nowrap
语法:
.box{
flex-flow:flex-direction | flex-wrap
}

3.4:justify-content:定义项目在主轴上的对齐方式(只跟主轴相关,默认主轴自左向右)
语法:
.box{
justify-content:flex-start | flex-end | center | space-between | space-around
}
五个值:(假设方向自左向右 row)
flex-start:左对齐(默认)
flex-end:右对齐
center:居中
space-between:两端对齐项目之间的间隔相等
space-around:每个项目两侧间隔相等,项目之间的间隔比项目与盒子边框的间隔大一倍

3.5:align-items:定义项目在交叉轴上的对齐方式(只跟交叉轴方向相关:默认自上而下)
语法
.box {
align-items:flex-start | flex-end | center | baseline | stretch
}
五个值
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉着的中点对齐
baseline:项目中第一行文字的基线对齐
stretch:(默认)如果项目未设置高或设置为auto,将占满整个容器的高度

3.6:align-content:定义多根轴线的对齐方式,如果只有一根轴线该属性不起作用.
语法:
.box{
align-content:flex-start | flex-end | center | space-between | space-around | stretch
}
六个值:
flex-start:与交叉轴起点对齐
flex-end:与交叉轴终点对齐
center:与交叉轴中心点对齐
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
space-around:每个轴线两侧的间隔相等,所以轴线之间的间隔是轴线与盒子边框间隔的两倍
stretch:(默认值)轴线占满整个交叉轴

四.项目属性(flex item)属性
4.1:order:定义项目的排列顺序(数值越小越靠前,主轴开始的方向,默认为0)
语法:
.item{
order:number;
}

4.2:flex-grow:定义项目的放大比例.默认为0.如果存在剩余空间也不放大.
语法:
item{
flex-grow:number;
}

4.3:flex-shrink:定义项目的缩小比例.默认值为1,如果空间不足,该项目将缩小

4.4:flex-basis:定义在分配多余空间之前,项目所占的主轴空间(main size).浏览器根据这个属性,计算主轴是否有多余的空间,默认为auto,即项目本来大小
语法:
.item{
flex-basis:length(200px) | auto
}

4.5:flex:是flex-grow,flex-shrink,flex-basis简写.默认值是:0 1 auto;
flex:auto;(1 1 auto)
flex:none;(0 0 auto)

4.6:align-self:定义单个项目与其他项目不一样的对齐方式.可以覆盖align-items属性,默认值是auto,表示继承父元素的align-items属性.如果没有父元素等同于stretch
语法:
item{
align-self:auto|flex-start|flex-end|center|baseline|stretch
}除了auto以为其他都和align-item一样

至此,基本上flex布局的属性和方法就全在这了,主要用于小程序布局,有喜欢的可以收藏关注**,如有不足之处,还请批评指导,谢谢!**