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

新版本简介

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

这里我们还是继续上一篇博客中的例子,使用最新版本的flex布局来实现相同的效果。

html代码:

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

基础的css代码:

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

此时我们给div元素设置display属性为flex :

div{
display:flex;
}

刷新浏览器后的效果是:

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

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

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

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

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

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

flex-direction属性

flex-direction属性用于设置伸缩项目的排列方式。

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

效果如下:

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

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

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

此属性的属性值有:

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

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

flex-wrap属性

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

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

此时结果如下:

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

此属性的属性值有:

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

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

flex-flow属性

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

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

上面这个例子就相当于设置了flex-direction为row,flex-wrap为wrap。效果就是这样的:

justify-content属性

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

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

效果如下:

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

此属性的属性值有:

  • flex-start : 伸缩项目以起始点靠齐
  • flex-end : 伸缩项目以结束点靠齐
  • center : 伸缩项目以中心点靠齐
  • space-between : 伸缩项目平均分布
  • space-around : 伸缩项目平均分布,但两端保留一半的空间

因为这些效果还是很容易就理解了,这里我就不一一演示了。

align-items属性

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

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

效果如下:

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

  • flex-start : 伸缩项目以顶部为基准,清理下部的额外空间
  • flex-end : 伸缩项目以底部为基准,清理上部的额外空间
  • center : 伸缩项目以中部为基准,平均清理上下部的额外空间
  • baseline : 伸缩项目以基线为基准,清理额外的空间
  • stretch : 伸缩项目填充整个容器,默认值

这些效果跟旧版本的box-align基本是一样的,具体怎么用,大家自己试一下就知道了。

align-self属性

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

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

此时的效果就是:

其他属性值的效果同align-items,这里就不赘述。

flex属性

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

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

效果如下:

order属性

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

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

效果如下:

总结

flex布局虽然目前的兼容性还不是很好,不过未来肯定是很热的布局方式。自己也是最近才接触flex布局,为了巩固这些基本的知识点,我就写了这两篇博客。虽然我知道自己总结得不是很好,但主要还是为了方便自己和那些还没接触过flex布局的博友们。

最后

在这里我推荐一下阮一峰写的两篇关于flex布局的博客,写得非常好:

Flex 布局教程:语法篇:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 布局教程:实例篇:

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

若需转载,请注明出处,谢谢!

CSS3弹性伸缩布局(二)——flex布局的更多相关文章

  1. CSS3弹性盒模型,Flex布局教程

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

  2. css3弹性伸缩布局(一)—————flex布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...

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

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

  4. 弹性布局(Flex布局)整理

    一.  弹性布局 一个好的网站都有让用户看上去很舒服的布局,一个网站的布局也会或多或少影响到它的浏览量,看完阮大神的博客,就想把弹性布局整理一下. 在平时的我们常用的布局类型有以下几种: 1.浮动+定 ...

  5. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  6. 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  7. cdispaly的Grid布局与Flex布局

    cdispaly的Grid布局与Flex布局 Gird 布局与 Flex 布局有一定的相似性,都是对容器的内部项目进行划分. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布局 ...

  8. CSS3弹性伸缩布局(下)——flex布局

    新版本 新版本的flex布局模型是2012年9月提出的工作草案,这个草案是由W3C推出的最新语法,这个版本立志于指定标准,让新式的浏览器全面兼容,在未来的浏览器更新换代中实现统一. 目前几乎大部分的浏 ...

  9. 第 29 章 CSS3 弹性伸缩布局[下]

    学习要点: 1.新版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.新版本 新版本的 Flexbox 模型是 201 ...

随机推荐

  1. Javascript的一种代码结构方式——插件式

    上几周一直在做公司的webos的前端代码的重构,之中对javascript的代码进行了重构(之前的代码耦合严重.拓展.修改起来比较困难),这里总结一下当中使用的一种代码结构——插件式(听起来怎么像独孤 ...

  2. Android Java 自定义异常

    1.自定义异常 package com; public class ZeroException extends Exception { private static final long serial ...

  3. iOS设计模式之工厂方法模式

    工厂方法模式 基本理解 工厂方法模式:定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 简单工厂的最大优点就是工厂类中包含了必要的逻辑判断,根据客户端的选择 ...

  4. iOS UIWebView和网页的交互(OC中调执行JS)

    UIWebView和网页的交互(OC中调执行JS)- (void)viewDidLoad{[super viewDidLoad];// 1.webViewUIWebView *webView = [[ ...

  5. 自定义Dialog以及Dialog返回值到Activity

    步骤: 1.定义自定义的Dialog的布局文件 2.写一个类MyDialog继承Dialog 3.Dialog 返回值到Activity的方法是定义一个接口,接口中定义返回值到Activity的方法, ...

  6. GCD中的dispatch_apply的用法及作用

    GCD中的dispatch_apply的用法及作用 (一)dispatch_apply的基本用法 dispatch_apply函数是dispatch_sync函数和Dispatch Group的关联A ...

  7. [android] 手机卫士界面切换动画

    在/res/anim/ 建立文件tran_out.xml 添加<translate>节点 设置x轴来源坐标android:fromXDelta=”0” 设置x轴目的坐标android:to ...

  8. iOS开发之网络数据解析(一)--JSON解析简介

    前言:对服务器请求之后,返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) 本篇随便先讲解JSON解析. 正文: 关于JSON: JSON是一种轻量级的数据格式,一般用于数据交互 ...

  9. Windows下查看端口占用

    最近在重新安装Mysql的时候,发现3306默认端口被占用了.类似的情况常常遇到,想查看到底是哪个程序把这个端口占用了. 下面是我google找到的方法,和大家分享. 1. 首先,使用netstat ...

  10. sql 把特定数据排在最前面

    感谢www.baidu.com/p/dongfanghong_1 sql大神,简单的语法运用起来简直活了. 第一法] select * from table where name='D' UNION ...