css未来新的布局方式—Flex布局

2016-11-3    分类: css3基础教程,前端资源

以往用css的布局方式脑子里都会有盒子模型的概念,但是也有不足的地方,例如:实现自适应的水平垂直居中效果

用css2可以实现水平垂直居中,但是要做到自适应是无法实现的虽然可以借助table td的valign="middle"来实现,但不是纯css。

用Flex布局就可以做的到,可以说flex可以取代float 和 position属性来布局页面。

 

Flex有老的属性和值,这里推荐使用新的属性和值

新版语法

定义容器的display属性

.box{

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

    display:flex;

}

 

/*行内flex*/

.box{

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

    display:inline-flex;

}

容器样式

.box{

    flex-direction:row|row-reverse|column|column-reverse;

    /*主轴方向:左到右(默认) | 右到左 | 上到下 | 下到上*/

 

    flex-wrap:nowrap|wrap|wrap-reverse;

    /*换行:不换行(默认) | 换行 | 换行并第一行在下方*/

 

    flex-flow:<flex-direction>||<flex-wrap>;

    /*主轴方向和换行简写*/

 

    justify-content:flex-start|flex-end|center|space-between|space-around;

    /*主轴对齐方式:左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/

 

    align-items:flex-start|flex-end|center|baseline|stretch;

    /*交叉轴对齐方式:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/

 

    align-content:flex-start|flex-end|center|space-between|space-around|stretch;

    /*多主轴对齐:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/

}

子元素属性

.item{

    order:<integer>;

    /*排序:数值越小,越排前,默认为0*/

 

    flex-grow:<number>;/* default 0 */

    /*放大:默认0(即如果有剩余空间也不放大,值为1则放大,2是1的双倍大小,以此类推)*/

 

    flex-shrink:<number>;/* default 1 */

    /*缩小:默认1(如果空间不足则会缩小,值为0不缩小)*/

 

    flex-basis:<length>|auto;/* default auto */

    /*固定大小:默认为0,可以设置px值,也可以设置百分比大小*/

 

    flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]

    /*flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,*/

 

    align-self:auto|flex-start|flex-end|center|baseline|stretch;

    /*单独对齐方式:自动(默认) | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/

}

 

 兼容写法:

定义容器的 display 属性:

.box{

    display:-webkit-box;/* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display:-moz-box;/* 老版本语法: Firefox (buggy) */

    display:-ms-flexbox;/* 混合版本语法: IE 10 */

    display:-webkit-flex;/* 新版本语法: Chrome 21+ */

    display:flex;/* 新版本语法: Opera 12.1, Firefox 22+ */

}

 

 

 

子元素主轴对齐方式(水平方向)

.box{

    -webkit-box-pack:center;

    -moz-justify-content:center;

    -webkit-justify-content:center;

    justify-content:center;

}

flex9

 

 

 

子元素交叉轴对齐方式(垂直)

.box{

    -webkit-box-align:center;

    -moz-align-items:center;

    -webkit-align-items:center;

    align-items:center;

}

flex8

 

 

 

 

子元素的显示方向

.box{

    -webkit-box-direction:normal;

    -webkit-box-orient:horizontal;

    -moz-flex-direction:row;

    -webkit-flex-direction:row;

    flex-direction:row;

}

flex7

 

 

 

右到左

.box{

    -webkit-box-pack:end;

    -webkit-box-direction:reverse;

    -webkit-box-orient:horizontal;

    -moz-flex-direction:row-reverse;

    -webkit-flex-direction:row-reverse;

    flex-direction:row-reverse;

}

flex6

 

 

 

上到下

.box{

    -webkit-box-direction:normal;

    -webkit-box-orient:vertical;

    -moz-flex-direction:column;

    -webkit-flex-direction:column;

    flex-direction:column;

}

flex5

 

 

 

下到上

.box{

    -webkit-box-pack:end;

    -webkit-box-direction:reverse;

    -webkit-box-orient:vertical;

    -moz-flex-direction:column-reverse;

    -webkit-flex-direction:column-reverse;

    flex-direction:column-reverse;

}

flex4

 

 

 

是否允许子元素伸缩

.item{

    -webkit-box-flex:1.0;

    -moz-flex-grow:1;

    -webkit-flex-grow:1;

    flex-grow:1;

}

flex3

 

 

.item{

    -webkit-box-flex:1.0;

    -moz-flex-shrink:1;

    -webkit-flex-shrink:1;

    flex-shrink:1;

}

flex2

 

 

子元素的显示次序

.item{

    -webkit-box-ordinal-group:1;

    -moz-order:1;

    -webkit-order:1;

    order:1;

}

flex1

 

 微信地址

https://segmentfault.com/a/1190000003978624

 推荐:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html