什么是Flex弹性布局
Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性。
说明:
1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。
2.设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用。
3. 设置了display:flex属性的元素,称为Flex容器,他里面的所有子元素统称为容器成员,称为Flex项目。后面我们就使用Flex容器和 Flex项目来进行介绍。 Flex容器有两根坐标轴:水平的叫主轴(main axis)和垂直的叫交叉轴(cross axis)。
Flex容器属性
Flex容器有6种属性可用分别是:
属性 | 详细说明 |
flex-direction | 决定主轴的方向(即项目的排列方向) |
flex-wrap | 控制Flex容器是单行显示还是多行显示,而交叉轴的方向就决定着新线的排列方向 |
flex-flow | flex-flow属性是flex-direction属性和flex-wrap属性的简写 |
justify-content | 定义了Flex项目在主轴方向上的对齐方式 |
align-items | 定义项目在交叉轴上的对齐方式 |
align-content | 定义了多根轴线的对齐方式,如果只有一条轴线,那么此属性不起作用 |
下面就逐一给大家介绍这些属性有什么用,以及他们所对应的属性值又是什么意思。
flex-direction: row | row-reverse | column | column-reverse; 属性决定主轴的方向(即项目的排列方向) |
|
名称(属性/值) | 详细说明 |
row(默认值) | 主轴为水平方向,起点在左端 |
row-reverse | 主轴为水平方向,起点在右端 |
column | 主轴为垂直方向,起点在上沿 |
column-reverse | 主轴为垂直方向,起点在下沿 |
效果演示 |
flex-wrap: nowrap | wrap | wrap-reverse; 属性可以控制Flex容器是单行显示还是多行显示,而交叉轴的方向就决定着新线的排列方向 |
|
属性/值 | 详细说明 |
nowrap | 不换行 |
wrap | 换行 |
wrap-reverse | 换行与wrap相似,但行的顺序是倒过来的 |
效果演示 |
属性/值 | 详细说明 |
flex-flow | flex-flow属性是flex-direction属性和flex-wrap属性的简写,默认值为flex-flow : row nowrap |
justify-content: flex-start | flex-end | center | space-between | space-around; 属性定义了Flex项目在主轴方向上的对齐方式 |
|
属性/值 | 详细说明 |
flex-start | 类似于左浮动(float:left) |
flex-end | 类似于右浮动(float:right) |
center | Flex项居中 |
space-between | 两端对齐容器,各个Flex项目之间的间距相等 |
space-around | 每一个Flex项目两侧的间隔相等 |
效果演示 |
align-items: flex-start | flex-end | center | baseline | stretch; 属性定义项目在交叉轴上的对齐方式 |
|
属性/值 | 详细说明 |
flex-start | 对齐交叉轴的起点 |
flex-end | 对齐交叉轴的终点 |
center | 以交叉轴为参考,居中对齐 |
baseline | Flex项目第一行文字基线对齐 |
stretch | 如果Flex项目未定义高度或者设置为auto,Flex项目将占满整个窗口的高度 |
效果演示 |
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 属性定义了多根轴线的对齐方式,如果只有一条轴线,那么此属性不起作用 |
|
属性/值 | 详细说明 |
flex-start | 对齐交叉轴的起点 |
flex-end | 对齐交叉轴的终点 |
center | 以交叉轴为参考,居中对齐 |
space-between | 交叉轴两端对齐,轴线这间的间隔平均分布 |
space-around | Flex项目(沿交叉轴方向)之间的间隔相等 |
stretch | Flex项目(沿交叉轴方向)占满整个交叉轴 |
效果演示 |
Flex项目属性
属性/值 | 详细说明 |
order | 用于控制Flex项目的排列顺序,默认为0,值越小越靠前。可取的值:0 | 1 |
flex-grow | 用于定义Flex项目的放大比例,默认为0,即使存在剩余空间,也不放大。可取的值:0 | 1 |
flex-shrink | 用于定义Flex项目的缩小比例,默认为1,即空间不足,Flex项目将等比缩小。可取的值 0 | 1 |
flex-basis | 用于定义如何分配多余空间默认值为auto,即Flex项目本来的大小 |
flex | flex属性是flex-grow,flew-shrink和flex-basis的简写。默认值为0 1 auto |
align-self | 允 许单个Flex项目有不同于其他Flex项目的对齐方式。默认值为auto,表示继承父元素的align-items属性,如果不存在父元素,则等同于 stretch。可取的值:flex-start | flex-end | center | baseline | stretch; |
stretch | Flex项目(沿交叉轴方向)占满整个交叉轴 |
效果演示 |
Flexbox布局的语法版本
2009版本,我们称之为老版本,使用的是“display:box”或者“display:inline-box”;
2011版本,我们称之为混合版本,使用的是“display:flexbox”或者“display:inline-flexbox”;
2013版本,也就是最新语法版本,使用的是“display:flex”或者“display:inline-flex”。
刚开始研究Flex弹性布局时分不清box,flexbox,和flex的区别还以为他们的作用是不一样的,可后来慢慢收集Flex相关资料时才发现原来他们指的都是同一样东西。
浏览器兼容性
更兼容性细节,可前往Can I use官网查询,传送门:http://caniuse.com/#search=flex
W3C最新版本介绍,传送门:http://www.w3.org/TR/css3-flexbox/
虽然现在浮动布局还比较流行,但随着浏览器的更新换代,我相信未来将会是Flex布局(弹性布局)的天下。因为Flex确实给我们带来了不少的方便,甚至有些效果与传统的布局方式相比,用弹性布局实现起来要简单得多。
原文:http://yunkus.com/article/css3/256.html
相关推荐
网页布局(layout)是CSS的一个重点应用。... 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
形象生动讲解CSS布局,Flex弹性布局生动形象的理解,更好的理解弹性布局
//行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 二、容器属性 1. flex-direction flex-direction 决定项目的...
CSS常用动画特效,CSS3新增背景CSS代码。颜色渐变,flex弹性布局,CSS常用动画特效CSS常用动画特效等
display: flex弹性布局
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
在说flex布局之前,再来回顾一下CSS3的怪异盒模型。 (1) 标准盒模型的总大小=width/height+padding+border+margin; 怪异盒模型的总大小=width/height+margin. (2)box-sizing属性: 可以给box-sizing属性指定的...
CSS布局 案例详解 CSS布局 案例详解 CSS布局 案例详解CSS布局 案例详解 CSS布局 案例详解
主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
CSS3 flex布局总结.docx
文件已上传到百度网盘,附件中是下载地址。真正免积分免费无水印完整版,绝... CSS+DIV网页布局技术详解.pdf 链接 httpspan.baidu.coms1o8gzd7G 密码 8ynx 邢太北;许瑞建(著) 清华大学出版社 9787302345732 2014-03-01
单元二 CSS3样式表端基础前Web单元2-7 定位之Flex布局2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用...
编辑完这个FLEX下的CSS说明后,我基本已经兵临...在些天在AIRIA下了不少好东西,今天终于有空,也发一个比较不错的东西给大家,相信都比较需要这个FLEX下的CSS使用方法的详细说明(好像我这份还不够详细,望大家补充)
版本清晰度可以,内容同印刷版,无缺页完整资料,放心下载
本文主要介绍了css3 flex布局实现平均分配元素,给自己留个笔记,也分享给大家,具体如下: 例子一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex ...
本文主要介绍了详解css3 flex弹性盒自动铺满写法,分享给大家,具体如下:
这个是css3 flex的使用示例集合,详细的介绍请查看博客:http://blog.csdn.net/u011113654/article/details/50947021
CSS Flexible Box弹性布局模块切换效果是一款利用纯css3 Flexbox布局模块(国内很多人称为弹性布局),它是CSS3新增的一种布局模式。