>

布局的传统解决方案sbf282.com,未经作者许可

- 编辑:澳门博发娱乐官网 -

布局的传统解决方案sbf282.com,未经作者许可

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

2015/09/02 · CSS · CSS3

原文出处: 郭锦荣   

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

新版本简介

新版本的Flexbox模型是2012年9月提出的工作草案,这个草案是由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的优秀特性并不是这一些,首先来一张它的属性图吧~

sbf282.com 1

首先我们来分析下这一张图,从第一个子节点可以看到Flexbox由Flex容器和Flex项目组成,容器即父元素,项目即子元素。他们之间的一些关系可以这样来表示:

sbf282.com 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;
}

刷新浏览器后的效果是:

sbf282.com 3

可以看到效果跟旧版本的-webkit-box是一样的。

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

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

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

sbf282.com 4

PS:可以看到,在一些比较旧的webkit内核的浏览器(Chrome,Safari)中,我们需要使用-webkit-flex来做兼容,但是这里我就省略了。

下面将逐一介绍flex布局的各个属性的基础用法:

CSS3弹性伸缩布局简介

2009年,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;
}

效果如下:

sbf282.com 5

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

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

sbf282.com 6

这个是从浏览器的右边往左边排列的。

此属性的属性值有:

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

大家不妨都试一下,看看每一个的效果如何。

旧版本(box)

首先看一下浏览器兼容情况:

sbf282.com 7

 

PS:浏览器兼容数据不一定很准确,不过相差不大。

下面将通过一个简单的实例来讲解旧版本的各个属性:

html代码:

<div> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</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;
}

此时刷新网页看到的结果是这样的:

sbf282.com 8

这个结果很正常吧!OK,现在我们给div元素设置为box,看看有什么变化:

CSS

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

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

我们再次刷新网页,结果是这样的:

sbf282.com 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属性

flex-wrap属性设置项目的换行方式(当容器宽度不足以容纳所有子项目时)。

CSS

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

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

此时结果如下:

sbf282.com 10

可以看到,当我把浏览器窗口缩小时,第三个p元素因为容纳不下而被挤下来了。

此属性的属性值有:

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

当我将flex-wrap属性设置为wrap-reverse时,运行后的效果就是变成这样:

sbf282.com 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;
}

此时的结果就是垂直排列:

sbf282.com 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正好相反了。

网页展示效果如下:

sbf282.com 13

主讲教师:李炎恢

网页布局(layout)是CSS的一个重点应用。

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。效果就是这样的:

sbf282.com 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;
}

这样我们的排序就是反序的了,运行结果为:

sbf282.com 15

此属性的属性值有:

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

flex-warp

[flex-wrap]属性控制伸缩容器是单行还是多行,也决定了侧轴方向(新的一行的堆放方向)。

  • flex-wrap:nowrap;伸缩容器单行显示,默认值;
  • flex-wrap:wrap;伸缩容器多行显示;伸缩项目每一行的排列顺序由上到下依次。
  • flex-wrap:wrap-reverse;伸缩容器多行显示,但是伸缩项目每一行的排列顺序由下到上依次排列。

网页效果见图;

sbf282.com 16

 

sbf282.com 17

justify-content属性

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

CSS

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

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

效果如下:

sbf282.com 18

可以看到所有项目平均分布,而且两端也有保留一半的空间。

此属性的属性值有:

  • 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;
}

这个就是默认靠齐方式:

sbf282.com 19

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 ;
}

这个就是以结束点靠齐:

sbf282.com 20

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 ;
}

这就是居中对齐效果:

sbf282.com 21

 

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 ;
}

这个就是平均分布效果:

sbf282.com 22

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;主轴和行内方向相反,从右到左,项目每一行由上到下排列(侧轴)。

网页效果如下:

sbf282.com 23

这里大家可以多自己去试试不同的组合。

本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解。

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

align-items属性

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

CSS

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

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

效果如下:

sbf282.com 24

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

  • 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;
}

效果如下:

sbf282.com 25

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 ;
}

效果如下:

sbf282.com 26

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 ;
}

效果如下:

sbf282.com 27

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;
}

效果如下:

sbf282.com 28

而如果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;
}

效果如下:

sbf282.com 29

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 ;
}

效果如下:

sbf282.com 30

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;
}

效果如下:

sbf282.com 31

当然也可以有些项目是固定宽度的,那么其他的项目也会分配剩余的宽度,比如这里第一个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;
}

效果如下:

sbf282.com 32

更多使用情况,大家可以自己慢慢去尝试。

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理解起来快一点:

sbf282.com 33

sbf282.com 34

 

sbf282.com 35

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;
}

此时的效果就是:

sbf282.com 36

其他属性值的效果同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;
}

效果如下:

sbf282.com 37

可以看到:第一个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;
}

那么效果就是这样的了:

sbf282.com 38

此时我们再给p元素设置一个固定的高度:

CSS

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

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

那么这时的效果就是:

sbf282.com 39

是不是很轻松就实现了这种效果呢!

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那样。

sbf282.com 40

一.新版本

2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

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;
}

效果如下:

sbf282.com 41

小结

好的,到这里旧版本的弹性布局基础知识点就都介绍了一下。由于篇幅过长,怕大家看着疲劳,新版本的弹性布局(flex)我将放在下一篇博客介绍。希望能帮到大家,同时尽请关注!

2 赞 6 收藏 评论

sbf282.com 42

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官方文档;

sbf282.com 43

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

新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案,这个草案是由 W3C 推出的最新语法。这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现了统一。

sbf282.com 44

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;
}

效果如下:

sbf282.com 45

Flex项目

终于写到关于伸缩项目的相关属性了,主要是3个,order,flex(flex-grow,flex-shrink,flex-basis的组合),align-self;用来比较多的是前两个。

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

Flex布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的Flex写法。

总结

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>

显示效果就这样了:

sbf282.com 46

属性值

说明

flex

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

inline-flex

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

以下内容主要参考了下面两篇文章:A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。

本文由胜博发-前端发布,转载请注明来源:布局的传统解决方案sbf282.com,未经作者许可