您的位置:首页> 前端教程> CSS3教程
文章导航

display:flex 弹性布局

2019-3-25 21:48| 作者: admin| 查看: 1614| 评论: 0|来自: 蚂蚁部落

弹性布局在CSS3中是非常重要的概念,当然这取决于它的便利性。

虽然在电脑端存在着很大的兼容性问题,但是随着时间的推移,软硬件的升级,肯定会得到广泛应用。

本文将通过代码实例结合图示详细介绍一下display:flex的用法,希望能够给需要的朋友来一些帮助。

首先说明一点,下文中使用的图片大多数来源于如下两个链接地址,再这里首先表示一下感谢。

(1).A Complete Guide to Flexbox

(2).A Visual Guide to CSS3 Flexbox Properties

建议英文好的朋友直接阅读如上两篇文章,并且对应站点中的前端知识非常优秀。

一.弹性布局的影响:

弹性布局之所以功能强大灵活,是因为它打破了很多原有的规则。

可以将任意元素设置为弹性布局,弹性布局会对其内部的子元素产生影响:

(1).块级元素不再单独占据一行。

(2).如果块级元素没有显式规定宽度,也不会横向铺满父元素。

(3).float、clear和vertical-align属性会失效。

正是因为打破一些原有的规则,所以弹性布局会在一些场景下非常的灵活强大。

首先看一段代码实例,对弹性布局有一个初步的感受:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
#box {
  display:flex;
  width:300px;
  height:100px;
  justify-content:space-between;
  align-items:center;
  background:#ccc;
}
#box > span {
  border-radius:50px;
  background:green;
  width:50px;
  height:50px;
}
</style>
</head>
<body>
<div id="box">
  <span></span>
  <span></span>
</div>
</body>
</html>

上面是一个弹性布局的简单例子,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/100118fx1o4f919frs1wd4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对于上述代码的表现不做详细分析,强调如下两点:

(1).display: flex可以将当前元素设置为弹性布局的容器元素。

(2).也可以设置为display: inline-flex,两者区别参阅display:flex与inline-flex 区别一章节。

二.弹性布局概念:

将display属性值设置为flex或者inline-flex的元素被称之为flex容器,或者简称为容器元素。

容器元素的子元素被称之为flex项目,或者简称项目。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215111ga36aa2ab32m527a.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

图示简单分析如下:

(1).黄色为容器元素,白色为项目。

(2).容器默认存在水平主轴和垂直交叉轴两根轴线。

(3).主轴开始的位置叫做main start,结束的位置叫做main end。

(4).交叉轴开始的位置叫做cross start,结束的位置叫做cross end。

(5).项目默认是沿着主轴水平排列。

(6).每一个项目在主轴占据的空间叫做main size,交叉轴占据的空间叫做cross size。

在默认状态下,主轴是水平的,当然这不是一成不变的,可以通过相关设置改变,在后面文章会介绍。

三.容器属性:

将元素设置为容器之后,可以通过六个属性对其进行相关设置。

也就是说这六个属性对容器元素生效,考虑到篇幅问题,下面只对相关属性做简单介绍。

它们详细的用法,可以参阅介绍后面对应的相关文章。

1.flex-direction:

此属性非常容易理解,从名称就可以猜测,它用于与方向相关的设置。

它可以设置容器主轴的方向,也就是项目默认的排列方向。

语法结构如下:

[CSS] 纯文本查看 复制代码
#box {
  flex-direction: row | row-reverse | column | column-reverse;
}

参数解析:

(1).row:默认值,默认主轴是水平的,并且左侧为main start,也就是起始位置。

(2).row-reverse:与row类似,主轴是水平的,但是方向相反,也就是右侧为main start。

(3).column:主轴为垂直方向,上侧为main start。

(4).column-reverse:主轴为垂直方向,下侧为main start。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215210ltgdygvmacdn0gae.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

关于此属性更多内容可以参阅CSS3 flex-direction一章节。

2.flex-wrap:

属性名称中包括单词"wrap",那么会联想到此属性功能与换行相关,比如overflow-wrap属性。

事实也是如此,此属性规定如果项目在轴线上排列不开,以何种方式换行。

语法结构如下:

[CSS] 纯文本查看 复制代码
#box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

参数解析如下:

(1)nowrap:默认值,不进行换行,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215258nyq79m4kr711r1cc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2).wrap:如果排列不开会自动换行,换行方式默认,自动转到下一行,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215322wjtrjjjjpvxfw0f8.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(3).wrap-reverse:很容易猜测,这个顺序是反的,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215344c6s64mzaya617pca.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

