2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。属性的兼容性不错。除了在Webkit 内核的浏览器,必须加上-webkit前缀。其他浏览器都无需处理兼容性问题。
属性说明
flex属性主要分两种:
- 设置在容器上的
- 设置在项目上的
设置在容器上的属性主要有 :
1.display:flex;//这条属性并不是flex专有的属性,但是只有这样设置了容器和它的子元素才能支持flex相关的属性。设置flex的话子元素的float,clear,vertical-align属性将失效
-
.content{
-
display:flex;
-
display:-webkit-flex; /* Safari */
-
}
2.flex-direction//这条属性设置子元素的排列方向,共有四个值:
-
-
- row (默认值)水平向左排列
- row-reverse 水平向右排列
- column 垂直向下排列
- column-reverse; 垂直向上排列
-
-
.content{
-
flex-direction: row ;
-
flex-direction: column;
-
flex-direction: column-reverse;
-
flex-direction: row-reverse;/*用的时候只写一条就行,以下同样*/
-
}
3.flex-wrap//这条属性设置当子元素一排放不下了将如何排列,共有三个值 :
-
-
- nowrap(默认):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
-
4.flex-flow//属性是flex-direction属性和flex-wrap属性的简写形式
5.justify-content//这条属性定义了子元素在它排列方向上的对齐方式,共有五个值 :
-
-
- flex-start(默认):左对齐。
- flex-end:右对齐。
- center:居中对齐。
- space-between:两端对齐,分散对齐。
- space-around:分散对齐,与上条不同的是,子元素将平分剩余空间。
-
6.align-items//这条属性定义了与排列方向相垂直的方向上的排列方式,共有五个值:
-
-
- flex-start:上对齐。
- flex-end:底部对齐。
- center:居中对齐。
- baseline:以子元素第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
-
7.align-content//这条属性定义当子元素在排列方向上不只一排时,排之间的对齐方式,也就是与排列方向垂直的方向上的排列方式,共有六个值:
-
-
- flex-start:排列的垂直方向起点对齐。
- flex-end:排列的垂直方向终点对齐。
- center:居中对齐。
- space-between:两端对齐,分散对齐。
- space-around:分散对齐,与上条不同的是,子元素将平分剩余空间。
- stretch(默认值):高度拉伸布满空间。
-
设置在子元素上的属性主要有 :
1.order//这条属性的值为大于等于零的整数,属性定义子元素的排列顺序。数值越小,排列越靠前,默认为0。
-
.item{
-
order: 1;
-
}
2.flex-grow//这条属性的值为大于等于零的整数,属性定义子元素的放大比例,默认为0,即如果存在剩余空间,也不放大。
-
.item{
-
flex-grow: 0;
-
}
3.flex-shrink//这条属性的值为大于等于零的整数,属性定义了子元素的缩小比例,默认为1,即如果空间不足,该子元素将缩小,值为0时,该项目不缩小。
-
.item{
-
flex-shrink: 1;
-
}
4.flex-basis//属性定义了在分配多余空间之前,子元素占据的排列方向上的空间(main size)。浏览器根据这个属性,计算排列方向是否有多余空间。它的默认值为auto,即子元素的本来大小。
-
.item{
-
flex-basis: 100px;
-
}
5.flex//属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
6.align-self//属性允许单个子元素有与其他子元素不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
总结
这两天一直在编写公司官网,公司要求网站要适配pc站和移动站,应用了flex布局在响应式方面的适配程度异常的好。代码还需多写写多练。还要多感谢阮一峰大神的教程