CSS3弹性伸缩布局,弹性伸缩布局

CSS3弹性伸缩布局(二)——flex布局

2015/09/02 · CSS ·
CSS3

原稿出处: 郭锦荣   

上一篇博客《CSS3弹性伸缩布局(一)——box布局》介绍了旧版本的box布局,而那篇博客将重要介绍最新版本的flex布局的基础知识。

新本子简介

新本子的Flexbox模型是二零一二年六月指出的劳作草案,那一个草案是由W3C
推出的摩登语法。这几个版本立志于指定专业,让新型的浏览器周密协作,在未来浏览器的更新换代中落到实处合并。

CSS3弹性伸缩布局(一)——box布局

2015/08/23 · CSS ·
CSS3

初稿出处: 郭锦荣   

自家对Flexbox布局情势的精通

2016/06/18 · CSS ·
Flexbox

正文小编: 伯乐在线 –
Tw93
。未经小编许可,禁止转发!
欢迎参与伯乐在线 专栏撰稿人。

Flexbox,一种CSS3的布局情势,也号称弹性盒子模型,用来为盒装模型提供最大的油滑。首先举一个板栗,以前大家是那样完结一个div盒子水平垂直居中的。在驾驭对象高宽的情事下,对居中元素相相比重定位,然后通过margin偏移的主意来促成。

