Flex布局就是“弹性布局”，它可以简便、完整、响应式地实现各种页面布局。引入弹性布局的目的，当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式，对一个容器中的子元素进行排列、对齐和分配空间。

　　弹性容器（Flex container）通过设置display属性的值为flex，包含多个弹性子元素(Flex item，很多资料把弹性子元素称为“项目")

　　 关于弹性布局的语法，阮一峰老师的博客比较经典，很多其他博客都是转载自此。
　　 关于弹性布局的实例，阮一峰老师的另外一篇博客也很经典。

　　读者如果对flex布局语法不熟悉或者想结合实例来理解flex布局，可以仔细研读以上两个博客。

　　本文，主要是对典型的页面布局再整理一下，以达到使读者更深入细致地理解flex布局的目的

　　 经典的圣杯布局或双飞翼布局，页面分为头部（HEADER）、躯干（.CONTAINER)、尾部(FOOTER)，其中头部、尾部定高，躯干高度自适应，躯干又分为导航（NAV）、主栏（MAIN)、侧栏(ASIDE)，其中导航和侧栏定宽，主栏的宽度自适应。
　　以前的传统代码用到了浮动，代码稍显繁琐，其实可以使用flex布局，这样代码更简洁。

　　典型的页面布局效果图如下：

　　DOM结构如下：

  1. 1 <body>
  2. 2     <header>HEADER</header>
  3. 3     <div class="container">
  4. 4         <nav>NAV</nav>
  5. 5         <main>MAIN</main>
  6. 6         <aside>ASIDE</aside>
  7. 7     </div>
  8. 8     <footer>FOOTER</footer>
  9. 9 </body>

　　以下的CSS代码跟flex布局无关，它能影响背景色、固定高度值、固定宽度值等，读者了解即可，这不是本文的重点。

  1.  html{
  2.             height: 100%;
  3.             text-align:center;
  4.         }
  5.       body{
  6.           margin:0;
  7.           height:100%;
  8.           color:red;
  9.          }
  10.          header{
  11.              height: 120px;
  12.              background-color: cornflowerblue;
  13.          }
  14.  
  15.        .container{
  16.             background-color: #ccc;
  17.             display: flex;
  18.             height:calc(100% - 170px);
  19.        }
  20.        footer{
  21.            height: 50px;
  22.            background-color: #000;
  23.            line-height:50px;
  24.            text-align:center;
  25.        }
  26.        nav{
  27.            background-color: lightgreen;
  28.        }
  29.        main{
  30.            background-color:#ccc;
  31.        }
  32.        aside{
  33.            background-color: orange;
  34.        }

　　以下的CSS代码跟flex布局有关

  1.  1 .container{
  2.  2             display: flex;
  3.  3             flex-direction:row;
  4.  4             flex-wrap:nowrap;
  5.  5             justify-content:flex-start;
  6.  6             align-items:stretch;
  7.  7        }
  8.  8
  9.  9        nav{
  10. 10            flex:0 0 200px;
  11. 11        }
  12. 12        main{
  13. 13            flex:1;
  14. 14        }
  15. 15        aside{
  16. 16            flex:0 0 150px;
  17. 17        }
  18. 18

　　其中.container是父容器，就是本文所指的“弹性容器(Flex container)”，nav、main、aside是子元素，就是本文所指的“弹性子元素（Flex item)"，或者叫”项目“

  1. 弹性容器的属性

  2. 1、display:flex  通过这个属性值把.container定义为弹性容器，这个属性是弹性布局中最根本的属性，没有这个属性（以及属性值），其它属性都没有意义。
  3. 2、flex-direction:row 表示主轴沿着水平轴方向，这是默认值。
  4. 3、flex-wrap：nowrap 表示不换行，无论子元素多少都在一行显示。
  5. 4、justify-content:flex-start 子元素在主轴上的对齐方式，本例中main元素自适应，填满剩余空间，所以justify-content无论取什么值，对本例来说，效果都是一样的。
  6. 5、align-items:stretch 子元素在交叉轴（和主轴垂直）上的对齐方式，本例中没有指定nav、main、aside的高度，所以拉伸（stretch）到和父元素（弹性容器）一样的高度。
  1. 子元素（项目）的属性

  2. nav/aside
  3. flex:0 0 200px/flex:0 0 150px是一种简写形式
  4. 相当于：
  5. flex-grow:0 主轴上有剩余空间子元素也不分配
  6. flex-shrink:0 主轴上空间不足子元素也不缩小
  7. flex-basis:200px/150px nav/aside在收缩前的基准值是200px/150px（对于flex-direction：row来说就是宽度）
  8. main
  9. flex:1是快捷键，相当于flex:1 1 0%
  10. 即：
  11. flex-grow:1
  12. flex-shrink:1
  13. flex-basis:0%（即：0px）
  14. flex：1表示以0px为基准，自动收缩，这个属性值经常用。

