布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

需要安卓4.4及以上版本可以使用display:-webkit-flex;，安卓4.4以下使用display:-webkit-box;

如需要更深入了解flex布局，请参考阮一峰博文——Flex 布局教程：实例篇

现在大部分浏览器都支持flexbox布局方法。react和react-native中几乎全部采用flex来布局。

布局导航菜单：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>flex布局导航菜单</title>

     <style>

             body{

                 background: white;

                 font-family: 'Open Sans', sans-serif;

             }

             .main ul{

                 list-style: none;

                 display: flex;    /*<li>元素由垂直排列变成了水平排列。这是因为flex的flex-direction属性的默认值为row*/

             }

             .main li{width:100px;}

             .main a{

                 text-decoration: none;

                 font-size: 21px;

                 font-weight: 600;

                 color: #00a9d9;

             }

             .main a:hover{text-decoration: underline;}

     </style>

 </head>

 <body>

     <nav class="main">

         <ul >

             <li><a href="#">Home</a></li>

             <li><a href="#">News</a></li>

             <li><a href="#">Contact</a></li>

             <li><a href="#">About</a></li>

         </ul>

     </nav>

 </body>

 </html>

 <!--

     flex会让<ul>这个容器成为一个具有flex功能的block-level容器，并且会影响到它的子元素的布局表现。

     如果想让<ul>成为一个inline元素，可以写成display: inline-flex，这样它仍然具有flex container的效果，同时也表现为一个inline元素，就像<img>一样。

     当加上display: flex;后，<li>元素由垂直排列变成了水平排列。这是因为flex的flex-direction属性的默认值为row,如果我们添加上flex-direction:column,

     <li>元素又变为了垂直排列

  -->

效果如下：

　　　　

早期时候我们做网站布局的使用表格(table)，然后使用浮动(float)、 定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。

display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。

此外我还写了一个Flex布局的属性详解的文章详细的介绍了各种属性。

计算一个盒子占用的空间是 content + padding + border + margin

flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度

1.例子

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>登陆</title>

     <style type="text/css">

         html{width: 100%;height: 100%;}  /*整个页面的居中*/

         body{

             width: 100%;

             height: 100%;

             display: flex;             /*flex弹性布局*/

             justify-content: center;

             align-items: center;

         }

         #login{

             width: 300px;

             height: 300px;

             border: 1px black solid;

             display: flex;

             flex-direction: column;        /*元素的排列方向为垂直*/

             justify-content: center;    /*水平居中对齐*/

             align-items: center;        /*垂直居中对齐*/

         }

     </style>

 </head>

 <body>

     <div id="login">

         <h1>登陆</h1>

         <input type="text"><br>

         <input type="password"><br>

         <button>确定</button>

     </div>

 </body>

 </html>

输出结果:

2.例子

一个经典的三栏布局

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS 布局</title>

 </head>

 <style>

 .container{

     height:200px;

     width: 200px;

     display: flex

 }

 .left{

     background-color: red;

     flex: 1;

 }

 .middle{

     background-color: yellow;

     flex: 1;

 }

 .right{

     background-color: green;

     flex: 1;

 }

 </style>

 <body>

     <div class=container>

         <div class=left></div>

         <div class=middle></div>

         <div class=right></div>

     </div>

 </body>

 </html>

输出结果：

有时我们可能需要两边定宽，中间自适应，那么可以这样写：

.left{

　　background-color: red;

　　width: 20px;

}

.middle{

　　background-color: yellow;

　　flex:;

}

.right{

　　background-color: green;

　　width: 20px;

}

输出结果:

　　　　　　

网页布局——Flex弹性框布局的更多相关文章

  1. 【flex弹性盒布局】------这个强大的功能

    你知道flex弹性布局么? 我们先来了解它的概念:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 ...

  2. css笔记 - flex弹性盒布局

    flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...

  3. flex弹性盒子布局

    一.在需要使用弹性盒子的容器上添加属性:display:flex 或者 display:inline-flex; 二.在父容器上添加flex-direction设置子元素主轴方向: 不写默认值是X轴从 ...

  4. css3 flex弹性盒子布局梳理，打通任督二脉

    挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...

  5. 网页布局——grid弹性网格布局

    网格布局(Grid)是最强大的 CSS 布局方案. Flexbox 是为一维布局设计的,而 Grid 是为二维布局设计. grid目前兼容性目前还可以,主流浏览器对它的支持力度很大,ie9,10宣布它 ...

  6. Flex 弹性盒子布局使用教程

    本文转载于<https://blog.csdn.net/lyznice/article/details/53981062>

  7. 前端入门5-CSS弹性布局flex

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  8. Flex box 弹性盒子布局

    display: -webkit-flex 标识使用弹性布局 flex: num  占容器的比例   Flex等比划分 导航1 : Flex :1;  导航2  Flex: 2;     ————&g ...

  9. css3弹性伸缩布局(一)—————flex布局

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

随机推荐

  1. briup_jdbc自建工具类终极版

    总结:此次构建工具类,难点在于查询,所需要的功能是 不管是 oracle还是mysql 都可以连接,并且 提供所需要的实体类,都可以将查询内容封装到实体类中去 遇到的难点  连接时,是从prppert ...

  2. java1.8新特性（一）接口的默认方法

    一 简介 我们通常所说的接口的作用是用于定义一套标准.约束.规范等,接口中的方法只声明方法的签名,不提供相应的方法体,方法体由对应的实现类去实现. 在JDK1.8中打破了这样的认识,接口中的方法可以有 ...

  3. C++临时变量的回顾思考以及librdkafka设置回调函数注意点

    1 生命周期 如果仅仅是临时变量,并没有调用new来在堆上创建空间,那么注意 : 生命周期仅在该作用域中,即声明该临时变量的{}中: 2 使用(librdkafka C++回调使用) 在创建临时变量后 ...

  4. Java连载28-内存分析

    一.方法在执行过程中是如何分配内存的,内存是如何变化的? 1.方法只定义,不调用,是不会执行的,并且在JVM中也不会给该方法分配”运行所属“的内存空间,只有在调用这个方法的时候,才会动态的给这个方法分 ...

  5. Xshell配置公钥，免密码登陆

    下面讲解如何通过xshell配置使用PubKey 来登录服务器,可以减少通过password登录的麻烦. 1.先到用户的家目录, cd ~ 2.执行ssh-keygen -t dsa(or rsa) ...

  6. 【LeetCode】Two Sum II - Input array is sorted

    [Description] Given an array of integers that is already sorted in ascending order, find two numbers ...

  7. 3.1、双向循环链表（java实现）

    1.创建节点类 public class CNode<T> { public CNode prev; public CNode next; public T data; public CN ...

  8. 各种浏览器UA值

    UA  User-Agent:用户代理,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器引擎.浏览器语言.浏览器插件等. 标准格式为: 浏览器标识 ...

  9. 上手Dubbo之 环境搭建

    和传统ssm整合--写XML配置文件 搭建服务的提供者和服务的消费者,实现服务消费者跨应用远程调用服务提供者 公共模块抽取 公共模块的抽取 服务的消费者远程调用服务的提供者, 最起码他自己要得到在服务 ...

  10. 关闭vue的eslint代码检测和WebStorm的代码检测

    1. 在vue项目中 bulid > webpack.base.conf.js 中: 如图,在rules规则中有一条规则是校验代码的,也就是红框2那行,要取消可以直接注释掉这行,或者把红框1的函 ...