<style> .container{ width: 600px; height: 400px; border: 1px solid
#000; position: relative; } .box{ width: 200px; height: 100px; border:
1px solid #000; position: absolute; left: 50%; top: 50%; margin-left:
-100px; margin-top:-50px; } </style> <div class=”container”>
<div class=”box”></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .container{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
    }
    .box{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top:-50px;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

设若使用了flex后,完毕起来就简单了,而且不必要团结去算,也不要求相对定位,只必要通过对伸缩容器定义八个属性,justify-content定义伸缩项目沿着主轴线的对齐格局为center,
align-items定义伸缩项目在侧轴(垂直于主轴)的对齐格局为center,具体如下:

<style> .container{ width: 600px; height: 400px; border: 1px solid
#000; display: flex; justify-content:center; align-items:center; }
.box{ width: 200px; //宽度可以为任意 height: 100px; //中度可以为随机
border: 1px solid #000; } </style> <div class=”container”>
<div class=”box”></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
.container{
    width: 600px;
    height: 400px;
    border: 1px solid #000;
    display: flex;
    justify-content:center;
    align-items:center;
}
.box{
    width: 200px;  //宽度可以为任意
    height: 100px; //高度可以为任意
    border: 1px solid #000;
}
</style>
<div class="container">
    <div class="box"></div>
</div>

骨子里Flexbox的精彩特性并不是那有的,首先来一张它的性能图吧~

亚洲必赢官网 1

第一大家来分析下这一张图,从首个头节点能够看出Flexbox由Flex容器和Flex项目整合,容器即父元素,项目即子元素。他们之间的一对涉嫌得以这么来表示:

亚洲必赢官网 2

那张图可以在接下去的性能分析中用到。

学学要点:

此间大家依旧一而再上一篇博客中的例子,使用新型版本的flex布局来达成均等的功力。

html代码:

XHTML

<div>
<p>暴发过的上空仍然看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很彻底啊是高科学和技术傻空给暴发过的半空中照旧看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很彻底啊是高科学和技术傻空给</p>
<p>暴发过的上空依旧看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很彻底啊是高科学技术傻空给</p>
<p>爆发过的空中依旧看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

1
2
3
4
5
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

基础的css代码:

CSS

p{ width:150px; border:3px solid lightblue; background:lightgreen;
padding:5px; margin:5px; }

1
2
3
4
5
6
7
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

那儿大家给div元素设置display属性为flex :

CSS

div{ display:flex; }

1
2
3
div{
    display:flex;
}

刷新浏览器后的成效是:

亚洲必赢官网 3

可以阅览效果跟旧版本的-webkit-box是同样的。

在新本子中设置为弹性伸缩盒的display属性值有三个:

  • flex : 将容器盒模型作为块级弹性伸缩盒突显
  • inline-flex : 将容器盒模型作为内联级弹性伸缩盒展现

看一下新本子的flex布局的浏览器兼容景况:

亚洲必赢官网 4

PS:可以看出,在一些相比旧的webkit内核的浏览器(Chrome,Safari)中,大家需要利用-webkit-flex来做同盟,可是此地我就大约了。

上边将依次介绍flex布局的次第属性的根基用法:

CSS3弹性伸缩布局简介

二零零六年,W3C指出了一种全新的方案—-Flex布局(即弹性伸缩布局),它能够省事、完整、响应式地完结各样页面布局,包含间接令人很高烧的垂直水平居中也变得很简单地就缓解了。不过那一个布局方式还地处W3C的草案阶段,并且它还分为旧版本、新本子以及混合过渡版本两种不一样的编码格局。其中混合过渡版本首如若对准IE10做了相当。近年来flex布局用得比较多的依然在移动端的布局,所以本次重大助教一下旧版本和新本子在运动端拔取的各种知识点,让大家对地下的flex布局熟练起来。

Flex容器

1.新版本

flex-direction属性

flex-direction属性用于安装伸缩项目标排列情势。

CSS

div{ display:flex; flex-direction:column; }

1
2
3
4
div{
    display:flex;
    flex-direction:column;
}

效能如下:

亚洲必赢官网 5

结果就是容器内的装有项目比照从上到下排列的。

当您设置为row-reverse时,效果就是:

亚洲必赢官网 6

本条是从浏览器的左边往右边排列的。

此属性的属性值有:

  • row : 设置从左到右排列
  • row-reverse : 设置从右到左排列
  • column : 设置从上到下排列
  • column-reverse : 设置从下到上排列

世家不妨都试一下,看看每一个的意义怎样。

旧版本(box)

先是看一下浏览器包容情形:

亚洲必赢官网 7

 

PS:浏览器包容数据不必然很准确,可是距离不大。

下边将经过一个粗略的实例来讲学旧版本的各类属性:

html代码:

<div>
<p>发生过的长空依然看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很彻底啊是高科技(science and technology)傻空给发生过的空中照旧看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很彻底啊是高科学技术傻空给</p>
<p>暴发过的半空中照旧看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很彻底啊是高科学技术傻空给</p>
<p>暴发过的上空仍然看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

1
2
3
4
5
<div>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>

亚洲必赢官网,可以见见大家那几个事例是很不难的,一个div元素内含有四个p元素,它们都是块元素(block)。接下来给段落加一些基础的体制:

CSS

p{ width:150px; border:3px solid lightblue; background:lightgreen;
padding:5px; margin:5px; }

1
2
3
4
5
6
7
p{
    width:150px;
    border:3px solid lightblue;
    background:lightgreen;
    padding:5px;
    margin:5px;
}

那时候刷新网页看到的结果是如此的:

亚洲必赢官网 8

那一个结果很健康吧!OK,现在我们给div元素设置为box,看看有何变化:

CSS

div{ display:-webkit-box; display:box; }

1
2
3
4
div{
    display:-webkit-box;
    display:box;
}

咱俩再度刷新网页,结果是那样的:

亚洲必赢官网 9

探望了吧,现在每一个p元素都改为一个box了,那就是弹性布局的神奇所在!

在上头中,我们将div元素的display设置为box,那就是旧版本的弹性布局。对于相比较旧的浏览器版本,大家须要充分-webkit-前缀。

旧版本的弹性布局有多个属性值:

  •  box : 将容器盒模型作为块级弹性伸缩盒突显
  •   inline-box : 将容器盒模型作为内联级弹性伸缩盒呈现

PS:大家知晓块级它是占据整行的,比如div元素;而内联级不占用整行,比如span元素。可是大家设置了全套盒子,他们都不占用,保持一致。似乎大家地点的例证一样,给div元素设置了盒子,那么div元素里面的p元素就不占用了。

下边介绍旧版本弹性布局的一一属性:

display:flex

当我们运用flexbox布局时候,需求先给父容器的display值定位flex(块级)或者inline-flex(行内级)。

当使用了那几个值之后,伸缩容器会为情节建立新的伸缩格式化上下文(FFC),它的上下文突显效果和BFC根元素相同(BFC特性:浮动不会闯入伸缩容器,且伸缩容器的界限不会与其情节边界叠加)。

伸缩容器不是块容器,因而有些设计用来决定块布局的属性,在伸缩布局中不适用,更加是多栏(column),float,clear,vertical-align那几个属性。

 

flex-wrap属性

CSS3弹性伸缩布局,弹性伸缩布局。flex-wrap属性设置项目标换行格局(当容器宽度不足以容纳所有子项目时)。

CSS

div{ display:flex; flex-wrap:wrap; }

1
2
3
4
div{
    display:flex;
    flex-wrap:wrap;
}

此刻结果如下:

亚洲必赢官网 10

可以看看,当自家把浏览器窗口减弱时,首个p元素因为容纳不下而被挤下来了。

此属性的属性值有:

  • nowrap : 默许值,都在一行或者一列中显示
  • wrap : 伸缩项目不可能包容时,自动换行
  • wrap-reverse : 伸缩项目不能容纳时,自动换行,方向和wrap相反

当自身将flex-wrap属性设置为wrap-reverse时,运行后的机能就是变成那样:

亚洲必赢官网 11

box-orient 属性

box-orient属性首要达成盒子内部因素的流动方向。

CSS

div{ display:-webkit-box; display:box; -webkit-box-orient:vertical;
box-orient:vertical; }

1
2
3
4
5
6
div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:vertical;
    box-orient:vertical;
}

那时的结果就是笔直排列:

亚洲必赢官网 12

 

此属性的属性值有:

  • horizontal : 伸缩项目从左到右水平排列
  •     vertical  : 伸缩项目从上到下垂直排列
  • inline-axis : 伸缩项目沿着内联轴排列展现
  • block-axis : 伸缩项目沿着块轴排列显示

世家不妨试一下:horizontal 和 inline-axis 都是程度排列,而vertical 和
block-axis 都是垂直排列。

flex-direction

[flex-direction]属性用来支配上图中伸缩容器中主轴的样子,同时也控制了伸缩项目标主旋律。

  • flex-direction:row;也是默许值,即主轴的取向和常规的取向同样,从左到右排列。
  • flex-direction:row-reverse;和row的趋向相反,从右到左排列。
  • flex-direction:column;从上到下排列。
  • flex-direction:column-reverse;从下到上排列。
    以上只针对ltr书写方式,对于rtl正好相反了。

网页突显效果如下:

亚洲必赢官网 13

助教教授:李怡恢

flex-flow属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的笔记属性。

CSS

div{ display:flex; flex-flow:row wrap; }

1
2
3
4
div{
    display:flex;
    flex-flow:row wrap;
}

上边这几个事例就一定于设置了flex-direction为row,flex-wrap为wrap。效果就是这样的:

亚洲必赢官网 14

box-direction属性

box-direction 属性重即使安装伸缩容器中的流动顺序。

CSS

div{ display:-webkit-box; display:box; -webkit-box-direction:reverse;
box-direction:reverse; }

1
2
3
4
5
6
div{
    display:-webkit-box;
    display:box;
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

如此大家的排序就是反序的了,运行结果为:

亚洲必赢官网 15

此属性的属性值有:

  • normal  : 正常顺序,默许值
  • reverse : 反序

flex-warp

[flex-wrap]性能决定伸缩容器是单行照旧多行,也决定了侧轴方向(新的一行的积聚方向)。

  • flex-wrap:nowrap;伸缩容器单行显示,默许值;
  • flex-wrap:wrap;伸缩容器多行展现;伸缩项目每一行的排列顺序由上到下各样。
  • flex-wrap:wrap-reverse;伸缩容器多行突显,可是伸缩项目每一行的排列顺序由下到上相继排列。

网页效果见图;

亚洲必赢官网 16

 

justify-content属性

justify-content
在当灵活容器内的各种没有占用主轴上有所可用的空中时对齐容器内的各项(水平)。

CSS

div{ display:flex; justify-content:space-around; }

1
2
3
4
div{
    display:flex;
    justify-content:space-around;
}

效率如下:

亚洲必赢官网 17

可以见见所有连串平均分布,而且双方也有保留一半的空间。

此属性的属性值有:

  • flex-start : 伸缩项目以初阶点靠齐
  • flex-end : 伸缩项目以甘休点靠齐
  • center : 伸缩项目以中央点靠齐
  • space-between : 伸缩项目平均分布
  • space-around : 伸缩项目平均分布,但两者保留一半的空中

因为这么些职能照旧很简单就精晓了,那里我就不一一演示了。

box-pack属性

box-pack 属性用于伸缩项目的遍布格局。

此属性的属性值有:

  • start   :  伸缩项目以初叶点靠齐
  •   end   :  伸缩项目以截至点靠齐
  • center :  伸缩项目以焦点点靠齐
  • justify  :  伸缩项目平局分布

下边大家都试一下各个属性值的效率:

1.start属性值

CSS

div{ -webkit-box-pack:start; box-pack:start; }

1
2
3
4
div{
    -webkit-box-pack:start;
    box-pack:start;
}

以此就是默许靠齐方式:

亚洲必赢官网 18

2.end属性值

CSS

div{ -webkit-box-pack: end ; box-pack: end ; }

1
2
3
4
5
6
div{
    -webkit-box-pack:
end ;
    box-pack:
end ;
}

那么些就是以停止点靠齐:

亚洲必赢官网 19

3.center属性值

CSS

div{ -webkit-box-pack: center ; box-pack: center ; }

1
2
3
4
5
6
div{
    -webkit-box-pack:
center ;
    box-pack:
center ;
}

那就是居中对齐效果:

亚洲必赢官网 20

 

4.justify属性值

CoffeeScript

div{ -webkit-box-pack: justify ; box-pack: justify ; }

1
2
3
4
5
6
div{
    -webkit-box-pack:
justify ;
    box-pack:
justify ;
}

这些就是平均分布效果:

亚洲必赢官网 21

PS:垂直方向上也是同样的法则,但如果height为auto的话,效果将出不来。所以需求给height设置一个定高(最好比默许景况高)。那时,就能看出在笔直方向上的功效了。那里我就不再赘言了。

flex-flow

[flex-flow]特性为flex-direction(主轴方向)和flex-wrap(侧轴方向)的缩写,四个属性决定了伸缩容器的主轴与侧轴。

  • flex-flow:[flex-direction][flex-wrap];默许值为row nowrap;

举五个栗子:

  • flex-flow:row;也是默许值;主轴是行内方向,单行突显,不换行;
  • flex-flow:row-reverse
    wrap;主轴和行内方向相反,从右到左,项目每一行由上到下排列(侧轴)。

网页效果如下:

亚洲必赢官网 22

那边我们能够多和气去试试差其余组成。

本章紧要探索 HTML5 中
CSS3 提供的用来兑现未来响应式弹性伸缩布局方案,那里做一个上马的询问。

align-items属性

align-items
属性规定灵活容器内的各项的默许对齐格局,和旧版本中的box-align一样,处理伸缩项目容器的额外空间。

CSS

div{ display:flex; align-items:center; }

1
2
3
4
div{
    display:flex;
    align-items:center;
}

效率如下:

亚洲必赢官网 23

那么,此属性的属性值有:

  • flex-start : 伸缩项目以顶部为尺度,清理下部的附加空间
  • flex-end : 伸缩项目以底部为准绳,清理上部的额外空间
  • center : 伸缩项目以中间为原则,平均清理上下部的附加空间
  • baseline : 伸缩项目以基线为标准,清理额外的长空
  • stretch : 伸缩项目填充整个容器,默许值

这几个职能跟旧版本的box-align基本是千篇一律的,具体怎么用,大家自己试一下就明白了。

box-align属性

box-align 属性用来拍卖伸缩容器的附加空间。

此属性的属性值有:

  •      start  : 伸缩项目以顶部为原则,清理下部额外空间
  •      end    : 伸缩项目以底部为尺度,清理上部额外空中
  •    center : 伸缩项目以大旨为准绳,平均清理内外部额外空间
  • baseline : 伸缩项目以基线为尺度,清理额外的空间
  • stretch  : 伸缩项目填充整个容器,默许值

如出一辙的,大家将试一下每个属性值的效益:

1.start属性值

CSS

div{ display:-webkit-box; display:box; -webkit-box-align:start;
box-align:start; }

1
2
3
4
5
6
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:start;
    box-align:start;
}

效率如下:

亚洲必赢官网 24

2.end属性值

CSS

div{ display:-webkit-box; display:box; -webkit-box-align: end ;
box-align: end ; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
end ;
    box-align:
end ;
}

意义如下:

亚洲必赢官网 25

3.center属性值

CSS

div{ display:-webkit-box; display:box; -webkit-box-align: center ;
box-align: center ; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
center ;
    box-align:
center ;
}

功能如下:

亚洲必赢官网 26

4.baseline属性值

设若box-orient是内嵌单轴或横向,所有的子元素都放到他们的基线对齐。

CSS

div{ display:-webkit-box; display:box; -webkit-box-orient:horizontal;
box-orient:horizontal; -webkit-box-align:baseline; box-align:baseline; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    -webkit-box-align:baseline;
    box-align:baseline;
}

成效如下:

亚洲必赢官网 27

而一旦box-orient是块轴或者垂直方向的,那么具有的子元素都将居中垂直排列。

CSS

div{ display:-webkit-box; display:box; -webkit-box-orient: vertical ;
box-orient:vertical; -webkit-box-align:baseline; box-align:baseline; }

1
2
3
4
5
6
7
8
9
div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:
vertical ;
    box-orient:vertical;
    -webkit-box-align:baseline;
    box-align:baseline;
}

作用如下:

亚洲必赢官网 28

5.stretch属性值

不无子元素拉伸以填充包蕴区块。

CSS

div{ display:-webkit-box; display:box; -webkit-box-align: stretch ;
box-align: stretch ; }

1
2
3
4
5
6
7
8
div{
    display:-webkit-box;
    display:box;
    -webkit-box-align:
stretch ;
    box-align:
stretch ;
}

职能如下:

亚洲必赢官网 29

box-flex属性

box-flex
属性可以使用浮点数分配伸缩项目标百分比。此属性是给容器内的项目安装的,它们会根据父容器的增进率来分配它们所占的比例:

CSS

p:nth-child(1){ -webkit-box-flex:1; box-flex:1; } p:nth-child(2){
-webkit-box-flex:3; box-flex:3; } p:nth-child(3){ -webkit-box-flex:1;
box-flex:1; }

1
2
3
4
5
6
7
8
9
10
11
12
p:nth-child(1){
    -webkit-box-flex:1;
    box-flex:1;
}
p:nth-child(2){
    -webkit-box-flex:3;
    box-flex:3;
}
p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

功用如下:

亚洲必赢官网 30

理所当然也足以稍微连串是固定宽度的,那么其余的门类也会分配剩余的增幅,比如那里首先个p元素设置为一定宽度:

CSS

p:nth-child(2){ -webkit-box-flex:2; box-flex:2; } p:nth-child(3){
-webkit-box-flex:1; box-flex:1; }

1
2
3
4
5
6
7
8
p:nth-child(2){
    -webkit-box-flex:2;
    box-flex:2;
}
p:nth-child(3){
    -webkit-box-flex:1;
    box-flex:1;
}

效益如下:

亚洲必赢官网 31

更多使用意况,大家可以团结逐步去尝尝。

justify-content

[justify-content]用以定义伸缩项目在主轴上面的的对齐形式,当一行上的拥有伸缩项目都不能伸缩或可伸缩然而曾经达标其最大尺寸时,这一属性才会对结余的半空中拓展分配。当项目溢出某一行时,这一性质也会在类型的对齐上强加一些控制。

  • justify-content:flex-start;伸缩项目向主轴的先导地方上马对齐,前面的每元素紧挨着前一个要素对齐。
  • justify-content:flex-end;伸缩项目向主轴的了断地方对齐,前边的每一个元素紧挨着后一个因素对齐。
  • justify-content:center;伸缩项目互相对齐并在主轴下面处于居中,并且第二个元素到主轴源点的相距等于最终一个因素到主轴终点的地点。以上3中都是“捆绑”在一个独家靠左、靠右、居中对齐。
  • justify-content:space-between;伸缩项目平均的分配在主轴上边,并且第二个要素和主轴的起源紧挨,最终一个元素和主轴上终点紧挨,中间剩余的伸缩项目在保管两两间隔相等的情况下展开平分。
  • justify-content:space-around;伸缩项目平均的遍布在主轴上面,并且第四个元素到主轴起源距离和结尾一个因素到主轴终点的距离相等,且等于中间元素两两的区间的一半。完美的平均分配,那几个布局在阿里系中很普遍。

要么看demo领悟起来快一些:

亚洲必赢官网 32

亚洲必赢官网 33

 

align-self属性

align-self 和align-items
一样,都是清理额外空间,但它是单身设置某一个伸缩项目的。所有的值和align-itmes
一致。

CSS

p:nth-child(2){ align-self:center; }

1
2
3
p:nth-child(2){
    align-self:center;
}

此时的功用就是:

亚洲必赢官网 34

其它属性值的出力同align-items,那里就不赘述。

box-ordinal-group 属性

box-ordinal-group 属性可以设置伸缩项目标体现地方。

CSS

p:nth-child(1){ -webkit-box-ordinal-group:2; box-ordinal-group:2; }
p:nth-child(2){ -webkit-box-ordinal-group:3; box-ordinal-group:3; }
p:nth-child(3){ -webkit-box-ordinal-group:1; box-ordinal-group:1; }

1
2
3
4
5
6
7
8
9
10
11
12
p:nth-child(1){
    -webkit-box-ordinal-group:2;
    box-ordinal-group:2;
}
p:nth-child(2){
    -webkit-box-ordinal-group:3;
    box-ordinal-group:3;
}
p:nth-child(3){
    -webkit-box-ordinal-group:1;
    box-ordinal-group:1;
}

功用如下:

亚洲必赢官网 35

可以看出:第四个p元素排在了第二,第一个p元素排在了第三,第八个p元素排在了第一。可以独立给某一个p元素设置此属性,其余门类会循途守辙原先的相继做改变。

OK,那么旧版本的具备属性就概括的牵线完了,越多结合的用法照旧基于要求自己多下手去训练一下。

这边举一个程度垂直居中的例子:

CSS

div{ display:-webkit-box; display:box; height:500px; border:1px solid
#f00; -webkit-box-pack:center; box-pack:center;
-webkit-box-align:center; box-align:center; }

1
2
3
4
5
6
7
8
9
10
div{
    display:-webkit-box;
    display:box;
    height:500px;
    border:1px solid #f00;
    -webkit-box-pack:center;
    box-pack:center;
    -webkit-box-align:center;
    box-align:center;
}

那么效果就是这么的了:

亚洲必赢官网 36

此刻我们再给p元素设置一个固定的可观:

CSS

p{ width:150px; height:200px; }

1
2
3
4
p{
    width:150px;
    height:200px;
}

那就是说此时的成效就是:

亚洲必赢官网 37

是或不是很自在就落实了那种效率呢!

align-items

[align-items]用来定义伸缩项目在侧轴的对齐方式,那看似于[justify-content]属性,不过是另一个主旋律。(flex-directon和flex-wrap是有的,justify-content和align-items是有的,前者分别定义主轴和侧轴的方向,后者分别定义主轴和侧轴中项目标对齐方式)。

  • align-items:flex-start;伸缩项目在侧轴起源边的异地距紧靠住该行在侧轴起源的边。
  • align-items:flex-end;伸缩项目在侧轴终点边的外地距靠住该行在侧轴终点的边。
  • align-items:center;伸缩项目标外地距在侧轴上居中放置。
  • align-items:baseline;如若伸缩项目标行内轴与侧轴为同一条,则该值与[flex-start]同样。
    其余景况下,该值将参加基线对齐。
  • align-items:stretch;伸缩项目拉伸填充整个伸缩容器。此值会使项目标外地距盒的尺寸在根据「min/max-width/height」属性的范围下尽可能接近所在行的尺码。

上面demo只浮现center和stretch的板栗,其他多少个能够参考flex-start和flex-end这样。

亚洲必赢官网 38

一.新版本

flex属性

flex 属性和旧版本中的box-flex 类似,用来控制伸缩容器的比重分红。

CSS

p:nth-child(1) { flex: 1; } p:nth-child(2) { flex: 3; } p:nth-child(3) {
flex: 1; }

1
2
3
4
5
6
7
8
9
p:nth-child(1) {
flex: 1;
}
p:nth-child(2) {
flex: 3;
}
p:nth-child(3) {
flex: 1;
}

功效如下:

亚洲必赢官网 39

小结

好的,到那边旧版本的弹性布局基础知识点就都介绍了须臾间。由于篇幅过长,怕我们望着疲惫,新本子的弹性布局(flex)我将身处下一篇博客介绍。希望能帮到大家,同时尽请关切!

2 赞 6 收藏
评论

亚洲必赢官网 40

align-content

[align-content]特性可以用来调准伸缩行在伸缩容器里的对齐格局,那与调准伸缩项目在主轴上对齐格局的[justify-content]属性类似。只可是那里元素是以一行为单位。请留心本属性在唯有一行的伸缩容器上尚无效果。当使用flex-wrap:wrap时候多行效果就出去了。

JavaScript

align-content: flex-start || flex-end || center || space-between ||
space-around || stretch;

1
align-content: flex-start || flex-end || center || space-between || space-around || stretch;
  • align-content: stretch;默许值,各行将会展开以占用剩余的半空中。
  • 其余可以参见[justify-content]用法。

现实图片来至w3.org官方文档;

亚洲必赢官网 41

太麻烦。写不下去了,摔。

新本子的 Flexbox 模型是 2012 年 9 月提出的行事草案,这一个草案是由
W3C 推出的最新语法。那一个本子立志于指定专业,让新型的浏览器周全合营,在将来浏览器的更新换代中落实了联合。

order属性

order 属性和旧版本的box-ordinal-group 属性一样控制伸缩项目出现的顺序。

CSS

p:nth-child(1) { order: 2; } p:nth-child(2) { order: 3; } p:nth-child(3)
{ order: 1; }

1
2
3
4
5
6
7
8
9
p:nth-child(1) {
    order: 2;
}
p:nth-child(2) {
    order: 3;
}
p:nth-child(3) {
    order: 1;
}

效果如下:

亚洲必赢官网 42

Flex项目

百川归海写到关于伸缩项目标连锁属性了,首假如3个,order,flex(flex-grow,flex-shrink,flex-basis的三结合),align-self;用来相比较多的是前七个。

先是,设置伸缩盒的 display 有如下四个属性值:

总结

flex布局就算眼前的包容性还不是很好,不过将来自然是很热的布局形式。自己也是近年来才接触flex布局,为了加固那么些骨干的知识点,我就写了那两篇博客。尽管我晓得自己总计得不是很好,但根本仍然为着便于自己和那一个还没接触过flex布局的博友们。

order

有一种用法相比多,想设置一组中有八个因素一个排第一,此外一个排最终,主索要将第二个的order:-1;另一个为order:0;那样就好了。

诸如大家想操纵一个container中有4个box,想box4为一个显得,box1为终极一个来得。只须要那样

<style> .container{ display: flex; } .box1{ order:1; } .box4{
order:-1; } </style> <div class=”container”> <div
class=”box1″>1</div> <div class=”box2″>2</div>
<div class=”box3″>3</div> <div
class=”box4″>4</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.container{
        display: flex;
    }
    .box1{
        order:1;
    }
    .box4{
        order:-1;
    }
</style>
<div class="container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</div>

来得效果就这么了:

亚洲必赢官网 43

属性值

说明

flex

将容器盒模型作为块级弹性伸缩盒显示(新版本)

inline-flex

将容器盒模型作为内联级弹性伸缩盒显示(新版本)

最后

在那边我引进一下阮一峰写的两篇关于flex布局的博客,写得老大好:

flex

[flex]性能可以用来指定可伸缩长度的部件,是flex-grow(伸张比例),flow-shrink(缩小比例),flex-basis(伸缩基准值)那个七个属性的缩写写法,指出我们使用缩写的法子而不是独自来使用那3个属性。

JavaScript

flex:none | [ <‘flex-grow’> ?<‘flew-shrink’> ||
<‘flow-basis’>] //
flex-grow是必须得flex-shrink和flow-basis是可选的

1
2
flex:none | [ <‘flex-grow’> ?<‘flew-shrink’> || <‘flow-basis’>]
// flex-grow是必须得flex-shrink和flow-basis是可选的
  • flex-grow:;其中number作为增加比例,没有单位,初步值是0,首要用以决定伸缩容器剩余空间按百分比应增加多少空间。
  • flex-grow:;其中number作为减弱比例,没有单位,初步值是1,也就是多余空间是负值的时候此伸缩项目相对于伸缩容器里其余伸缩项目能收缩的上空比例,在收缩的时候裁减比率会以[flex-basis]伸缩基准值加权。
  • flex-basis:|auto;默许是auto也就是根据可伸缩比率总计出剩余空间的遍布从前,伸缩项目主轴长度的序幕数值。若在「flex」缩写省略了此部件,则「flex-basis」的指定值是长度零。

flex-basis用图来代表就是这么:

亚洲必赢官网 44

//半数以上不必要前缀

Flex 布局教程:语法篇:

align-self

[align-self]用来在单独的伸缩项目上覆写默许的对齐格局,这几个特性是用来覆盖伸缩容器属性align-items对每一行的对齐情势。也就是说在默认的情事下那八个值是相当的。

JavaScript

align-self: auto | flex-start | flex-end | center | baseline | stretch

1
align-self: auto | flex-start | flex-end | center | baseline | stretch
div {
    display: flex;
}

Flex 布局教程:实例篇:

1 赞 2 收藏
评论

亚洲必赢官网 45

自己的见识

讲了这么多他们的运用,大家来看一看flexbox布局的包容性。

切实我们可以见那几个网站:caniuse

亚洲必赢官网 46

在PC端其实很明朗了,基本上主流的浏览器都早已卓绝了flex的拔取,然而到了运动端就不是那么好了,尤其是国内浏览器,考虑到uc浏览器占了花边,可是uc从图中看来只包容flex最老的一个版本,也就是二〇〇九年的本子,即display:box;很多现行flex的优异特性到了它上边都不般配了,所以提议大家在行使的时候,假使2009版本可以满意开发要求的话,仍然去行使2009本子,那样风险更小。

然则假诺想包容三个浏览器,能够运用淡雅降级的主意来利用,那里推荐一个scss的sass-flex-mixin,那样就可以使用新型的写法,并且极度半数以上浏览器了。

深信flexbox布局在后头的运动端会用得越多的。

1 赞 13 收藏
评论

属性

IE

Firefox

Chrome

Opera

Safari

带前缀

21 ~ 28

7.0

不带前缀

11+

20+

29+

12.1

关于小编:Tw93

亚洲必赢官网 47

简介还没赶趟写 :)
个人主页 ·
我的篇章 ·
5 ·
 

