CSS3弹性盒模型flex box快速入门心得(必看篇)


Posted in HTML / CSS onMay 24, 2016

为了做移动端的前端项目开始学flex啦~!用了flex,再也不用担心排版啦。一起来快速上手吧!

在css上使用flex的语法

display: flex; /*按照需求加入各浏览器需求前缀*/

flex-direction
(适用于父类容器元素)

flex-direction:row;

  • a
  • b
  • c

flex-direction:row-reverse;

  • a
  • b
  • c

flex-direction:column;

  • a
  • b
  • c

flex-direction:column-reverse;

  • a
  • b
  • c

flex-wrap
(适用于父类容器元素)

设置或检索伸缩盒对象的子元素超出父容器时是否换行。
flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap:nowrap;

  • a
  • b
  • c

flex-wrap:wrap;

  • a
  • b
  • c

flex-wrap:wrap-reverse;

  • a
  • b
  • c

flex-flow
(适用于父类容器元素)

相当于direction和wrap的集合
flex-flow: row nowrap;/* 顺序排列且不换行 */
flex-flow:row-reverse wrap;/* 反序排列且自动换行 */

justify-content
(适用于父类容器元素)

设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
justifu-content: flex-start | flex-end | center | space-between | space-around

justify-content:flex-start;

  • a
  • b
  • c

justify-content:flex-end;

  • a
  • b
  • c

justify-content:center;

  • a
  • b
  • c

justify-content:space-between;
space-between:弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于'flex-start'。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。

  • a
  • b
  • c

justify-content:space-around;
space-around:弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于'center'。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

  • a
  • b
  • c

align-items
(适用于父类容器元素)

设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch

align-items:flex-start;

  • a
  • b
  • c

align-items:flex-end;

  • a
  • b
  • c

align-items:center;

  • a
  • b
  • c

align-items:baseline;
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。

  • a
  • b
  • c

align-items:strecth;
stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

  • a
  • b
  • c

align-content
(适用于父类容器元素)

设置或检索弹性盒堆叠伸缩行的对齐方式。
align-content: flex-start | flex-end | center | space-between | space-around | stretch

align-content:flex-start;

  • a
  • b
  • c
  • d
  • e
  • f

align-content:flex-end;

  • a
  • b
  • c
  • d
  • e
  • f

align-content:center;

  • a
  • b
  • c
  • d
  • e
  • f

align-content:space-between;

  • a
  • b
  • c
  • d
  • e
  • f

align-content:space-around;

  • a
  • b
  • c
  • d
  • e
  • f

align-content:strecth;

  • a
  • b
  • c
  • d
  • e
  • f

flex-grow
(适用于子元素)

设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。本例中b,c两项都显式的定义了flex-grow,可以看到总共将剩余空间分成了4份,其中b占1份,c占3分,即1:3
flex-grow: (default 0)

  • a
  • b
    flex-grow:1
  • c
    flex-grow:2
  • d
  • e

flex-shrink
(适用于子元素)

设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
flex-shrink: (default 1)

flex-basis
(适用于子元素)

设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间
flex-basis: (可百分比表示) | auto (default auto)

  • a
  • b
  • c
    flex-basis:600px;
  • d
  • e

flex(复合属性)
(适用于子元素)

flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
none:none关键字的计算值为: 0 0 auto
[ flex-grow ]:定义弹性盒子元素的扩展比率。
[ flex-shrink ]:定义弹性盒子元素的收缩比率。
[ flex-basis ]:定义弹性盒子元素的默认基准值。

以上这篇CSS3弹性盒模型flex box快速入门心得(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522660.html

HTML / CSS 相关文章推荐
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 #HTML / CSS
CSS3中的Media Queries学习笔记
May 23 #HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 #HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 #HTML / CSS
css 元素选择器的简单实例
May 23 #HTML / CSS
css sprite简单实例
May 23 #HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 #HTML / CSS
You might like
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
url decode problem 解决方法
2011/12/26 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
React如何避免重渲染
2018/04/10 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
vue引入静态js文件的方法
2020/06/20 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
Python远程方法调用实现过程解析
2020/07/28 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
python中封包建立过程实例
2021/02/18 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
教师考核评语
2014/04/28 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
优秀护士事迹材料
2014/12/25 职场文书
光荣之路观后感
2015/06/12 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
公司员工奖惩制度
2015/08/04 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL