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. Proxy-代理器（预计vue3.0实现双向绑定的方式）

    todo 常见的基于数据劫持的双向绑定有两种实现,一个是目前Vue在用的Object.defineProperty,另一个是ES2015中新增的Proxy,而Vue的作者宣称将在Vue3.0版本后加入 ...

  2. mysql workbench中PK,NN,UQ,BIN,UN,ZF,AI字段类型标识说明

    PK:primary key 主键 NN:not null 非空 UQ:unique 唯一索引 BIN:binary 二进制数据(比text更大) UN:unsigned 无符号(非负数) ZF:ze ...

  3. 为java类起别名

    <typeAliases> <!-- 1.typeAlias:为某个java类型起别名 type:指定要起别名的类型全类名;默认别名就是类名小写:employee alias:指定新 ...

  4. 修改web项目发布路径

    Eclipse中用Tomcat发布的Web项目,更改其部署路径 我的Eclipse的工作目录是D:/workspace先配置Tomcat 选择你的tomcat版本 点击next 这里先不要把项目添加进 ...

  5. jest 提示 Unexpected identifier 的解决方案

    概述 今天在玩 jest 的时候,发现用 import 就会报 Unexpected identifier 的错误.查了很久的资料,最后终于解决了. 参考资料:Jest tests can't pro ...

  6. 在项目中配置PageHelper插件时遇到类型转换异常

    PageHelper是一种常用的分页工具,按照常规方法在mybatis的配置文件中整合它: <?xml version="1.0" encoding="UTF-8& ...

  7. spring中的增强类型

    在spring中有两种增强方式:XML配置文件和注解配置.下面一次为大家讲解. 使用的是Aspectj第三方框架 纯POJO (在XML中配置节点) 使用@AspectJ,首先要保证所用的JDK 是5 ...

  8. JDK7新特性

    二进制字面量 数字字面量可以出现下划线 switch语句可以用字符串 泛型简化 异常的多个catch合并 try..with...resource语句 import java.io.FileReade ...

  9. 【MM系列】SAP 物料帐下修改物料的价格

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 物料帐下修改物料的价格   ...

  10. 【bzoj4710】[Jsoi2011]分特产

    JYY 带队参加了若干场ACM/ICPC 比赛,带回了许多土特产,要分给实验室的同学们. JYY 想知道,把这些特产分给N 个同学,一共有多少种不同的分法?当然,JYY 不希望任何一个同学因为没有拿到 ...