亚洲必赢官网 48

 从那张表可以观察,唯有 webkit 引擎的浏览器 Chrome 和
Safari 的本子要求添加-webkit-,而 Chrome 浏览器 29 版本之后可以概括了。

1.flex-direction

flex-direction 属性和旧版本 box-orient
属性一样,都是安装伸缩项目的排列方式。

//设置从上往下排列 

div {
    flex-direction: column;
}

属性值

说明

row

设置从左到右排列

row-reverse

设置从右到左排列

column

设置从上到下排列

column-reverse

设置从下到上排列

2.flex-wrap

flex-wrap 属性类似与旧版本中的 box-lines,不过 box-lines
大家尚无讲解,原因是没有浏览器辅助它。

//设置不能兼容时,自动换行 

div {
    -ms-flex-wrap: wrap;
}

属性值

说明

nowrap

默认值,都在一行或一列显示

wrap

伸缩项目无法容纳时,自动换行

wrap-reverse

伸缩项目无法容纳时,自动换行,方向和 wrap 相反

3.flex-flow

flex-flow 属性是会聚了排列方向和决定换行的简写方式。

//简写方式

div {
    flex-flow: row wrap;
}

4.justify-content

justify-content 属性和旧版本中的 box-pack 一样,设置伸缩项目的对其情势。

