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. 解决java log4j 配置log4jCaused by: java.lang.ClassNotFoundException: org.apache.logging.log4j.LogManager

    前提安装http://mirror.bit.edu.cn/apache/logging/log4j/2.11.2/apache-log4j-2.11.2-bin.zip Buildpath 配置add ...

  2. PAT——1033. 旧键盘打字

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在2行中分别给出坏掉的那些键.以及应该输入的文 ...

  3. Tomcat 安装APR的有关问题

    Tomcat 安装APR的问题APR.APR-util.APR-iconv安装都正常apr安装命令:./configuremakemake install apr-util./configure -- ...

  4. 在 S5PV210 的 开发板上 使用 串口 收发信息

    参考学习教程:周立功嵌入式Linux开发教程-(上册) 材料:首先 准备一个 安装好 Linux 的 开发板 使用  xshell 工具 连接 开发板  ,winscp 工具 连接 开发板  ,  准 ...

  5. git删除本地保存的账号和密码

    使用git在本地拉过一次代码时候git会自动将用户名密码保存到本地. 导致想用别的用户名和密码拉代码时没有权限,这时需要删除或者修改git在本地保存的账户名和密码. 具体办法如下: 1.控制面板--& ...

  6. B+树全面解析

    B+树的特征与结构 有k个子树的中间节点包含有k个元素(B树中是k-1个元素),每个元素不保存数据,只用来索引,所有数据都保存在叶子节点. 所有的叶子结点中包含了全部元素的信息,及指向含这些元素记录的 ...

  7. ODI使用流程

    ---恢复内容开始--- ODI流程 Topology 1.建立 源 物理结构体系 2.建立 目的 物理结构体系 步骤同上 3.建立 源 逻辑架构 4.建立 目的 逻辑架构 步骤同上 Designer ...

  8. macOS，安装+配置+激活：MySQL8.0 + Navicat Premium12

    作者的电脑是10.13.3,些许配置偏差请自行略过 本文是学习探讨途径,请勿滥用,后果自负 MySQL8.0 篇章 官网http://www.mysql.com/downloads/ 下载即可,无需激 ...

  9. MongoDB DBA 实践7-----MongoDB的分片集群操

    一.使用Ranged Sharding对集合进行分片 从mongo连接到的shell中mongos,使用该sh.shardCollection()方法对集合进行分片. 注意: 必须已为集合所在的数据库 ...

  10. redis学习笔记(三)

    Spring data redis: 要求: Redis 版本 > 2.6 与 Lettuce 或 Jedis 集成,两种java开源Redis库. Spring redis主要做的两件事: 连 ...