CSS3中弹性盒子Flex使用详解
来源:互联网 发布:淘宝行情分析软件 编辑:程序博客网 时间:2024/06/05 15:42
在介绍flex之前,先说一个面试时关于CSS布局常提到的问题,也就是三栏布局,左右两边固定,中间一栏自适应屏幕大小,如下效果:
以前常见的做法就是将左右两边绝对定位,定位到相应的位置,中间设置width:100%;然后在设置对应的padding-left和padding-right值。现在css3中提供了flex属性,也就是弹性盒子布局,这样就很好地处理上面的问题,具体代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>利用flex固缩固布局</title> <style> *{ margin: 0; padding-right: 0; } header{ width: 100%; height: 200px; margin-top: 10px; display: flex; display: -webkit-flex; } header div{ height: 200px; border: 1px solid red; margin: 0px 10px; } header div:nth-child(1){ width: 100px; } header div:nth-child(2){ flex:1; -webkit-flex:1; } header div:nth-child(3){ width: 100px; } </style></head><body> <header> <div>width:100px;</div> <div>宽度自适应</div> <div>width:100px;</div> </header></body></html>
上面代码中没有涉及到一点定位的内容,仅仅在父容器中设置了display:flex;属性,并在子元素中设置flex:1;即可。非常的方便。既然flex这么强大,那么接下来就介绍一下flex的具体使用方法。
flex容器
通过上面的代码,我们能发现:要使用flex布局,需要设计到两层,外面一层叫做Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。下面是一个flex布局的基本概念介绍:
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。
大致了解了之后,主要还是怎么用。flex容器有以下六个属性:
1. flex-direction 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6. align-content
下面逐个介绍一下这六个属性的作用:
1、flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向)。
flex-direction: row | row-reverse | column | column-reverse;
四个值分别代表:
- row(默认值):主轴为水平方向,起点在左端。 - row-reverse:主轴为水平方向,起点在右端。 - column:主轴为垂直方向,起点在上沿。 - column-reverse:主轴为垂直方向,起点在下沿。
效果分别对应如下:
2、flex-wrap
flex-wrap属性定义,如果一条轴线排不下,如何换行。有三个属性值,默认情况下是wrap
flex-wrap: nowrap | wrap | wrap-reverse;
分别表示不换行、换行以及反转换行,效果分别如下:
3、flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。这里就不再具体测试。
4、justify-content
justify-content属性定义了项目在主轴上(即相当于X轴)的对齐方式。一共有五个属性值:
justify-content: flex-start | flex-end | center | space-between | space-around;
分别表示:左对齐、右对齐、居中、两端对齐、每个项目两侧的间隔相等。以下是对应的效果:
5、align-items
align-items属性定义项目在交叉轴上(即Y轴上)如何对齐。也有五个属性值:
align-items: flex-start | flex-end | center | baseline | stretch;
分表表示:上对齐、下对齐、居中对齐、项目的第一行文字的基线对齐、如果项目未设置高度或设为auto,将占满整个容器的高度(默认值)。
下面是对应的效果图:
6、align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。该属性定义多跟轴线在Y轴上的对齐方式,与align-items有点类似。其有以下六个属性值:
- flex-start:与交叉轴的起点对齐。 - flex-end:与交叉轴的终点对齐。 - center:与交叉轴的中点对齐。 - space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 - space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 - stretch(默认值):轴线占满整个交叉轴。
flex item
介绍完了flex容器,介绍就要介绍容器里的成员了,Flex项目(flex item),简称”项目”。这里需要之一的是:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
flex项目有以下六个属性:
1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. align-self
以下对每一个分别进行介绍:
1、order
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。有了这个属性,可以调整在HTML中出现的顺序。
order: <integer>;
2、flex-grow
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-grow: <number>; /* default 0 */
如果一个项目的flex-grow属性为2,另一个项目都为1,则前者占据的剩余空间将比后一项多一倍。如下所示:
3、flex-shrink
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-shrink: <number>; /* default 1 */
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
4、flex-basis
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。类似于设置了width属性。
5、flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
6、align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
上面六个取值中,除了auto,其他值与align-items属性完全一致。这里就不一一介绍了。
flex的应用
利用flex,我们可以完成很多布局,而且不需要太多的代码。开头的圣杯布局就是一种典型的示例,下面我们利用flex来实现流式布局,并且加上简单的媒体查询,使其在移动端和PC显示结构不一样,程序如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>flex实现流式布局</title> <style type="text/css"> *{ margin: 0; padding:0;} .container{ margin: 20px 20px; padding: 10px 10px; display: flex; flex-wrap:wrap; border: 1px solid #ADAAAA; } .item{ flex:0 0 40%; height: 100px; margin:20px 5%; box-sizing: border-box; border: 1px solid red; } @media (min-width:960px){ .item{ flex:0 0 20%; height: 100px; margin:20px 2.5%; box-sizing: border-box; border: 1px solid red; } } </style></head><body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body></html>
在PC端显示结果如下:
在移动端显示效果如下:
参考链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
- CSS3中弹性盒子Flex使用详解
- CSS3中弹性盒子Flex使用
- CSS3弹性盒子flex
- CSS3--弹性盒子(Flex Box)
- CSS3 弹性盒子(Flex Box)
- CSS3 弹性盒子(Flex Box)
- css3中弹性盒子模型
- CSS3: box-flex (弹性盒子模型)
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3弹性盒子模型display:flex
- css3盒子布局-定义盒子的弹性空间(box-flex)
- Flex 弹性盒子布局使用教程
- css3弹性盒子模型 flex与box 菜鸟学习笔记
- css3关于flex弹性盒子最新语法及案例
- CSS3 弹性盒子布局
- 在linux下用ns2测试*.tcl时出现error when calling class OldSim:的解决办法
- Eclipse中禁止Console DDMS自动打印的方法
- 整理 qt opengl,自己的基础框架 —— 绘制一个彩色三角形
- 第五周—raptor初识
- 例题 2.6 棋盘覆盖
- CSS3中弹性盒子Flex使用详解
- 你不知道的Java学习笔记12--String、StringBuffer、StringBuilder比较
- Milking Cows
- PHP学习笔记之include和require
- Java集合类是Iterable的实现类的原因
- Spring结合hibernate和jdbcTemplate多数据源事物问题
- 五香豆腐_ssl2357_bfs+位运算
- 如何得到iOS设备的UUID
- [Oracle] 数据库字符集参数设置