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实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Django REST 异常处理详解
2020/07/15 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
个人简历自荐信
2013/12/05 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
毕业生自荐信格式
2014/03/07 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
安阳殷墟导游词
2015/02/10 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书