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. Introduction-to-Psychology Slides

    最近在网易公开课学习耶鲁大学Paul Bloom教授的<心理学导论>,英文水平有限,视频中一直没有出现PPT,无意中找到一份课件,现分享于此,大家自取! 链接:https://pan.ba ...

  2. js for循环中i++与++i有什么区别

    平时都是这样写的for循环, 1 2 3 for(var i = 0; i < 20 ; i++){        ....       } 但我看有的人这样写 for (var i = 0; ...

  3. @清晰掉 string.h之基础堵漏

    一个标准的strcpy函数: 原本以为自己对strcpy还算比较了解,结果面试时还是悲剧了. 下面给出网上strcpy的得分版本: 2分 void strcpy( char *strDest, cha ...

  4. 2、node-webkit运行web应用，node-webkit把web应用打包成桌面应用

    下面我通过一个简单的demo来介绍怎么样把一个web应用打包成一个可执行文件(这里只介绍windows环境) 首先新建一个index.html文件,作为我们这个demo的入口页面,我们暂且就把这个页面 ...

  5. Html/CSS 初步介绍html和css部分重要标签

    &初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...

  6. CentOS7_装机软件推荐

    目录 目录 前言 CentOS7中文支持 Install Yum Fastest Mirror Plugin Install Flash Player Install NTFS-3G Install ...

  7. 【奇技淫巧】使用 SSH 转发 Sock5 流量

    标题:使用 SSH 转发 Sock5 流量 日期:2018-06-27 介绍:使用 ssh 来做个 sock5 的代理,穿透到内网中做后渗透 0x01. 基本信息 在 ubuntu(10.211.55 ...

  8. HTML学习之==>DOM操作

    DOM(Document Object Model 文档对象模型) 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通过dom对象中j ...

  9. Android下Native的so编译：使用ndk-build.cmd/.sh

    最近将一个DLL库移植至安卓下,编译出so文件. 经历makefile.cmake等等的入门到放弃..... 最后还是使用android的ndk编译命令来解决 每个NDK文件下,均包含的是所有工具链. ...

  10. oracle-控制文件的备份和恢复

    本篇将介绍各种备份及恢复控制文件的方法,在介绍恢复时,以备份和重做日志(包括归档日志和在线日志)没有丢失为前提. 无备份情况下的控制文件恢复参考13.3,丢失重做日志的情况请参考12篇“不完全数据库恢 ...