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. Android——sqlite3 基本命令操作

    平时用到database的地方不多,这里记录一下shell终端下直接对db的基本操作! 撰写不易,转载请注明出处:http://blog.csdn.net/jscese/article/details ...

  2. 设置eclipse默认编码格式

    Window->Preferences->General ->Content Type->Text->JSP 最下面设置为UTF-8 Window->Prefere ...

  3. to meet you

    1:Java特性 (1)平台无关性 一次编译到处运行 (2)GC 垃圾回收机制 (3)语言特性 泛型-反射机制-lambda表达式 (4)面向对象 面向对象语言-三大特性(封装,继承,多态) (5)类 ...

  4. JS常见算法题目

      最近收集了几个经典JS题目,比较有代表性,分享一下:   1.xiaoshuo-ss-sfff-fe  变为驼峰xiaoshuoSsSfffFe function getCamelCase(str ...

  5. POJ2311 Cutting Game(博弈论）

    总时间限制: 1000ms 内存限制: 65536kB 描述 Urej loves to play various types of dull games. He usually asks other ...

  6. 11JavaScript事件

    JavaScript 事件 HTML 事件是发生在 HTML 元素上的事情. 当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件. 1.HTML 事件 HT ...

  7. 前端基础-jQuery的优点以及用法

    一.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...

  8. 微信小程序页面3秒后自动跳转

    setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种:   setTimeout(function () { // wx.r ...

  9. Delphi Compiler Bug?

    I found a Bug of Delphi XE3 Compiler,It may exists in XE4,XE5. Here is the code to show the bug proc ...

  10. numpy.random.shuffle()与numpy.random.permutation()的区别

    参考API:https://docs.scipy.org/doc/numpy/reference/routines.random.html 1. numpy.random.shuffle()   AP ...