2009年,display: box 就已经出现,但是直到IE11的发布,全部的主流浏览器才统一支持新的用法display: flex

这里只说应用,浏览器的兼容处理会附在文章的末尾。

起步

在现代主流浏览器中,只需要给一个元素加上一行display: flex就可以让他拥有弹性布局的魔力。

轴的方向

flex-direction 定义了主轴的方向,在html中,默认值是 row,即子元素横向排列,但是在微信小程序中,默认值是 column(纵向排列)。

  • 主轴与侧轴 flex-direction: row时,
.div1{display: flex; flex-direction: row}
.div1 > div // 从左到右排列
————————
口 口 口 口 .div2{display: flex; flex-direction: column}
.div2 > div // 从上到下排列
————————




flexbox默认是不会换行的,如果不想全部的子元素都挤在同一行,需要加上这样的属性

.div1{display: flex; flex-direction: row; flex-wrap: wrap}
.div1 > div // 从左到右排列,占满一行会换行
———————
口 口 口 口
口 口 .div2{display: flex; flex-direction: column; flex-wrap: wrap}
.div2 > div // 从上到下排列,占满一列会换行
——————————
| 口 口
| 口 口
| 口
| 口

对齐

justify-content 属性定义如何分配容器 主轴 上多个子元素之间的空间。

  • 如果是 flex-direction: column , 旋转屏幕90°看效果。

居中

居中使用align-items 属性,定义侧轴上的空间分配,大部分参数和 justify-content 相同(不能使用space-between和space-around)。把屏幕旋转90°就可以看到效果了。

使用剩余空间

flex 属性定义在子元素上,规定它如何使用剩余的空间。

.div1{width: 1000px}
.div1 > .div2{
width: 300px;
}
.div1 > .div3{flex: 1} // div3宽度为700px _______div1(1000px)_________
|__div3(700px)__|___div2___|
____________________________

flex布局的应用

上下定高,中间高度自适应

<!--css代码-->
html, body{height: 100%}
.page{display: flex; flex-direction: column}
.header{height: 44px}
.content{flex: 1}
.footer{height: 44px}
<!--结构-->
<html>
<body>
<main class='page'>
<header class='header'></header>
<div class='content'></div>
<footer class='footer'></footer>
</main>
</body>
</html>
<!--page示意图-->
————————————
.header(44px)
————————————
-
-
-
-
-
.content(视口高度减去88px)
-
-
-
-
-
————————————
.footer(44px)
————————————

图文混排,图片定宽,文字自适应

<!--css代码-->
.card{width: 300px; display: flex}
.img{width: 100px}
.content{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
<!--结构-->
<div class='card'>
<div class='img'></div>
<div class='content'>
<div class='title'></div>
<div class='tag'></div>
<div class='footer'></div>
</div>
</div>

子元素水平、垂直居中

<!--css代码-->
.div{width: 300px; height: 300px;display: flex}
.div1{margin: auto}
<!--结构-->
<div class='div'>
<div class='div1'></div>
</div>

flex兼容性处理

以下设置可以兼容大部分主流浏览器,比如IE10,android4,ios5

部分css代码来自白色橡树博客,原地址找不到,在此表示感谢

  • 定义为flexbox
.flex{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}
  • 定义为纵轴排列
.flex-v{
-webkit-box-orient:vertical;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}
  • 子元素垂直居中
.align-center{
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}
  • 子元素两端对齐
.pack-justify{
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
}

flexbox的应用的更多相关文章

  1. Flexbox 自由的布局

    css3提出了一种新的布局方式.她并没有以摧枯拉朽之势博得我的喜爱.我和她的故事总是伴随着苦涩的味道.世道变了,总要做出些选择才能跟紧步伐.她很强大,能满足你天马行空的需求而不必抓掉一大把头发.她却很 ...

  2. CSS3 Flexbox轻松实现元素的水平居中和垂直居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  3. React Native FlexBox

    FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算 ...

  4. flexbox布局神器

    前言 2009年,W3C提出了一种新的方案----Flexbox布局(弹性布局),可以简便.完整.响应式地实现各种页面布局.Flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联 ...

  5. [译]flexbox全揭秘

    原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块 ...

  6. (转)详解css3弹性盒模型(Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  7. CSS3 Flexbox不迷路指南

    Flexbox早有耳闻,但是决定切实尝试一番,还是因为看了这条围脖: 我觉得用flexbox可以实现,但是发觉无从下手,属性特性都不了解.趁此机会,学习下. 英文原版参考资料在这里:A Complet ...

  8. 【前端攻略】最全面的水平垂直居中方案与flexbox布局

    最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...

  9. 移动端全兼容的flexbox速成班

    说起flexbox,都算是件陈年旧事了,它是2009年W3C提出的一种全新的可伸缩的CSS布局方式.依赖flexbox,我们可以更简单,高效的完成可伸缩式页面的布局. 业界与flexbox的相关教程文 ...

  10. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

随机推荐

  1. uva 10369 Arctic Network (最小生成树加丁点变形)

    The Department of National Defence(DND)wishestoconnectseveral northern outposts by a wireless networ ...

  2. LWIP network interface 即 LWIP 的 硬件 数据 接口 移植 首先 详解 STM32 以太网数据 到达 的第一站: ETH DMA 中断函数

    要 运行  LWIP  不光 要实现  OS  的 一些 接口  ,还要 有 硬件 数据 接口 移植 ,即 网线上 来的 数据 怎么个形式 传递给  LWIP ,去解析 做出相应的 应答  ,2017 ...

  3. JAVA语言编程思维入门

    Java语言是一门强数据类型语言,也就是所有的数据有自己的数据类型,不能搞混淆.比如整数int 字符串String 不能用int a="字符串123";这样写是错的,因为数据类型不 ...

  4. 映射Xml文件中的数据到JavaBean中

    使用Java原生的javax.xml.bind包下的JAXBContext将一个Xml文件中的数据映射到一个JavaBean中 import java.io.File; import java.io. ...

  5. oracle同义词语句备份

    --创建同义词create synonym T_SYSTEM_USERDEPARTMENT for xtzl.T_SYSTEM_USERDEPARTMENT;--查询同义词SELECT * FROM ...

  6. navicat mysql 存储过程

    存储过程如同一门程序设计语言,同样包含了数据类型.流程控制.输入和输出和它自己的函数库. 一.基本数据类型:略 二.变量: 自定义变量:DECLARE   a INT ; SET a=100; 可用以 ...

  7. jQuey实现轮播图效果

    再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...

  8. [试玩] FMXLinux (Firemonkey for Linux) Linux 桌面开发(第三方插件)

    FMXLinux 是一个可以用来开发 Linux 桌面软件的第三方插件,它需要配合 Delphi 10.2 Toyko 官网:http://www.fmxlinux.com/ 使用方法:开启 FMX ...

  9. MySQL用全库备份数据恢复单表数据

    备份数据库时,采用了全库备份,但是因为某些原因需要回滚一个表的数据到备份数据库上,如果回滚整个库就比较费时间,因为可能这个表只有几十M,但是其它表可能有十几上百G,这时候就需要将需要恢复的表提取出来了 ...

  10. Altium Designer (AD) 中规则的部分讲解

    当创建好PCB时,选择 Design - Rules 即可进行规则的设置,也可以直接利用快捷键D-R(多利用快捷键,可以有效的提高设计效率,) 这个是规则的总界面,熟练以后可以直接从这里进行修改,很便 ...