CSS3 Flex 弹性布局用法详解

Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性。

说明:

1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。

2.设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用。

3.设置了display:flex属性的元素,称为Flex容器,他里面的所有子元素统称为容器成员,称为Flex项目。后面我们就使用Flex容器和 Flex项目来进行介绍。 Flex容器有两根坐标轴:水平的叫主轴(main axis)和垂直的叫交叉轴(cross axis)。

Flex容器有6种属性可用分别是:

属性 详细说明
flex-direction 决定主轴的方向(即项目的排列方向)
flex-wrap 控制Flex容器是单行显示还是多行显示,而交叉轴的方向就决定着新线的排列方向
flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写
justify-content 定义了Flex项目在主轴方向上的对齐方式
align-items 定义项目在交叉轴上的对齐方式
align-content 定义了多根轴线的对齐方式,如果只有一条轴线,那么此属性不起作用

下面就逐一给大家介绍这些属性有什么用,以及他们所对应的属性值又是什么意思。

flex-direction: row | row-reverse | column | column-reverse;
属性决定主轴的方向(即项目的排列方向)
名称(属性/值) 详细说明
row(默认值) 主轴为水平方向,起点在左端
row-reverse 主轴为水平方向,起点在右端
column 主轴为垂直方向,起点在上沿
column-reverse 主轴为垂直方向,起点在下沿
 效果演示
flex-wrap: nowrap | wrap | wrap-reverse;
属性可以控制Flex容器是单行显示还是多行显示,而交叉轴的方向就决定着新线的排列方向
属性/值 详细说明
nowrap 不换行
wrap 换行
wrap-reverse 换行与wrap相似,但行的顺序是倒过来的
 效果演示
属性/值 详细说明
flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写,默认值为flex-flow : row nowrap
justify-content: flex-start | flex-end | center | space-between | space-around;
属性定义了Flex项目在主轴方向上的对齐方式
属性/值 详细说明
flex-start 类似于左浮动(float:left)
flex-end 类似于右浮动(float:right)
center Flex项居中
space-between 两端对齐容器,各个Flex项目之间的间距相等
space-around 每一个Flex项目两侧的间隔相等
  效果演示
align-items: flex-start | flex-end | center | baseline | stretch;
属性定义项目在交叉轴上的对齐方式
属性/值 详细说明
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考,居中对齐
baseline Flex项目第一行文字基线对齐
stretch 如果Flex项目未定义高度或者设置为auto,Flex项目将占满整个窗口的高度
   效果演示
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
属性定义了多根轴线的对齐方式,如果只有一条轴线,那么此属性不起作用
属性/值 详细说明
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考,居中对齐
space-between 交叉轴两端对齐,轴线这间的间隔平均分布
space-around Flex项目(沿交叉轴方向)之间的间隔相等
stretch Flex项目(沿交叉轴方向)占满整个交叉轴
   效果演示
属性/值 详细说明
order 用于控制Flex项目的排列顺序,默认为0,值越小越靠前。可取的值:0 | 1
flex-grow 用于定义Flex项目的放大比例,默认为0,即使存在剩余空间,也不放大。可取的值:0 | 1
flex-shrink 用于定义Flex项目的缩小比例,默认为1,即空间不足,Flex项目将等比缩小。可取的值 0 | 1
flex-basis 用于定义如何分配多余空间默认值为auto,即Flex项目本来的大小
flex flex属性是flex-grow,flew-shrink和flex-basis的简写。默认值为0 1 auto
align-self 允许单个Flex项目有不同于其他Flex项目的对齐方式。默认值为auto,表示继承父元素的align-items属性,如果不存在父元素,则等同于 stretch。可取的值:flex-start | flex-end | center | baseline | stretch;
stretch Flex项目(沿交叉轴方向)占满整个交叉轴
  效果演示

2009版本,我们称之为老版本,使用的是“display:box”或者“display:inline-box”;

2011版本,我们称之为混合版本,使用的是“display:flexbox”或者“display:inline-flexbox”;

2013版本,也就是最新语法版本,使用的是“display:flex”或者“display:inline-flex”。

刚开始研究Flex弹性布局时分不清box,flexbox,和flex的区别还以为他们的作用是不一样的,可后来慢慢收集Flex相关资料时才发现原来他们指的都是同一样东西。

CSS3 Flex 弹性布局用法详解
CSS3 Flex 弹性布局用法详解

更兼容性细节,可前往Can I use官网查询,传送门:http://caniuse.com/#search=flex

W3C最新版本介绍,传送门:http://www.w3.org/TR/css3-flexbox/

虽然现在浮动布局还比较流行,但随着浏览器的更新换代,我相信未来将会是Flex布局(弹性布局)的天下。因为Flex确实给我们带来了不少的方便,甚至有些效果与传统的布局方式相比,用弹性布局实现起来要简单得多。

参考:http://yunkus.com/article/css3/256.html

更多参考:

CSS3 Flexbox轻松实现元素的水平居中和垂直居中

CSS3: 动画循环执行(带延迟)的实现

Flexslider图片轮播、文字图片相结合滑动切换效果

大小不固定的图片和多行文字的垂直水平居中

CSS实现垂直居中的5种方法

Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar

CSS: 居中一个宽度为auto的块元素 (width:auto;margin:auto) center an auto-width div

CSS:absolute居中 How to center absolute div horizontally using CSS

Bootstrap 3 栏居中 responsive centered columns

 

本文:CSS3 Flex 弹性布局用法详解

3 Comments

Leave a Reply