弹性布局–flex

（一）视口单位主要包括以下4个：

  1. vw：1vw等于视口宽度的1%
  2. vh：1vh等于视口高度的1%
  3. vmin：选取vm和vh中最小的那个
  4. vmax：选取vm和vh中最大的那个

常用于手机端

（二）概述

设为flex布局以后，子元素的float、clear和vertical-align属性将失效；所有脱离文档流的元素，flex也失效

（三）声明

使用display属性声明flex
display：flex；
display：inline-flex;

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>flex</title>
  6. <style type="text/css">
  7.  footer{
  8.   display: flex;
  9.   height: 80px;
  10.   background-color:#8a8c8e;
  11.  }
  12.  footer div{
  13.   color: #FFF;
  14.  }
  15. </style>
  16. </head>
  17. <body>
  18.  <footer>
  19.  <div>最新日期</div>
  20.  <div>联系我们</div>
  21.  <div>往期文章</div>
  22.  <div>更新日期</div>
  23.  </footer>
  24. </body>
  25. </html>

（四）flex容器属性

1.flex-direction属性决定主轴方向
row：默认主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上端
column-reserve：主轴为垂直方向，起点在下端

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>flex</title>
  6. <style type="text/css">
  7.  footer{
  8.   display: flex;
  9.   /*flex-direction: row-reverse;*/
  10.   /*flex-direction: column;*/
  11.   flex-direction: column-reverse;
  12.   width: 600px;
  13.   border: solid 1px red;
  14.  }
  15.  footer div{
  16.   width: 100px;
  17.  height: 100px;
  18.   margin: 10px;
  19.   text-align: center;
  20.   line-height: 100px;
  21.   background-color: green;
  22.   color: #FFF;
  23.  }
  24.  </style>
  25. </head>
  26. <body>
  27.  <footer>
  28.  <div>最新日期</div>
  29.  <div>联系我们</div>
  30.  <div>往期文章</div>
  31.  <div>更新日期</div>
  32.  </footer>
  33. </body>
  34. </html>

2.flex-wrap
nowrap：默认不换行
wrap：换行，第一行元素在后面元素的上方
wrap-reserve：换行，第一行元素在后面元素的下方

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>flex</title>
  6. <style type="text/css">
  7.  footer{
  8.   display: flex;
  9.   flex-wrap:wrap；
  10.   flex-direction: column-reverse;
  11.   width: 200px;
  12.   height：600;//设置高度会自适应
  13.   border: solid 1px red;
  14.  }
  15.  footer div{
  16.   width: 100px;
  17.  height: 100px;
  18.   margin: 10px;
  19.   text-align: center;
  20.   line-height: 100px;
  21.   background-color: green;
  22.   color: #FFF;
  23.  }
  24.  </style>
  25. </head>
  26. <body>
  27.  <footer>
  28.  <div>最新日期</div>
  29.  <div>联系我们</div>
  30.  <div>往期文章</div>
  31.  <div>更新日期</div>
  32.  </footer>
  33. </body>
  34. </html>

3.flex-flow（组合）
flex-flow是flex-direction和flex-wrap组合，默认值：row nowrap；

4.justify-content（主轴方向）
flex-start:默认值，主轴起点对齐
flex-end:主轴终点对齐
center：居中
space-between：两端对齐的间隔相等
space-around：每个元素的间隔相等，最前、最后元素跟边框的距离是中间元素之间距离的一半
space-evenly：每个元素之间、元素与边界之间的距离全部平均分配，但兼容性较低

