传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

display:flex弹性布局

2017-10-18 21:42| 发布者: admin| 查看: 1222| 评论: 0|来自: 蚂蚁部落

传智播客
本文不纠结浏览器兼容性问题,专注于基本语法,兼容性问题会随着浏览器版本的提高,会自然而然解决。

特别说明:下面的所有图片来源于如下两篇文章:

(1).A Complete Guide to Flexbox

(2).A Visual Guide to CSS3 Flexbox Properties

一.什么是Flex弹性布局:

Flex是Flexible Box的缩写,也就是弹性布局的意思。

我们可以将任意的容器,规定为弹性布局,也就是Flex布局。

设定为弹性布局元素的子项目会对子项目产生一些影响,下面简单罗列一下常见的:

(1).float、clear和vertical-align属性无效。

(2).块级元素不会强制单独占一行。

(3).没有规定宽度的块级元素不会默认横向铺满父元素。

首先看一段代码实例:

[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>

上面的代码是一个简单的弹性布局代码实例;将一个容器设置为弹性布局可以使用如下代码:

[CSS] 纯文本查看 复制代码
#box{
  display: flex;
}

内联元素也可以设置为弹性布局,代码如下:

[CSS] 纯文本查看 复制代码
#box{
  display: inline-flex;
}

二.弹性布局的概念:

使用Flex布局的元素称作为Flex容器(flex container),简称"容器"。

容器的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/225307i086vsy97t85y960.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对图示进行一下简单介绍:

容器默认存在两根轴,水平主轴(main axis)和垂直交叉轴(cross axis),主轴的开始位置叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

特别说明:它不一定是水平的,这主要取决于“justify-content”属性。

三.容器的属性:

当前有六个属性作用于容器元素上:

(1).flex-direction属性可以参阅css3 flex-direction一章节。

(2).flex-wrap属性可以参阅css3 flex-wrap一章节。

(3).flex-flow属性可以参阅css3 flex-flow一章节。

(4).justify-content属性可以参阅css3 justify-content一章节。

(5).align-items属性可以参阅css3 align-items一章节。

(6).align-content属性可以参阅css3 align-content一章节。

具体可以参阅相关文章,下面也结合图示对它们做一下简单介绍。

3.1.flex-direction属性:

此属性决定了主轴方向,也就是项目的排列方向。

语法结构:

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

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/225502jc42u2as8n2a8844.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

属性值解析:

(1).row(默认值):主轴为水平方向,起点在左端。

(2).row-reverse:主轴为水平方向,起点在右端。

(3).column:主轴为垂直方向,起点在上沿。

(4).column-reverse:主轴为垂直方向,起点在下沿。

3.2 flex-wrap属性:

默认情况下,项目都排在一条线("轴线")上。

flex-wrap属性定义,如果一条轴线排不下,如何换行。

语法结构:

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

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/225556ybd9yy35bgbayd65.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

属性值解析:

(1)nowrap(默认):不换行。

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/225743zcwddll9oyye3cl0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(2)wrap:换行,第一行在上方。

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/225957ch5mf3x5x5weztwx.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

(3)wrap-reverse:换行,第一行在下方。

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/225927giqeeweodyqyad0o.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

3.3 flex-flow属性:

此属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

语法结构:

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

3.4 justify-content属性:

justify-content属性定义了项目在主轴上的对齐方式。

语法结构:

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

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/230114kys6l6fbeec60x9v.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

参数解析:

它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

(1).flex-start(默认值):左对齐

(2).flex-end:右对齐

(3).center: 居中

(4).space-between:两端对齐,项目之间的间隔都相等。

(5).space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

3.5 align-items属性:

此属性定义项目在交叉轴上如何对齐。

语法结构:

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

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/230219vr9frfxf099h9h9r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

属性值解析:

它能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

(1).flex-start:交叉轴的起点对齐。

(2).flex-end:交叉轴的终点对齐。

(3).center:交叉轴的中点对齐。

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

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

3.6 align-content属性:

此属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

语法结构:

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

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/230307xk7o11nz1hhfmno7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

属性值解析:

(1).flex-start:与交叉轴的起点对齐。

(2).flex-end:与交叉轴的终点对齐。

(3).center:与交叉轴的中点对齐。

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

(5).space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

(6).stretch(默认值):占满整个交叉轴。

四.项目的属性:

更多关于项目上的属性介绍可以参阅下面几篇文章:

(1).order属性可以参阅css3 order一章节。

(2).flex-grow属性可以参阅css3 flex-grow一章节。

(3).flex-shrink属性可以参阅css3 flex-shrink一章节。

(4).flex-basis属性可以参阅css3 flex-basis一章节。

(5).flex属性可以参阅css3 flex一章节。

(6).align-self属性可以参阅css3 align-self一章节。

下面简单介绍一下每一个属性。

4.1 order属性:

此属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

语法结构:

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

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/230454mh86cvkpkc8cskc3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

4.2.flex-grow属性:

此属性定义项目的放大比例,默认为0。

但是如果不存在剩余空间,也不放大。

语法结构:

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

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/230540cy5tdv592dzyydif.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。

4.3.flex-shrink属性:

此属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

语法结构:

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

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/230718fzj13vgjpqcccavr.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。

如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

4.4 flex-basis属性:

此属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。

浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

语法结构:

[CSS] 纯文本查看 复制代码
.item {
  flex-basis: <length> | auto; /* default auto */
}

4.5.flex属性:

此属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

语法结构:

[CSS] 纯文本查看 复制代码
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

4.6 align-self属性:

此属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。

默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

语法结构:

[CSS] 纯文本查看 复制代码
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/230853gkfol7w7kkwulii7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

该属性可能取6个值,除了auto,其他与align-items属性完全相同。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

上一篇:CSS3 column-span下一篇:CSS3 flex-direction

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:22 , Processed in 0.068524 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部