CSS3基础10分钟学会CSS弹性布局 Flexbox布局基础

10分钟学会CSS弹性布局 Flexbox布局基础

使用CSS给网页布局,一般常用的方式是通过设置浮动或定位,而弹性布局是一种更灵活的方式,英文Flexible意思是“灵活的”,英文Flex具有收缩的意思。如果要将一个元素定义为弹性盒子,则只需使用下面这个定义即可:

div {display:flex;}

行内块的定义方式相似,行内元素也可以定义为弹性盒子:

#box {display:inline-flex;}

下面通过一个简单的示例,试试这个弹性盒子的特点:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
#a {background-color:#357;width:500px;height:300px;}
.b {
 width:150px;height:100px;
 line-height:100px;
 text-align:center;
 color:#fff;font-size:50px;
}
.box1 {background-color:#f54;}
.box2 {background-color:#0b9;}
.box3 {background-color:#07f;}
</style>
</head>
<body>
<div id="a">
 <div class="b box1">1</div>
 <div class="b box2">2</div>
 <div class="b box3">3</div>
</div>
</body>
</html>

这里有一个id为a的父元素,其中包含三个子元素,默认情况下三个子元素的显示效果是这样的:

flex弹性盒子1.png

现在如果给父元素a设置弹性布局属性:

#a {display:flex;}

则此时三个子元素变成横排显示了,如下图:

flex弹性盒子2.png

设置了弹性布局,就轻松的实现了多列显示,比起使用浮动或定位的方式要简单很多,这里的三个子元素为什么会横向排列,还可以怎样排列呢?

这里要使用flex-direction属性,英文direction意思是方向,在一个弹性盒子(可称为容器)内,子元素(可称为项目)默认沿X轴方向从左到右排列,此时X轴可称为主轴,flex-direction属性定义主轴的方向和项目排列的方向,它可以有下面几个取值:

row:X轴为主轴,从左到右排列。该值是默认情况,所以上面的示例,三个子元素是从左到右排列的。

row-reverse:X轴为主轴,从右到左排列。

column:Y轴为主轴,从上到下排列

column-reverse:Y轴为主轴,从下到上排列。

例如通过方向属性的设置(flex-direction:row-reverse),可将三个子元素的以下面这些方式排列:

flex弹性盒子-从右到左.png

在刚才的示例中,如果给容器再加一个项目:

<div class="b box4">4</div>

则会显示为下面的效果:

flex弹性盒子-不换行.png

此时4个项目宽度虽然超过了容器总宽度,但并没有换行显示,而是以平均宽度显示在同一行里,为什么会这样,还可以是什么样呢?

这里要使用flex-wrap属性,相信我们都很熟悉nowrap这个关键词,它表示“不换行”,而flex-wrap属性的默认值正是这个“不换行”,也就是:

flex-wrap:nowrap;

所以刚才的示例中,四个项目显示在同一行,如果想让它换行,则可以使用下面这个定义:

flex-wrap:wrap;

flex弹性盒子-换行.png

此外,还可以有wrap-reverse这个取值,它表示“换行,但首行位于下方”,效果是:

flex弹性盒子-换行首行在下方.png

以上两个属性可以简写为flex-flow,其默认值为“row nowrap”。接下来,还是回到三个项目横向排列的情况,便于测试其他的属性:

flex弹性盒子2.png

这里三个元素紧挨着排列在一起,而在现实网页设计中,往往需要给它们之间设置边距,如果想要平均分配宽度,是不是要计算边距的大小呢,在弹性布局中完全不需要,因为可以直接用justify-content属性来定义项目在主轴上的对齐方式,比如我给容器下面这个定义:

justify-content:space-between;

此时三个元素就自动均匀的显示在指定的宽度中了,多余的宽度被平均在中间的间距里,可理解为两端对齐:

CSS弹性布局space-between.png

与之稍有区别的取值是space-around,英文around意思是四周,而between意思是中间,下面来看看它们的区别:

justify-content:space-around;

CSS弹性布局space-around.png

两者的区别是,space-between是将多余宽度分布到间隔的区域,而space-around是将多余宽度平均分布到元素的两边,也就是说最左和最右侧都会出现间隔,中间的间隔是左右两侧间隔的两倍。

此外,项目在主轴上的对齐方式还可以设置为居左,居中和居右的方式(X轴为主轴的情况下),下面分别试试它们的效果:

justify-content:flex-start;

这个没必要测试了,默认情况下就是这样的。

justify-content:flex-end;

这个对齐方式与flex-start相反:

CSS弹性布局flex-end.png

justify-content:center;

顾名思义,这表示居中对齐:

CSS弹性布局center.png

可以定义项目在主轴上的对齐方式,同样也可以定义项目在另外一条轴(可称为交叉轴或侧轴)的对齐方式,这时候要用到align-items属性,下面我将上面的示例简单的修改一下(去掉子元素的高度,增加多行测试文字),测试一下align-items属性几个取值的效果:

我去掉项目高度定义后,未定义align-items属性的情况下,显示的效果如下:

CSS弹性布局-交叉轴对齐方式.png

这是align-items属性的默认值stretch,如果项目未设置高度或设为auto,将占满整个容器的高度,这是天然的多列等高布局

如果将align-items属性设置为flex-start,则表示以交叉轴的起点对齐:

CSS弹性布局-交叉轴对齐方式1.png

如果将align-items属性设置为flex-end,则表示以交叉轴的终点对齐:

CSS弹性布局-交叉轴对齐方式2.png

同样的,如果设置为center,则表示以交叉轴的中点对齐:

CSS弹性布局-交叉轴对齐居中.png

如果设置为baseline,则表示以项目第一行文字的基线对齐,类似垂直对齐属性vertical-align的默认值baseline,这里就不做测试了。

以上这些属性都是用在弹性盒子的容器上,而对于容器中的各个项目来说,也有几个自定义属性可以灵活定义。

order排序属性

英文order意思是次序,给弹性盒子的项目定义order属性可以改变项目的显示顺序,默认值为0,设置的值越小越靠前,回到最开始的示例,我给三个项目分别定义一个顺序值:

.box1 {order:8;}
.box2 {order:6;}
.box3 {order:7;}

按照order定义的数字值排序,这三个项目的顺序应该是2、3、1,显示的效果如下:

CSS弹性布局-order.png

flex-grow放大属性

英文grow意思是放大,该属性可定义项目的放大比例,默认为0,默认不进行放大,下面试试给刚才示例中的三个项目设置一个flex-grow值:

.box1, .box2, .box3 {flex-grow:1;}

此时显示的效果如下图,三个项目等分了容器的宽度:

CSS弹性布局-flex-grow.png

如果给第一个项目设置“放大值”为2,其他两个设置为1,则多余的容器宽度会按照2:1的比例分配到项目上,为了看的清楚,这里去掉项目宽度的定义:

.b {/* width:150px;*/}
.box1 {flex-grow:2;}
.box2, .box3 {flex-grow:1;}

这时候显示的效果是这样的:

CSS弹性布局-flex-grow2.png

flex-shrink缩小属性

英文shrink的意思是收缩,该属性可定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果设置为0,则表示不缩小,刚才的示例中,如果将项目数量增加到5个,则默认显示效果是:

CSS弹性布局-flex缩小属性.png

也就是空间不足的时候,项目会“自动”缩小,加入我给第2个项目定义一个flex-shrink值为0:

.box2 {flex-shrink:0;}

此时第2个项目会保持原本的宽度不缩小,而其他的项目会缩小并分配剩余的尺寸:

CSS弹性布局-flex缩小属性2.png

flex-basis初始值属性

英文basis意思是基准,该属性定义在分配多余空间之前,项目占据的主轴空间。该属性的默认值为auto,也就是默认为项目的原本尺寸。

例如在前面的示例中,我给其中一个项目设置了固定尺寸:

.box1 {flex-basis:300px;}

显示的效果如下图,浏览器将根据这个属性,计算主轴是否有多余空间:

CSS弹性布局-初始值.png

以上三个属性(放大,缩小和初始值)可简写为flex属性,也就是说不用写复杂的flex-grow、flex-shrink和flex-basis了,直接一个flex即可,默认值为0 1 auto,后两个值可不定义。

align-self自身对齐方式属性

在align-items属性中可以设置项目在交叉轴上的对齐方式,而使用align-self属性可以单独为某项目定义对齐方式,例如:

.box1 {align-self:center;}
.box2 {align-self:flex-start;}
.box3 {align-self:flex-end;}

此时这三个项目显示的效果如下:

CSS弹性布局-自身对齐.png

该属性的取值和align-items属性类似,可以设置为auto,flex-start,flex-end,center,baseline和stretch……

以上就是关于CSS弹性布局(Flexbox)的基础知识,该方式灵活多变,合理的运用可以实现各种灵活的网页布局。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/167.html