CSS3 Flex 弹性布局实例代码详解


Posted in HTML / CSS onNovember 01, 2018

一、基本概念

CSS3  Flex 弹性布局实例代码详解

//任何一个容器都可以指定为Flex布局。
 .box{
   display: flex;
 }
 //行内元素也可以使用Flex布局。
 .box{
   display: inline-flex;
 }
 //注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

二、容器属性

1. flex-direction

flex-direction 决定项目的排列方向
 

.box {
   flex-direction: row | row-reverse | column | column-reverse;
 }

2. flex-wrap

默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap 属性定义,如果一条轴线排不下,如何换行。

.box{
   flex-wrap: nowrap | wrap | wrap-reverse;
 }

3. flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。

.box {
   flex-flow: <flex-direction> || <flex-wrap>;
 }

4. justify-content

justify-content 属性定义了项目在水平方向的对齐方式。

.box {
   justify-content: flex-start | flex-end | center | space-between | space-around;
 }

5. align-item

align-item 属性定义了项目在垂直方向的对齐方式。

.box {
   align-items: flex-start | flex-end | center | baseline | stretch;
 }

3.6  align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 }

三、项目的属性

1.  order

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
 

.item {
   order: <integer>;
 }

2.  flex-grow

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.item {
   flex-grow: <number>; /* default 0 */
 }
 //如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

3.  flex-shrink

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item {
   flex-shrink: <number>; /* default 1 */
 }

4. flex-basis

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
 

.item {
   flex-basis: <length> | auto; /* default auto */
 }
 /*它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。*/

4.5  flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

4.6 align-self属性

align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。等同于 align-items
 

.item {
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
 }

总结

以上所述是小编给大家介绍的CSS3  Flex 弹性布局实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
使用CSS3实现字体颜色渐变的实现
Mar 09 HTML / CSS
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 #HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 #HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 #HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 #HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 #HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 #HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 #HTML / CSS
You might like
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
php购物车实现代码
2011/10/10 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
原生js实现分页效果
2020/09/23 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
详解Python中的正则表达式
2018/07/08 Python
Django缓存系统实现过程解析
2019/08/02 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
自我评价范文分享
2014/01/04 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
教师节倡议书2015
2015/04/27 职场文书
全陪导游词开场白
2015/05/29 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
python基于turtle绘制几何图形
2021/06/15 Python