html 伸缩布局,CSS3弹性伸缩布局（下）—

新版本

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

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

//HTML代码部分

我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林

我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林

我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林

//CSS部分

150px;

margin:5px;

padding: 5px;

border: 1px solid gray;

background: silver;

}

属性详解

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

div{

display: flex;

}

注意，设为Flex布局以后，子元素的float、clear和vertical-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布局教程博客，希望能对你有所帮助。

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

html 伸缩布局,CSS3弹性伸缩布局（下）——flex布局相关推荐

CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
从零开始学前端：弹性盒模型（flex布局） --- 今天你学习了吗？（CSS：Day19）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录从零开始学前端:程序猿小白也可以完全 ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
Bootstrap（一）——简介、布局容器和工具类使用(flex布局)
文章目录一.Bootstrap简介二.布局容器 2.1 定宽容器 container 2.2 变宽容器 container-fluid 三.工具类 3.1 颜色与排版 (1)常用颜色 (2)常用排 ...
[24]CSS3 弹性伸缩布局(上)
一．布局简介 CSS3 提供一种崭新的布局方式:Flexbox 布局,即弹性伸缩布局模型(FlexibleBox).用来提供一个更加有效的方式实现响应式布局.但是用于这个布局方式还处于 W3C 的草案 ...
css3弹性伸缩和使用
columns 分栏 column的中文意思就是栏的意思,在html中,作用是分列,把一块内容相同比例均匀的分成一块一块的列,想报纸的内容似的,一篇文章在一张内容上分成好几栏那样显示,它的属性有 1 ...
CSS3中display属性的Flex布局
编译之后的效果很明显,界面的布局也很合理,看起来很清晰.那么究竟这个属性是干嘛用的呢? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. ...
CSS之弹性盒子模型（Flex布局）
文章目录一.Flex布局是什么? 二.基本概念三.容器的属性 3.1 flex-direction属性 3.2 justify-content属性 3.3 flex-wrap属性 3.4 alig ...
java中display中的属性_浅谈CSS3中display属性的Flex布局
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: colum ...
默认布局换行_自学整理 CSS Flex 布局
引言最近记性特别不好,居然忘记 Flex 布局子项居中怎么写了,于是又看了一遍阮一峰老师的<Flex 布局教程>,为了能够加深记忆,边做记录边练习,因此整理本文作为自学笔记. 本文来源: ...

html 伸缩布局,CSS3弹性伸缩布局（下）——flex布局

html 伸缩布局,CSS3弹性伸缩布局（下）——flex布局相关推荐

最新文章

热门文章