　　Flex布局和多媒体查询结合，使响应式布局更加简便

  1. 　　　　/*中等屏幕*/
  2.        @media (max-width:992px){
  3.             /*主轴沿水平方向，超出空间后换行*/
  4.             .container{flex-direction:row;flex-wrap:wrap;}
  5.             /*nav、aside各占一半宽度*/
  6.             nav,aside{flex:0 0 50%;height:200px;}
  7.             /*main独占一行*/
  8.             main{order:1;flex:0 0 100%;}
  9.         }
  10.         /*小屏幕*/
  11.         @media (max-width:768px){
  12.             .container{
  13.             display:flex;
  14.             /*小屏幕时，因为nav、aside、main都独占一行，*/
  15.             /*所以主轴设置为沿垂直方向（交叉轴就沿水平方向）*/
  16.             flex-direction:column;
  17.             flex-wrap:nowrap;
  18.             }
  19.             nav,aside{
  20.             width:100%;
  21.             /*因为flex-direction:column，所以flex-basis:100px含义就是高度=100px*/
  22.             /*固定高度100px*/
  23.             flex:0 0 100px;
  24.             }
  25.             /*通过order属性，设置显示的先后顺序*/
  26.             nav{order:1;}
  27.             /*flex：1自适应*/
  28.             main{flex:1;order:3;}
  29.             aside{order:2;}
  30.         }

　　中等屏幕效果图如下：

小屏幕效果图如下：

轻轻松松学CSS:Flex布局的更多相关文章

  1. 轻轻松松学CSS:Grid布局

    网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...

  2. 轻轻松松学CSS:媒体查询

    轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...

  3. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  6. css flex布局详解

    来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...

  7. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  8. [Web 前端 ] 还在用浮动吗？CSS flex布局你了解多少？

    cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...

  9. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

随机推荐

  1. Unity中利用柏林噪声(perlinnoise)制作摇摆效果

    perlinnoise是unity中Mathf下的一个函数,需要两个float参数x和y进行采样,返回一个0-1的float型. 项目里经常要随机摇摆某些东西,比如摄像机,某个随机运动的目标等等,都可 ...

  2. Rng(求逆元)

    Problem Description Avin is studying how to synthesize data. Given an integer n, he constructs an in ...

  3. Hive 高阶应用开发示例(一)

    Hive的一些常用的高阶开发 内容    1.开窗函数   2.行转列,列转行,多行转一行,一行转多行   3.分组: 增强型group   4.排序  5.关联 本次的内容: 内容1 和内容2,采用 ...

  4. 05_进程间通信 IPC

    1.进程间的通信方式 1.磁盘交互: 速度慢,不安全 2.socket套接字 3.管道通信(Pipe) 4.消息队列(Queue, Manager().Queue, JoinableQueue) 5. ...

  5. 极简显示sessionid的jsp程序 war下载

    下载地址:https://files.cnblogs.com/files/xiandedanteng/simpleJspSessionId20200103.zip 解压后得到myweb.war就是可以 ...

  6. Mybatis-解决属性名和字段名不一致的问题

    解决属性名和字段名不一致的问题 目录 解决属性名和字段名不一致的问题 1. 问题 2. ResultMap 1. 问题 在数据库中,密码字段为pwd,而在实体类中为password package c ...

  7. -webkit-line-clamp下多行文字溢出点点点...

    限制在一个块元素显示的文本的行数. -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 为了实现该 ...

  8. Java数据类型之Cache模式

    1.关于Java数据类型 基本数据类型 基本数据类型有8种,每种基本数据类型都有对应的引用类型. 类型 描述 长度 可表示数据 包装类型 boolean 布尔型 1 true.false Boolea ...

  9. [SqlServer]数据库备份-问题及解决

    正常数据库备份 备份:右键要备份的数据库-任务-备份 还原:右键数据库-还原数据库 问题1-"还原数据库备份时报错"介质集有2个介质簇,但只提供了1个.必须提供所有成员" ...

  10. nginx实战（1）：宝塔设置反向代理

    以下操作适用于默认80端口转其他地址非80端口情况. 添加网站 注意:因我只是拿来当反向代理来使用,所PHP为纯静态模式. 开启反向代理 注:目标URL为最终目的地,发送域名为默认,如设置后无效则修改 ...