页面布局-----display:flex详解
简介：
display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。
Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
- display flex容器的属性
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
实例：
接下来我们用下面的代码进行对上面的属性进行逐一具体的演示
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>/* 在css中设置 row */.content{width : 500px;height : 300px;background-color : brown;}.content-item{width : 50px;height: 50px;}.item1{background-color: black;}.item2{background-color: blue;}.item3{background-color: red;}</style></head><body><div class="content"><div class="content-item item1"></div><div class="content-item item2"></div><div class="content-item item3"></div> </div></body></html>其样式如此
flex-direction属性决定主轴的方向（即项目的排列方向），其有一下几个属性：
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
/* 我们在父div中设置加入两行代码 *//* flex-direction:row; */ .content{width : 500px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction:row;}
其样式如此
/* flex-direction: row-reverse; */ .content{width : 500px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: row-reverse;}
其样式如此
/* flex-direction: column; */ .content{width : 500px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: column;}
其样式如此
/* flex-direction: column-reverse; */ .content{width : 500px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: column-reverse;}
其样式如此
flex-wrap属性决定了如果一条轴线排不下，如何换行。
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
/*设置默认不换行*//*flex-wrap:nowrap;*/ .content{width : 300px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: row;flex-wrap:nowrap;}
其样式如此
我们可以明显看到，每一个子div都被压缩到了一行。
/*设置换行*//*flex-wrap:wrap;*/ .content{width : 300px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: row;flex-wrap:wrap;}
其样式如此
我们可以明显看到了分行。之所以没有出现两行紧紧挨在一起，是因为我们没有设置子div在列上如何排布，我们会在后面的align-content属性介绍。
/*flex-wrap:wrap-reverse;*/ .content{width : 300px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: row;flex-wrap:wrap-reverse;}
其样式如此
justify-content属性定义了项目在主轴上的对齐方式。其有一下几个属性：
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。
/* 左对齐*//* justify-content:flex-start;*/.content{width : 300px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: row;flex-wrap:wrap;justify-content:flex-start;}
其样式如此
/* 右对齐*//* justify-content:flex-end;*/.content{width : 300px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: row;flex-wrap:wrap;justify-content:flex-end;}
其样式如此
/* 居中*//* justify-content:center;*/.content{width : 300px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: row;flex-wrap:wrap;justify-content:center;}
其样式如此
/* 两端对齐*//* justify-content:space-between;*/.content{width : 300px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: row;flex-wrap:wrap;justify-content:space-between;}
其样式如此
/* 间隔相等*//* justify-content:space-around;*/.content{width : 300px;height : 300px;background-color : brown;/* 新加的代码 */display : flex;flex-direction: row;flex-wrap:wrap;justify-content:space-around;}
其样式如此
align-items属性定义项目在交叉轴上如何对齐。简单来讲，加入我们将flex-direction设置为row，即主轴为行。align-items可以决定元素在列上的布局。其有一下几个属性：
- flex-start：交叉轴的起点对齐，一行根据上边对齐。
- flex-end：交叉轴的终点对齐，一行根据下边对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。简单来讲，加入我们将flex-direction设置为row，即主轴为行。align-content决定了出现很多行时，这些行之间怎么对齐。其有一下几个属性：
- flex-start：与交叉轴的起点对齐，跟作文一样，一行一行紧挨着。
- flex-end：与交叉轴的终点对齐，跟 flex-start类型，不过时从底部开始数。
- center：与交叉轴的中点对齐，从中间向下向上扩散。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。
- stretch（默认值）：轴线占满整个交叉轴。
页面布局-----display:flex详解相关推荐
- CSS页面布局（超详解）
目录 1 CSS页面布局概述 1.1 概述 1.2 网页栏目划分 1.3 元素类型转化 1.3.1 块元素 1.3.2 行内元素 1.3.2 块元素和行内元素的转换 1.4 定位 1.4.1 静态定位 ...
- css display：flex详解
页面布局的时候经常需要给块级子元素居中,目前发现最方便直接的是父级元素使用display:flex属性, css display:flex 属性 6 2018.09.04 16:03:53 字数 90 ...
- display属性详解及用法
display属性详解 1 block.inline.inline-block 2 flow-root 3 table.inline-table 4 flex.inline-flex 5 none 6 ...
- python布局管理_Python基础=== Tkinter Grid布局管理器详解
本文转自:https://www.cnblogs.com/ruo-li-suo-yi/p/7425307.html @ 箬笠蓑衣 Grid(网格)布局管理器会将控件放置到一个二维的表 ...
- 弹性盒中 flex详解及flex：1的用法解析
弹性盒中 flex详解及flex:1的用法解析 一.flex 在了解 flex:1 之前我们先了解一下flex的属性值有哪些,就如同background一样,有着backgournd-images.b ...
- flex html 页面移动,HTML页面布局之flex弹性盒子
这里是修真院前端小课堂,本篇分析的主题是 [HTML页面布局之flex弹性盒子] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
- ajax 页面无刷新,Ajax的页面无刷新实现详解（附代码）
这次给大家带来Ajax的页面无刷新实现详解(附代码),Ajax页面无刷新实现的注意事项有哪些,下面就是实战案例,一起来看一下. ajax (ajax开发) AJAX即"Asynchronou ...
- html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 要求不再浏览器中添加office插件的前提下.展示WOR ...
- 第二讲：ADS入门和Data DisPlay操作详解
第二讲:ADS入门和Data DisPlay操作详解 设计流程简介 创建Workspace的过程和设计讲解 仿真设计要素和原理图 元件面板和元器件操作 仿真控件 仿真分析设置和运行仿真分析 查看分析结 ...
最新文章
- C++中的endl搭配cout和cin用法
- C语言数组、字符与字符串笔记
- mac系统一些快捷键
- 解决/usr/bin/ld: cannot find -lxxx 问题
- 交互设计-手机端原型尺寸规范
- 关于ASCII码和机内码
- ps，ae，ui，ai，pr，cad，3DMAX，c4d，cdr，摄影后期
- iPhone 如何将图片转换为文字
- 局域网传文件_跨平台传输文件方案大汇总（中篇）——可能全网最全的传输方案了...
- 30日21时:上海铁路局通报列车最新晚点信息
- MATHTYPE安装出现问题：无法打开要写入的文件；MathType打开word时“安全警告，宏已被禁用”；mathtype与AXmath不能同时使用
- MTK笔试面试题集锦
- 小红书流量不好数据差，怎么解决？
- 【eMMC学习记录】emmc相关名词解释和基础概念
- 计算机毕业设计ssm+vue基本微信小程序的快递柜管理系统
- Mysql命令行导出远程mysql数据库到虚拟机本地的mysql中
- 学术资料账号密码全集汇总
- serializeArray()与 serialize()
- Python周刊481期
- Charle工具详解之实战演练问题分析、https抓包、流量设置、断点配置