html5学习内容-6（flex）
弹性布局–flex
（一）视口单位主要包括以下4个：
- vw：1vw等于视口宽度的1%
- vh：1vh等于视口高度的1%
- vmin：选取vm和vh中最小的那个
- vmax：选取vm和vh中最大的那个
常用于手机端
（二）概述
设为flex布局以后，子元素的float、clear和vertical-align属性将失效；所有脱离文档流的元素，flex也失效
（三）声明
使用display属性声明flex
display：flex；
display：inline-flex;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
footer{
display: flex;
height: 80px;
background-color:#8a8c8e;
}
footer div{
color: #FFF;
}
</style>
</head>
<body>
<footer>
<div>最新日期</div>
<div>联系我们</div>
<div>往期文章</div>
<div>更新日期</div>
</footer>
</body>
</html>
（四）flex容器属性
1.flex-direction属性决定主轴方向
row：默认主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上端
column-reserve：主轴为垂直方向，起点在下端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
footer{
display: flex;
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
flex-direction: column-reverse;
width: 600px;
border: solid 1px red;
}
footer div{
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
background-color: green;
color: #FFF;
}
</style>
</head>
<body>
<footer>
<div>最新日期</div>
<div>联系我们</div>
<div>往期文章</div>
<div>更新日期</div>
</footer>
</body>
</html>
2.flex-wrap
nowrap：默认不换行
wrap：换行，第一行元素在后面元素的上方
wrap-reserve：换行，第一行元素在后面元素的下方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
footer{
display: flex;
flex-wrap:wrap；
flex-direction: column-reverse;
width: 200px;
height：600;//设置高度会自适应
border: solid 1px red;
}
footer div{
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
background-color: green;
color: #FFF;
}
</style>
</head>
<body>
<footer>
<div>最新日期</div>
<div>联系我们</div>
<div>往期文章</div>
<div>更新日期</div>
</footer>
</body>
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
footer{
display: flex;
align-content: center;
width: 600px;
height: 300px;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
border: solid 1px red;
}
footer div{
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
background-color: green;
color: #FFF;
}
footer div:first-child{
align-self: flex-start;
}
footer div:last-child{
align-self: flex-end;
}
</style>
</head>
<body>
<footer>
<div>最新日期</div>
<div>联系我们</div>
<div>往期文章</div>
<div>更新日期</div>
</footer>
</body>
</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）的更多相关文章
- HTML5 学习总结（一）——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- HTML5 学习笔记（一）——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- HTML5学习笔记（一）：HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
- HTML5学习总结——HTML5入门与新增标签
一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...
- [html5] 学习笔记-表单新增的元素与属性（续）
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- HTML5学习之语义化标签（一）
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- HTML5学习指导路线
HTML5是现在热门的技术,经过8年的艰苦努力,该标准规范终于制定完成,在这里为想要学习HTML5初级程序员详细划分一下学习内容和步骤,让大家清楚的知道HTML5需要学什么?能够快速掌握HTML5开发 ...
- HTML5学习笔记（四）：H5中表单新增元素及改良
方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...
随机推荐
- Linux 命令：btrfs filesystem resize
btrfs filesystem resize 2:300G /path ## 为创建了btrfs文件系统,已经挂载到/path 且device ID为2的硬盘/分区进行resize # 已经做过硬盘 ...
- 若依前后端分离版：增加新的登录接口和新的用户表，用于小程序或者APP获取token，并使用若依的验证方法
相关原创链接直接放这: 基于若依框架springsecurity添加多种用户登录解决方案(springsecurity多用户登录:前端用户.后端用户)_若依多用户表登录_云优的博客-CSDN博客 若依 ...
- 在Volo.Abp微服务中使用SignalR
假设需要通过SignalR发送消息通知,并在前端接收消息通知的功能 创建SignalR服务 在项目中引用 abp add-package Volo.Abp.AspNetCore.SignalR 在Mo ...
- 文心一言 VS 讯飞星火 VS chatgpt （71）-- 算法导论7.1 1题
参照图 7-1的方法,说明 PARTITION在数组 A=(13,19,9,5,12,8,7,4,21,2,6,11)上的操作过程. 文心一言: PARTITION 是一种常见的快速排序算法,其目的是 ...
- PoW是什么？
PoW是什么? 工作量证明(proof of work,PoW)是一种用于确认和验证区块链交易和新区块有效性的共识算法.区块链中常见的工作量证明算法包括比特币的SHA-256.以太坊的Ethash.莱 ...
- nginx配置源IP访问控制
通过nginx的ngx_http_access_module模块,可实现对客户端的源IP地址进行允许或拒绝访问控制.该模块默认已编译. 允许访问指令 名称 允许访问指令 指令 allow 作用域 ht ...
- 一文了解 history 和 react-router 的实现原理
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:霜序 前言 在前一篇文章中,我们详细的说了 react-r ...
- MIT 6.828 Lab实验记录 —— lab1 Booting PC
实验参考信息 MIT 6.828 lab1 讲义地址 MIT 6.828 课程 Schedule MIT 6.828 lab 环境搭建参考 MIT 6.828 lab 工具guide Brennan' ...
- 算术逻辑单元的实现（ALU）
一.实验目的 掌握Vivado集成开发环境 掌握Verilog语言基本知识. 掌握并理解算术逻辑单元ALU的原理和设计 二.实验预习 1．ALU(算术逻辑单元)的16种运算的编码 三.模块接口设计 A ...
- 领域驱动设计(DDD):DDD落地问题和一些解决方法
欢迎继续关注本系列文章,下面我们继续讲解下DDD在实战落地时候,会具体碰到哪些问题,以及解决的方式有哪些. DDD 是一种思想,主要知道我们方向,具体如何做,需要我们根据业务场景具体问题具体分析. 充 ...