10分钟理解CSS3 FlexBox弹性布局


Posted in HTML / CSS onDecember 20, 2018

基本介绍

特点

  • flexbox是一种css display类型,提供一种更简单高效的布局方式;
  • flexbox可以对元素相对于父元素、兄弟元素进行定位、控制尺寸、控制间距;
  • flexbox对响应式有很好的支持;

工作原理

设置父元素的display属性为flex,则子元素都变成flex item,由此可以控制子元素的排列方式、尺寸、间距等;

兼容性

10分钟理解CSS3 FlexBox弹性布局

Flex Container

先来看一个最简单的flex示例,外层div设置display: flex成为一个flex container,内部的3个div则自动变为flex item:

html:

<div class="flex-container">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</div>

css:

.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }
.box{ height: 100px; min-width: 100px; }
.one{ background: pink; }
.two{ background: lightgreen; }
.three{ background: skyblue; }

效果:

10分钟理解CSS3 FlexBox弹性布局

效果与浮动布局类似,但是如果用浮动实现的话需要写更多的代码,而flex一行就搞定了。

1. Justify Content

如果我们想让flex item居中排列呢,我们可以给flex container增加一个css属性:justify-content,它控制flex item在主轴方向(main axis,由flex-drection决定,默认为水平方向)上的对齐方式:

.flex-container{
  ...
  justify-content: center;
}

效果如图:

10分钟理解CSS3 FlexBox弹性布局

除此之外justify-content还可以设置为flex-start, flex-end, space-around, space-between, space-even等值,具体效果请自行实验。

2. Align Items

实现了flex方向的居中后,垂直于主轴方向(cross axis)的居中可以用align-items实现。

css:

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  justify-content: center;
  height: 200px;
  background-color: white;
  align-items: center;
}

效果:

10分钟理解CSS3 FlexBox弹性布局

使用flex解决了以往css垂直居中实现复杂的问题!相应的,align-items还有flex-start, flex-end等其他值。

3. Flex Direction

flex-direction决定了主轴方向即flex item排列方向,除了默认的row方向之外,还可以纵向、反向(row-reverse/column-reverse)排列flex item:

css:

.flex-container{
  ...
  
  flex-direction: column;
  align-items: center;
}

效果:

10分钟理解CSS3 FlexBox弹性布局

4. Flex Wrap

如果我们不想在窗口变窄的情况下压缩flex item,而是让超出边界的flex item换行显示那我们可以设置flex container的flex-wrap

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
}

.box{
  height: 100px;
  min-width: 300px;
  flex-grow: 1;
}

当我们压缩窗口的时候,效果如下:

10分钟理解CSS3 FlexBox弹性布局

flex wrap还有一个值:wrap-reverse,设置该值后,被wrap的元素会排到其他元素上面:

10分钟理解CSS3 FlexBox弹性布局

由此可见,flex wrap一定程度上可以取代media query了。

5. Flex Row

最后,flex-directionflex-wrap可以合并为一个属性flex-flow,比如:flex-flow: row-reverse wrap

Flex Item

1. Flex Grow

在上面所有的例子中,三个flex item只占据了flex container小部分空间,如果想让flex item占满flex container我们需要给flex item设置flex-grow属性。顾名思义,grow意味着增长,用于控制flex item的尺寸的伸展。

将css修改为:

.box { 
    height: 100px; 
    min-width: 100px; 
    flex-grow:1; 
}

效果:

10分钟理解CSS3 FlexBox弹性布局

可以看到三个子元素平分了父元素的空间,因为此时它们的flex-grow都是1。如果只有一个子元素设置了flex-grow呢?

css:

.box{ height: 100px; min-width: 100px; }
.one{ background: pink; flex-grow: 1; }

效果:

10分钟理解CSS3 FlexBox弹性布局

此时two和three的大小不变,而one占据了父元素剩余空间。

如果将one的flex-grow改为2,而two和three改为1,我们看看会发生什么:

css:

.box{ height: 100px; min-width: 100px; flex-grow:1; }
.one{ background: pink; flex-grow: 2; }

