新版本

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

目前几乎大部分的浏览器都支持了。浏览器支持情况可以点击这里查看,下图为支持flex的情况

//HTML代码部分
<div>
<p>我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林</p>
<p>我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林</p>
<p>我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林</p>
</div>
//CSS部分
p{
width:150px;
margin:5px;
padding: 5px;
border: 1px solid gray;
background: silver;
}

属性详解

首先和之前一样,先设置伸缩盒的display属性,有以下两个值

div{
display: flex;
}

注意,设为Flex布局以后,子元素的floatclearvertical-align属性将失效

接下来我们来测试flex布局的属性

1.flex-direction

//同旧版本的box-orient,设置伸缩项目的排列方式

我们四个值都试试

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

2.flex-wrap

//设置换行方式,类似旧版本的base-line,但是旧版本的base-line没有浏览器支持

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

3.flex-flow

//集合了flex-direction和flex-wrap的简写形式

flex-flow:row wrap;

4.justify-content

//同旧版本的box-pack,设置伸缩项目的对齐方式,或者说分布方式

每个值都试试吧

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

5.align-items

//清理伸缩项目容器的额外空间,同旧版box-align

还是一样,每个值都试下

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;

6.align-self

//align-self和align-item都是清理额外空间,但它是单独清理

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

7.flex

//同旧版box-flex,用于控制伸缩项目的比例分配

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

8.order

//同旧版box-ordinal-group,控制伸缩项目出现的顺序

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

小结

当然flex布局远不止这些,更多内容可以查看官方文档:https://www.w3.org/TR/css-flexbox-1/

如果觉得我讲的不好的话,也可以看看忨一峰的这篇Flex布局教程博客,希望能对你有所帮助。

好啦,三篇关于弹性布局的总算讲完拉,希望大家能好好运用flex布局,做出你的兼容式响应布局网页。

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

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

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

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

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

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

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

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

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

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

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

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

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

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

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

  8. cdispaly的Grid布局与Flex布局

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

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

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

随机推荐

  1. 机器学习基石 2 Learning to Answer Yes/No

    机器学习基石 2 Learning to Answer Yes/No Perceptron Hypothesis Set 对于一个线性可分的二分类问题,我们可以采用感知器 (Perceptron)这种 ...

  2. Ext JS 6学习文档–第1章–ExtJS入门指南

    Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...

  3. (4)Object对象的几个常用方法

    Object对象是java中对象的始祖,其有一些方法是经常需要我们来改写的: toString方法 该方法是Object的方法,Object的这的方法返回的是对象的文件结构加上对象的hashcode, ...

  4. Python快速入门(1)

    FROM:实验楼 http://python.usyiyi.cn/python_278/tutorial/index.html http://woodpecker.org.cn/abyteofpyth ...

  5. Unity3D动态读取外部MP3文件给AudioSource

    在PC端VR游戏开发中,需要动态加载本地的MP3文件,但是Unity3D不知道出于什么原因,到5.4.0也不支持MP3文件的外部加载(目前只支持wav和ogg). 因此要想通过www来加载mp3文件就 ...

  6. STM32GPIO口8种模式细致分析(类比51单片机)

    关于STM32GPIO口的8种工作模式,我们先引出一些问题? STM32GPIO口如果既要输入又要输出怎么办? 1.浮空输入模式 上图红色的表示便是浮空输入的过程,外部输入时0读出的就是0,外部输入时 ...

  7. 02 nodejs命令参数(NodeJS基础入门)

    声明:本文章可供有一定js基础的朋友参考nodejs入门,本文未讲解nodejs的安装,如有需要的同学可以加QQ3382260752找我,进行交流学习. 建议使用开发软件:webstorm或hbuil ...

  8. H5_background-clip(css3——裁剪)

    利用background-clip实现此效果 在body里面只需要写:<div class="box"></div> 在样式里面写上: .box{ widt ...

  9. Framework7+vue demo

    最近看了下f7+vue做了几个测试页面,商品图片来自淘宝,代码等有时间了再传,

  10. JavaScript基础学习(四)—Object

    一.Object的基本操作 1.对象的创建      在JavaScript中,创建对象的方式有两种:构造函数和对象字面量.      (1)构造函数 var person = new Object( ...