1、弹性布局的使用

（1）  display：flex；给父容器添加这个属性；

（2）  display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

（3）  设为 Flex布局后，子元素的float、clear属性将失效。但是position属性，依然生效。

2、作用于父容器的5个属性

（1）flex-direction属性决定主轴的方向（即项目的排列方向）。

row（默认值）： 主轴为水平方向，起点在左端；

row-reverse： 主轴在水平方向，起点在右端 ；

column：主轴为垂直方向，起点在上沿；

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

（2）flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度；

wrap： 换行，并且第一行在容器最上方；

wrap-reverse： 换行，并且第一行在容器最下方。

如下所示，使用弹性布局，横向排列，起点在左边，换行。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>弹性布局</title>

     <style>

         .box {

             width: 800px;

             height: 500px;

             background-color: aqua;

             display: flex;

             flex-wrap: wrap;

         }

         .box div {

             width: 150px;

             height: 150px;

             background-color: blueviolet;

             border: 2px solid black;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <div>第一个盒子</div>

         <div>第二个盒子</div>

         <div>第三个盒子</div>

         <div>第四个盒子</div>

         <div>第五个盒子</div>

         <div>第六个盒子</div>

         <div>第七个盒子</div>

     </div>

 </body>

 </html>

（3）justify-content属性定义了项目在主轴上的对齐方式。这个属性与主轴方向息息相关。

主轴方向为：row-起点在左边，row-reverse-起点在右边， column-起点在上边，column-reverse-起点在下边。

flex-start（默认值）： 项目位于主轴起点。

flex-end：项目位于主轴终点。

center： 居中

space-between：两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父容器边缘有一定的间隔)

space-evenly：每个项目两侧的间隔相等。所以，项目之间的间隔和项目与边框的间隔相同。

第一张图是space-between的效果，第二张图是space-around的效果，第三张图是  space-evenly的效果。

（4）align-items属性定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)

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

（5）align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

(当项目换为多行时，可使用align-content取代align-items)

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

HTML弹性布局的更多相关文章

  1. css3 FlexBox 弹性布局

    Flex 弹性布局 这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, ...

  2. CSS3中的弹性布局——"em"的用法

    使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”.主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从 ...

  3. 弹性布局flex-兼容问题

    这里弹性布局的用法就不说了 用过的都知道很方便 虽然现在弹性布局已经实现标准了 但是还是存在一些兼容问题 旧版本 (一些低版本的浏览器) display:-webkit-box; 新版本(目前的标准版 ...

  4. 淘宝弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...

  5. 基于淘宝弹性布局方案lib-flexible的问题研究

    上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewp ...

  6. web app 自适应方案总结 关键字 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  7. 移动端弹性布局--flex

    目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...

  8. CSS3支持box-flex弹性布局

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

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

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

  10. flex弹性布局学习笔记

    前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...

随机推荐

  1. 极验验证码在php5.6.27下不显示

    PHP5.6需要改php.ini 去掉;always_populate_raw_post_data = -1的 :

  2. JMS学习三（ActiveMQ消息的可靠性）

    下面我们来学习一下消息接受确认和发送持久化消息.消息的过期.消息的选择器和消息的优先级. 一.消息接收确认 1.jms消息只有在被确认之后才认为成功消费了这条消息.消息的成功消费通常包括三个步骤:(1 ...

  3. java实现微信小程序服务端(登录)

    微信小程序如今被广泛使用,微信小程序按照微信官网的定义来说就是: 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 这就是微信小程序的魅力所在,有 ...

  4. Comparable接口与Comparator接口的比较————Comparator接口详解

    Comparator接口位于:java.util包中. Comparator接口:1. 强行对某个对象的Collection进行整体排序.值得注意的是:Comparator接口可以作为参数传到一些so ...

  5. 转载 用ShadowVolume画模型的影子

    阅读目录(Content) Shadow Volume 包围盒 动态生成包围盒 判断 多光源下的阴影 总结 问题 CSharpGL(48)用ShadowVolume画模型的影子 回到顶部(go to ...

  6. 使用type在对象方法中调用类方法

    type简介 type在Python中的作用是创建一个类. 我们创建类的时候一般会使用这样的方法: # -*- coding:utf-8 -*- class Student(object): coun ...

  7. java网络通信：伪异步I/O编程(PIO)

    缺点:避免了线程资源耗尽的问题,但是根本上来说,serversocket的accept方法和inputstream的输入流方法都是阻塞型方法. 服务端:加了一个线程池,实现线程复用.客户端不变 pub ...

  8. 我在DBGridEh增加一栏复选框及对应操作的解决方案

    最近客户有个需求,要求对单据列表里指定的单据进行批量审核,很自然的,我想到了在DBGridEh增加一栏复选框的列,审核时遍历所有单据,将打了勾的单据审核就可以了.查阅了网上很多文章,不外有2个方案,1 ...

  9. tensorflow运行原理分析(源码)

    tensorflow运行原理分析(源码)  https://pan.baidu.com/s/1GJzQg0QgS93rfsqtIMURSA

  10. C# user32.dll找窗口时，使用GetClass方法解决 【带有系统自动编译的窗体类后缀名】 问题

    [DllImport("user32.dll", SetLastError = true, CharSet = CharSet.Auto)] static extern int G ...