flex布局应用越来越广泛,它对于布局的处理非常灵活!
但是PC端兼容问题真的是一大堆,IE9及以下不支持,最好在移动端使用,最新的PC端浏览器也支持!
一、flexbox布局(弹性布局)
注意: 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
容器属性
。flex-direction: 项目的排列方向(橫or竖)
。flex-wrap: 换不换行,默认一条线上
。flex-flow: 方向,换行
。justify-content: 主轴上对齐方式
。align-items: 交叉轴如何对齐
。align-content: 很多根轴线的对齐方式
。box-orient:指定一个box子元素方向
-
flex-direction
- row 水平,左端
- row-reverse 水平,右端
- column 垂直,上沿
- column-reverse 垂直,下沿
-
flex-wrap
- nowrap 不换行
- wrap 换行
- wrap-reverse 换行,第一行在下方
-
flex-flow
- 是flex-direction和 flex-wrap简写,默认row nowrap
-
justify-content(常用!!!)定义项目在主轴上如何对齐
flex-start | flex-end | center | space-between | space-around;
左对齐 | 右对齐 | 居中 | 两端对齐贴紧,项目间间隔相等 | 每个项目两两间隔相等 -
align-items 定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
交叉轴起点对齐 | 交叉轴终点对齐 | 交叉轴中点对齐 | 项目第一行文字基线对齐 -
align-content
定义很多根轴线的对齐方式,如果只有一根轴线,该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
与交叉轴起点对齐 | 与交叉轴终点对齐 | 与交叉轴两端对齐,轴线之间的间隔平均分布
| 每根轴线两侧的间隔都相等 -
box-orient
指定一个box子元素是否应按水平或垂直排列。
horizontal:水平(默认)
vertical:垂直
inline-axis:子元素沿内联坐标轴(映射到横向)
block-axis:子元素沿块坐标轴(映射到垂直)
二、兼容性方面
/*父元素-横向排列(主轴)*/
display:box; (伸缩盒最老版本)
display:-webkit-box; /* iOS 6-, Safari 3.1-6 */
display:-webkit-flex; /* Chrome */
display:-moz-box; /* Firefox 19 */
display:-ms-flexbox;
display:flex; /*flex容器*/
/*方向*/
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction:row; 【新版本语法】
/*父元素-水平居中(主轴是横向才生效)*/【新版本语法】
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
/*子元素-垂直居中(在侧轴、纵轴上)*/【新版本语法】
-webkit-align-items:center;
-moz-align-items:center;
-ms-align-items:center;
-o-align-items:center;
align-items:center;
-ms-flex-align: center;
/*父元素-横向换行 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
/* 子元素—平分比例 */
-prefix-box-flex: 1; /* old spec webkit, moz */
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-webkit-flex: 1; /* Chrome */
-moz-box-flex: 1; /* Firefox 19- */
-ms-flex: 1; /* IE 10 */
width:20%;
flex: 1; /* NEW, Opera 12.1, Firefox 20+ */
flex: 2;
/* 子元素-用于改变源文档顺序显示 */
-prefix-box-ordinal-group: 1; /* old spec; must be positive */
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
order: 3;
【老版本语法】
/*居中 */
box-pack:center; //水平
box-align:center; //垂直
-webkit-box-pack:center;
-webkit-box-align:center;
-moz-box-pack:center;
-moz-box-align:center;
-ms-flex-pack:center;
-ms-flex-align:center;
/*子元素方向 */
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;
/*display*/
.display_flex{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.display_flex > *{
display: block;
}
.display_inline-flex{
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
.display_inline-flex > *{
display: block;
}
/*伸缩流方向*/
.flex-direction_column{
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.justify-content_flex-end{
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.justify-content_flex-justify{
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start{
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.align-items_flex-end{
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.align-items_center{
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.align-items_baseline{
-webkit-box-align: baseline;
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
/*伸缩性*/
.flex_auto{
-webkit-box-flex: 1;
-ms-flex: auto;
-webkit-flex: auto;
flex: auto;
}
.flex_1{
width: 0;
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
/*显示顺序*/
.order_2{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.order_3{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
原文:https://blog.csdn.net/cddcj/article/details/52131089