//根据基本点对齐 

div {
    justify-content: space-around;
}

属性值

说明

flex-start

伸缩项目以起始点靠齐

flex-end

伸缩项目以结束点靠齐

center

伸缩项目以中心点靠齐

space-between

伸缩项目平局分布

space-around

同上,但两端保留一半的空间

5.align-items

align-items 属性和旧版本中的 box-align
一样,处理伸缩项目容器的额外空间。

//处理额外空间 

div {
    align-itmes: center;
}

属性值

说明

flex-start

伸缩项目以顶部为基准,清理下部额外空间

flex-end

伸缩项目以底部为基准,清理上部额外空间

center

伸缩项目以中部为基准,平均清理上下部额外空间

baseline

伸缩项目以基线为基准,清理额外的空间

stretch

伸缩项目填充整个容器,默认

6.align-self

align-self 和 align-items
一样,都是清理额外空间,但它是单独设置某一个伸缩项目标。所有的值和
align-itmes 一致。

//单独设置清理额外空中

p:nth-child(2) {
    align-self: center;
}

7.flex

flex 属性和旧版本中的 box-flex 类似,用来支配伸缩容器的比重分红。

//设置比例分红 

p:nth-child(1) {
    flex: 1;
}

p:nth-child(2) {
    flex: 3;
}

p:nth-child(3) {
    flex: 1;
}

8.order

order 属性和 box-ordinal-group 属性一样控制伸缩项目出现的顺序。

//设置伸缩项目逐一

p:nth-child(1) {
    order: 2;
}

p:nth-child(2) {
    order: 3;
}

p:nth-child(3) {
    order: 1;
}
网站地图xml地图