关于此属性更多内容可以参阅CSS3 flex-wrap一章节。

3.flex-flow属性:

如果明白了上面两个属性的功能,那也就等同于明白此属性的功能。

因为此属性就是上面两个属性的简写形式,可以认为是一个复合属性。

默认属性值是row nowrap。

语法结构:

[CSS] 纯文本查看 复制代码
#box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

掌握flex-direction和flex-wrap属性也就等同掌握了flex-flow属性。

更多关于此属性内容可以CSS3 flex-flow一章节。

4.justify-content属性:

此属性规定项目在主轴上的对齐方式。

语法结构:

[CSS] 纯文本查看 复制代码
#box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

参数解析如下:

(1).flex-start:默认值,规定项目从主轴的main start位置开始排列。

(2).flex-end:规定项目从主轴的main end位置开始排列。

(3).center :规定项目在主轴上居中排列。

(4).space-between:规定项目在主轴上两端对齐,且项目之间间隔均匀。

(5).space-around:规定项目在主轴方向两侧持有相同的空间,类似于外边距。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215511o8dbwttn8dpt4g26.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

更多关于此属性内容可以CSS3 justify-content一章节。

5.align-items属性:

前面都是介绍项目在主轴上的排列方式,不能厚此薄彼。

此属性规定项目在交叉轴上的排列方式。

语法结构:

[CSS] 纯文本查看 复制代码
#box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}


参数解析:

(1).flex-start:规定从交叉轴cross start方向开始排列。

(2).flex-end:规定从交叉轴cross end方向开始排列。

(3).center:规定项目在交叉轴中心点对齐。

(4).baseline:根据项目第一行文本的基线对齐。

(5).stretch:默认值,如果项目未设置高度或设为auto,将占满整个容器的高度。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215700kxoblgtwtggdforh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

关于此属性的更多内容可以参阅CSS3 align-items一章节。

6.align-content属性:

此属性与align-items属性极为类似,在某些情况两者表现完全一致。

当然两者是有区别的,具体参阅align-items与align-content区别一章节。

语法结构:

[CSS] 纯文本查看 复制代码
#box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

参数解析:

(1).flex-start:规定从交叉轴cross start方向开始排列。

(2).flex-end:规定从交叉轴cross end方向开始排列。

(3).center:规定项目在交叉轴中心点对齐。

(4).space-between:规定与交叉轴两端对齐,轴线之间的间隔平均分布。

(5).space-around:规定项目在交叉轴方向两侧持有相同的空间,类似于外边距。

(6).stretch:默认值,占满整个容器的交叉轴的高度。

更多关于此属性内容参阅CSS3 align-content一章节。

四.应用于项目的属性:

上面介绍的都是应用于容器的属性,当然也有应用于项目的属性。

同样,我们只通过图示进行理论阐述,更多内容可以参阅底部对应的文章。

1.order属性:

order翻译成汉语具有顺序的意思,此属性确实与项目的排列顺序相关。

属性值是数值类型,数值越小,排列越靠前,就和考试名次一样,默认值为0。

语法结构:

[CSS] 纯文本查看 复制代码
.item {
  order: <integer>;
}

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215827cpaxm8sxwpmzm3hm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

2.flex-grow属性:

grow翻译成函数具有增长的意思,此属性可以定义项目放大的倍数。

默认值为0,也就是不放大,当然放大必须有在父元素有多余空间的条件下。

语法结构:

[CSS] 纯文本查看 复制代码
.item {
  flex-grow: <number>; /* default 0 */
}

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215926iu40pd2dp00dr0hg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果属性值都为1,那么大家都平等了,将会平均分配空间,当然前提是父元素还有剩余的空间可以分配。

关于此属性的更多内容可以参阅CSS3 flex-grow一章节。

3.flex-shrink属性:

有放大倍数,自然也有缩小倍数。

此属性就是用来定义缩小倍数的,默认值为1,如果空间不足则自动缩小。

语法结构:

[CSS] 纯文本查看 复制代码
.item {
  flex-shrink: <number>; /* default 1 */
}

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215959mghc1wvhqqf95a8q.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

更多关于此属性的内容可以参阅CSS3 flex-shrink一章节。

4.剩余属性:

感觉文章的篇幅还是有点太长了,还有三个应用于项目的属性。

本文不再介绍,具体可以参阅如下三篇文章:

(1).flex-basis属性参阅CSS3 flex-basis一章节。

(2).flex属性参阅CSS3 flex一章节。

(3).align-self属性参阅CSS3 align-self一章节。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

上一篇:CSS white-space下一篇:CSS3 quotes

最新评论

返回顶部