早之前有所了解，现在有时间整理一下，跟大家分享学习。

虽然Flex布局09年就被W3C所提出，但是目前浏览器支持上还不是很好，网上找的一张图片，仅供参考：

我们先从简单讲起。如果仅仅只想实现一个栅格布局，没必要引入一个复杂的框架（如bootstrap），短短几行代码也能实现该功能。

例子：有个父div，三个子div，宽度比是1:2:1，以下代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style>
  6.         * {
  7.             box-sizing: border-box;
  8.         }
  9.         body {
  10.             padding: 20px;
  11.         }
  12.         .flex{
  13.             display:flex;
  14.         }
  15.         .flex div{
  16.             text-align: center;
  17.         }
  18.         .one{
  19.             background: blue;
  20.             flex:1;
  21.         }
  22.         .two{
  23.             flex:2;
  24.             background: yellow;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="flex">
  30.         <div class="one">one</div>
  31.         <div class="two">two</div>
  32.         <div class="one">one</div>
  33.     </div>
  34. </body>
  35. </html>

显示如下：

解读：把父div设置为display:flex;后，它的所有子元素自动成为容器成员。同时，所有的子元素的float、clear、vertical-align都会失效。子元素有个属性flew，其实接受的是3个值，分别是flex-grow，flex-shrink，flex-basis，后两个属性选填（这里用不上便不填，后面再做介绍），flex-grow：定义当前子元素的比例。

Q：如果我想要列与列之间有等距间隔怎么办？

A：你可以添加 margin 到列上。你也可以添加 padding 到列上。当然父div有个宽度补齐（justification）的属性也可以实现。

代码稍作修改：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style>
  6.         * {
  7.             box-sizing: border-box;
  8.         }
  9.         body {
  10.             padding: 20px;
  11.         }
  12.         .flex{
  13.             display:flex;
  14.             justify-content: space-between;
  15.         }
  16.         .flex div{
  17.             text-align: center;
  18.         }
  19.         .one{
  20.             background: blue;
  21.             width: 23%;
  22.         }
  23.         .two{
  24.             background: yellow;
  25.             width:48%;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="flex">
  31.         <div class="one">one</div>
  32.         <div class="two">two</div>
  33.         <div class="one">one</div>
  34.     </div>
  35. </body>
  36. </html>

显示如下：

解读：稍作介绍下justify-content属性。它定义子元素在主轴上的对齐方式，一共有5个值：

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，子元素之间的间隔都相等

space-around：每个子元素两侧的间隔都相等，所以就会形成子元素与子元素之间的间隔是子元素与两端之间的间隔的2倍

以上是一些简单的用法，下面想详细的记录下flex的其他用法，跟大家分享，不对之处请多多指出。

—————————————————————————————————分割线—————————————————————————————————————

将一个容器（为避免混淆，暂称父元素）设置display为flex后，父元素便拥有以下属性：

1、flex-direction：决定子元素的排列方向。

row： 默认值，水平方向排列，起点在左边。

row-reverse：水平方向排列，起点在右边。

column：垂直方向，起点在上沿。

column-reverse：垂直方向，起点在下沿。

2、flex-wrap：定义一行排不下时如何换行。

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

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

4、justify-content：前面已经介绍，忘记了请往前看。

5、align-items：还记得flex-direction吗，这个属性类似于定义子元素在垂直方向上面的对齐方式。

先来段代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style>
  6.         .flex{
  7.             display:flex;
  8.             width:200px;
  9.             height:200px;
  10.             background: #ccc;
  11.             margin:50px auto;
  12.         }
  13.         .flex div{
  14.             text-align: center;
  15.         }
  16.         .one{
  17.             background: blue;
  18.             flex:1;
  19.         }
  20.         .two{
  21.             background: yellow;
  22.             flex:2;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="flex">
  28.         <div class="one"><p></p>one1</div>
  29.         <div class="two">two</div>
  30.         <div class="one">one2</div>
  31.     </div>
  32. </body>
  33. </html>

（此时子元素并没设置高度以及父元素没有设置align-items当然是按照默认值显示）

1）stretch（默认值）：如果子元素未设置高度或设为auto，将占满整个容器的高度。

修改css

  1. .flex{
  2.     display:flex;
  3.     width:200px;
  4.     height:200px;
  5.     background: #ccc;
  6.     margin:50px auto;
  7.     align-items:flex-start;
  8. }
  9. .one{
  10.     background: blue;
  11.     flex:;
  12.     height: 50px;
  13. }
  14. .two{
  15.     background: yellow;
  16.     flex:;
  17.     height: 100px;
  18. }

2）flex-start：上沿对齐。

3）flex-end：下沿对齐。

4）center：居中对齐。

5）baseline: 子元素的第一行文字的基线对齐。

子元素有以下属性：

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

  1. .one{
  2.     background: blue;
  3.     flex:;
  4.     order:;
  5. }
  6. .two{
  7.     background: yellow;
  8.     flex:;
  9. }

2、flex-grow：定义当前子元素的比例，比如上面one比例是1，two比例是2。

3、flex-shrink：可选属性。属性定义了子元素的缩小比例，默认为1，即如果空间不足，该子元素将缩小。如果所有子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个子元素的flex-shrink属性为0，其他子元素都为1，则空间不足时，属性为0的不缩小，负值对该属性无效。

4、flex-basis：可选属性。定义分配空间前，该子元素的宽度。默认值auto，可设置固定值（如100px），设置后该子元素将占据固定空间。

  1. .flex{
  2.     display:flex;
  3.     width:200px;
  4.     height:200px;
  5.     background: #ccc;
  6.     margin:50px auto;
  7. }
  8. .one{
  9.     background: blue;
  10.     flex-basis:80px;
  11. }
  12. .two{
  13.     background: yellow;
  14.     flex:;
  15. }

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style>
  6.         .flex{
  7.             display:flex;
  8.             width:200px;
  9.             height:200px;
  10.             background: #ccc;
  11.             margin:50px auto;
  12.             align-items:center;
  13.         }
  14.         .one{
  15.             background: blue;
  16.             flex:1;
  17.             height: 50px;
  18.         }
  19.         .two{
  20.             background: yellow;
  21.             flex:2;
  22.             height: 100px;
  23.             align-self:flex-end;
  24.         }
  25.         .flex div{
  26.             text-align: center;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="flex">
  32.         <div class="one">one1</div>
  33.         <div class="two">two</div>
  34.         <div class="one">one2</div>
  35.     </div>
  36. </body>
  37. </html>

———————————————————————————————分割线——————————————————————————————————

学以致用，我们来用Flex布局实现圣杯布局

要实现的效果：上中下三块，其中中间一块为左中右，左右等宽，中间占其余宽度。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style>
  6.         *{
  7.             padding:0;
  8.             margin:0;
  9.         }
  10.         html,body{
  11.             width: 100%;
  12.             height: 100%;
  13.         }
  14.         .main{
  15.             width:100%;
  16.             height:100%;
  17.             display: flex;
  18.             flex-direction: column;
  19.         }
  20.         .header,.footer{
  21.             flex: 1;
  22.             background: yellow;
  23.         }
  24.         .middle{
  25.             flex: 5;
  26.             display:flex;
  27.         }
  28.         .center{
  29.             flex: 1;
  30.             background: #ccc;
  31.         }
  32.         .left,.right{
  33.             background:green;
  34.             flex: 0 0 100px;
  35.         }
  36.         .left{
  37.             order: -1;
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div class="main">
  43.         <div class="header"></div>
  44.         <div class="middle">
  45.             <div class="center"></div>
  46.             <div class="left"></div>
  47.             <div class="right"></div>
  48.         </div>
  49.         <div class="footer"></div>
  50.     </div>
  51. </body>
  52. </html>

分享完毕，欢迎转载，请注明出处！

参考链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

探讨弹性布局Flexible Box的更多相关文章

  1. 弹性布局 Flexible Box

    页面中任何一个元素都可以指定为 弹性布局(Flex) 属性:display 取值: 1.flex     将块级元素变为弹性布局容器 2.inline-flex   将行内元素变为弹性布局容器 兼容性 ...

  2. CSS：CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  3. 简单探讨弹性布局flex

    css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...

  4. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  5. css3 弹性布局和多列布局

    弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活性. 定义一个弹性盒子 在父盒子上定义display属性: #box{ display ...

  6. 第10章 布局样式相关-伸缩布局（Flexible Box）

    伸缩布局(一) CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或 ...

  7. CSS3 Flex Box 弹性盒子、弹性布局

    目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...

  8. CSS3弹性伸缩布局(一)——box布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

  9. CSS3伸缩盒Flexible Box

    这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...

随机推荐

  1. Asp.Net MVC 之 Autofac 初步使用2 集成mvc 属性注入以及自动注入

    首先看下Demo2的结构     然后下面一步步将Autofac集成到mvc中. 首先,定义Model Product.cs public class Product { public int Id ...

  2. h5标签基础 meta标签

    <meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/>  ,//u ...

  3. 版本管理工具 —— SVN

    想想我们在开发过程中是不是会遇到这样的情况: 今天写了很长的一段代码,觉得不合理,然后删了,第二天突然发现昨天的那段代码才是正确的,那怎么办,也无法撤销删除的代码? 还有团队中多人共同开发一个项目,如 ...

  4. java算法 蓝桥杯（题+答案） 方格填数

    6.方格填数  (结果填空) 如下的10个格子 (如果显示有问题,也可以参看[图1.jpg]) 填入0~9的数字.要求:连续的两个数字不能相邻.(左右.上下.对角都算相邻) 一共有多少种可能的填数方案 ...

  5. React之ref详细用法

    在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像react官网所描述的一样,在reac ...

  6. 2953: [Poi2002]商务旅行

    2953: [Poi2002]商务旅行 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 8  Solved: 8[Submit][Status] Desc ...

  7. http的几种请求的方式（Get、Post、Put、Head、Delete、Options、Trace和Connect）

    http的这几种请求方式各有各的特点,适用于各自的环境.下面我就说说这些方式的各自特点: 1.Get:它的原理就是通过发送一个请求来取得服务器上的某一资源.获取到的资源是通过一组HTTP头和呈现数据来 ...

  8. JAVA发送邮件的DEMO

    最近有朋友问邮件怎么发送,就简单写了个demo,因为懒得找jar包,所以项目是创建的maven工程,具体的maven引用的jar如下: <dependency> <groupId&g ...

  9. APIJSON-以坚持和偏执，回敬傲慢和偏见

    APIJSON简介: APIJSON是一种JSON传输结构协议. 客户端可以定义任何JSON结构去向服务端发起请求,服务端就会返回对应结构的JSON字符串,所求即所得. 一次请求任意结构任意数据,方便 ...

  10. 深入浅出数据结构C语言版（2）——简要讨论算法的时间复杂度

    所谓算法的"时间复杂度",你可以将其理解为算法"要花费的时间量".比如说,让你用抹布(看成算法吧--)将家里完完全全打扫一遍大概要5个小时,那么你用抹布打扫家里 ...