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. luogu P2661 信息传递 x

    P2661 信息传递 题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知 ...

  2. zabbix配置通过远程命令来发送邮件

    1.安装好zabbix后,在/var/log/zabbix可以查看日志. 2.主机通过zabbix-get检查 yum install zabbix-get -y zabbix-get  -s 客户主 ...

  3. Selenium 定位一组元素

    到目前为止,我们已经知道了怎么去定位一个元素,有时候我们需要获取页面上的多个元素,该怎么办呢?难道还一个一个地去定位,那也太lower了吧. webdriver提供了定位一组元素的方法,跟前面讲的那八 ...

  4. [IOI2008/BZOJ1791 岛屿]（处理基环树的小技巧&基于bfs树形DP）

    IOI2008/BZOJ1791 岛屿 题目大意是在一个基环树森林里求每一棵基环树的直径①的和. 其实就是树的直径的基环树升级版.我们先把环找出来,然后从环上的每一个节点x出发,并且不经过环上其他节点 ...

  5. mysql 安装相关

    Mysql 是基于C/S端的管理文件的服务器软件. Mysql简单分为两个软件:1服务器软件 2客户端软件 对于服务器软件中的socket服务器是一只开着的,客户端需要连接,并且还有创建文件删除文件等 ...

  6. laravel Route::resource() 资源路由

    格式: Route::resource('/order', 'OrderController', ['as' => 'admin']); 框架自动创建路由及其对应控制器中的方法: 请求方式 路由 ...

  7. visudo编辑sudoers

    [root@b ~ ]# visudo   #编辑配置文件 相当于vim /etc/sudoers文件 root用户名(谁) ALL任何主机(哪里)=(ALL) 以什么身份(可以切换到所有用户下) a ...

  8. 二、启动一款app演示

    一.下载aapt包 1. aapt即Android Asset Packaging Tool,在SDK的build-tools目录下.该工具可以查看apk包名和launcherActivity 2.打 ...

  9. 阶段3 1.Mybatis_11.Mybatis的缓存_5 缓存的概念

    2.Mybatis中的缓存     什么是缓存         存在于内存中的临时数据.     为什么使用缓存         减少和数据库的交互次数,提高执行效率.     什么样的数据能使用缓存 ...

  10. 【命令汇总】Windows 应急响应

    日期:2019-06-07 16:11:49 作者:Bay0net 介绍:Windows 应急响应.取证及溯源相关内容学习记录 0x00.前言 常见的应急分类: web入侵:网页挂马.主页篡改.Web ...