5.align-items(交叉轴）
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center：交叉的中点居中
baseline：元素第一第一行文字的基线对齐
strech：轴线占满整个交叉轴

6.align-content（多个主轴的对齐方式）
如果元素只有一根轴，该属性不起作用
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center：交叉的中点居中
space-between：交叉轴两端对齐的间隔相等
space-around：每根轴线两侧间隔相等
space-evenly：元素平均分配
strech：默认值，轴线占满整个交叉轴

（五）flex元素属性

  • 不能使用float与clear规则
  • 弹性元素均为块级元素//可以设置宽高
  • 绝对定位的弹性元素不参与弹性布局

1.align-self:设置单个元素的对齐方式，可覆盖align-items属性
默认值auto

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>flex</title>
  6. <style type="text/css">
  7.  footer{
  8.   display: flex;
  9.   align-content: center;
  10.   width: 600px;
  11.   height: 300px;
  12.   flex-flow:  row nowrap;
  13.   align-items: center;
  14.   justify-content: center;
  15.   border: solid 1px red;
  16.  }
  17.  footer div{
  18.   width: 100px;
  19.   height: 100px;
  20.   margin: 10px;
  21.   text-align: center;
  22.   line-height: 100px;
  23.   background-color: green;
  24.   color: #FFF;
  25.  }
  26.  footer div:first-child{
  27.   align-self: flex-start;
  28.  }
  29.  footer div:last-child{
  30.   align-self: flex-end;
  31.  }
  32. </style>
  33. </head>
  34. <body>
  35. <footer>
  36. <div>最新日期</div>
  37. <div>联系我们</div>
  38. <div>往期文章</div>
  39. <div>更新日期</div>
  40. </footer>
  41. </body>
  42. </html>

2.flex-grow
元素放大的比例，默认0，即存在剩余空间，也不放大
1.如果所以元素为1，则将剩余空间等分（权重大于宽高）
2.如果所以元素为1，则将剩余空间等分，有一个为0，则0那个保持原样

3.flex-shrink缩小，默认值为1

4.flex-basis
属性定义在分配多余空间之前，元素占据的主轴空间，浏览器根据这个属性，计算轴是否有多余空间，默认值为auto，权重大于宽高

5.flex（组合）
是flex-grow，flex-shrink，flex-basis组合，默认值 0 1 auto，后两个可选
6.order：排列顺序，值越大越靠后

html5学习内容-6（flex）的更多相关文章

  1. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  2. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  3. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  4. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  5. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  6. HTML5学习总结——HTML5入门与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...

  7. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  8. HTML5学习之语义化标签（一）

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  9. HTML5学习指导路线

    HTML5是现在热门的技术,经过8年的艰苦努力,该标准规范终于制定完成,在这里为想要学习HTML5初级程序员详细划分一下学习内容和步骤,让大家清楚的知道HTML5需要学什么?能够快速掌握HTML5开发 ...

  10. HTML5学习笔记（四）：H5中表单新增元素及改良

    方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...

随机推荐

  1. Android进阶-NDK技术

    一.介绍 1.什么是ndk技术? 在学习ndk技术前,我们需要先了解一下JNI(Java Native Interface)技术,JNI技术是一种实现Java代码和C/C++代码之间交互的技术,它提供 ...

  2. 正确处理 CSV 文件的引号和逗号

    CSV(Comma-Separated Values,逗号分割值),就是用纯文本的形式存储表格数据,最大的特点就是方便. 作为开发,我们经常面临导数据的问题,特别是后台系统,产品或者运营的同事常常会提 ...

  3. YOLOv6在LabVIEW中的推理部署（含源码）

    前言 YOLOv6 是美团视觉智能部研发的一款目标检测框架,致力于工业应用.如何使用python进行该模型的部署,官网已经介绍的很清楚了,但是对于如何在LabVIEW中实现该模型的部署,笔者目前还没有 ...

  4. Swithch反汇编（四种）

    ------------恢复内容开始------------ Switch语法格式 Switch(表达式) { case 常量表达式1: 语句; break; case 常量表达式2: 语句; bre ...

  5. python连接数据库及查询包含中文错误解决方法

    使用MySQLdb库来连接数据库 import MySQLdb conn = MySQLdb.connect(host='127.0.0.1', user='root', passwd='', por ...

  6. 小白也能搞定！Windows10上CUDA9.0+CUDNN7.0.5的完美安装教程

    前言: 为什么要在本地电脑安装 CUDA,CUDA 是什么的,用来做什么?我想,点击标题进来的小伙伴,应该都清楚这些.不管你是用来做什么,或者跟我一样为了跑 Tensorflow 的 Object D ...

  7. vlan与单臂路由

    vlan 1,什么是vlan vlan叫做虚拟局域网 (VLAN, Virtual LAN) 虚拟局域网(VLAN)是一组逻辑上的设备和用户,这些设备和用户并不受物理位置的限制,可以根据功能.部门及应 ...

  8. SAP 传输请求释放及传输过程 SE10 STMS

    T-CODE:SE10 STMS 1.传输请求释放 首先通过SE10打开传输组织器. 点击[显示],可以看到待释放的请求. 此时将可修改请求中的请求,点击进行展开,可以看到子请求号和请求属性. 选中请 ...

  9. LeetCode 周赛上分之旅 #39 结合中心扩展的单调栈贪心问题

    ️ 本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问. 学习数据结构与算法的关键在于掌握问题背后的算法思维框架,你的思考越 ...

  10. 【pytorch】从零开始，利用yolov5、crnn+ctc进行车牌识别

    笔者的运行环境:python3.8+pytorch2.0.1+pycharm+kaggle用到的网络框架:yolov5.crnn+ctc项目地址:GitHub - WangPengxing/plate ...