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

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

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

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

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

 

最常用到的是:水平垂直居中

#box{
 display: flex;
 display: -webkit-flex;
 align-items:center;
 justify-content:center;
 }
 .item{
    width: 50px;
    height: 40px;
    border: 1px solid #00C1B3;
 }

 

 

 

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

新版语法

定义容器的display属性

.box{

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

    display:flex;

}

 

/*行内flex*/

.box{

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

    display:inline-flex;

}

*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