效果:

10分钟理解CSS3 FlexBox弹性布局

可以看到one的宽度变成了two和three的两倍,因此flex item的尺寸和flex-grow的值成正比。

2. Flex Shrink

flex-grow相对的是flex-shrinkflex-shrink用于控制子元素尺寸超过flex container后,对子元素的压缩。请看示例:

修改box的宽度为flex container的1/3,one、two、three的flex-shrink分别为1,2,3:

.box{ height: 100px; width: 320px; }
.one{ background: pink; flex-shrink: 1; }
.two{ background: lightgreen; flex-shrink: 2; }
.three{ background: skyblue; flex-shrink: 3; }

当窗口正常尺寸时,效果如下:

10分钟理解CSS3 FlexBox弹性布局

当我们压缩窗口使其变得更窄后,效果如下:

10分钟理解CSS3 FlexBox弹性布局

当flex container宽度变为540px后,子元素都被不同程度的压缩了。压缩后的one、two、three的宽度分别为250px、180px、110px,所以相比于初始宽度320px被压缩掉的宽度分别为70px、140px、210px,70 : 140 : 210 = 1 : 2 : 3,与flex shrink的值成反比。实际上压缩率和flex item的初始尺寸也有关系,只不过当初始尺寸一样时它带来的影响被忽略了。

假设flex shrink为fs,flex item的初始尺寸为is,flex item被压缩的尺寸为ss,则正确的表达式为:

fs ∝ is/ss

3. Flex Basis

flex-basis用于设置flex item的初始宽/高。为什么有width和height还需要重新加一个flex-basis呢?flex-basis和width/height有如下的区别:

  1. flex-basis只能用于flex-item,而width/height可以应用于其他类型的元素;
  2. flex-basis和flex-direction有关,当flex-direction为row的时,flex-basis设置的是宽度,当flex-direction为column时,flex-basis设置的是高度;
  3. 当flex item被绝对定位后(absolute position),flex-basis不起作用,而width/height可以;
  4. flex-basis可以用于flex的简写形式,如:flex: 1 0 200px;

我们来看一下flex-basis的作用,将css修改如下:

.box{
  height: 100px;
  flex-grow: 1;
}
.one{
  background: pink;
  flex-basis: 100px;
}
.two{
  background: lightgreen;
  flex-basis: 200px;
}
.three{
  background: skyblue;
  flex-basis: 300px;
}

3个flex item都在原来的初始宽度基础上增加了相同的宽度:

10分钟理解CSS3 FlexBox弹性布局

当然,这个例子如果换成使用width也是一样的效果,但是虽然效果一样但意义不一样,所以使用flex布局时还是应该尽量遵守规范,选合适的人去干正确的事。

4. Order

通过order属性我们可以改变flex item的排列顺序,例如:

html:

<section id="blocks">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</section>

css:

#blocks{
  display: flex;
  margin: 10px;
  justify-content: space-between;
}

#blocks div{
  flex: 0 0 100px;
  padding: 40px 0;
  text-align: center;
  background: #ccc;
}

默认排列顺序是按照flex item在html中的出现顺序:

10分钟理解CSS3 FlexBox弹性布局

当我们修改flex item的order值后,flex item会按照order值升序排列:

css:

.one{ order: 4; }
.two{ order: 3; }
.three{ order: 2; }
.four{ order: 1; }

效果:

10分钟理解CSS3 FlexBox弹性布局

结语

flex就先简单介绍到这里,flex很强大也很简单,希望大家用的开心。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 #HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 #HTML / CSS
纯css3实现思维导图样式示例
Nov 01 #HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 #HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 #HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 #HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 #HTML / CSS
You might like
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
PHP的全局错误处理详解
2016/04/25 PHP
laravel学习教程之关联模型
2016/07/30 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
vue递归获取父元素的元素实例
2020/08/07 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
python实现画圆功能
2018/01/25 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
节水标语大全
2014/06/11 职场文书
学校班班通实施方案
2014/06/11 职场文书
学习雷锋主题班会
2015/08/14 职场文书