前端布局之Flex语法
前端布局一直是CSS的一个重点应用,然而基于盒子模型的传统布局方案,依赖display
+ position
+ float
属性,对于某些特殊的布局非常不方便,比如:垂直居中就不容易实现。针对这一情况,在2009
年,W3C
提出了一种新的方案:Flex
布局,可以简便、完整、响应式地实现前端的各种布局,并且已经得到几乎所有浏览器的支持。
众所周知,前端分为PC
端和移动端,并且它们的界面布局有一些差别,比如:PC
端的界面中,水平方向是主轴(main axis
),竖直方向是交叉轴(cross axis
);而移动端,水平方向是交叉轴(cross axis
),竖直方向是主轴(main axis
),针对这一差别,在前端布局中要特别注意。
flex属性简介
flex
的属性分为两类:父容器属性和子item
的属性
父容器属性
属性 | 作用 | 特性分类 |
---|---|---|
flex-direction | 定义子项在容器内的排列方向 | 排列 |
flex-wrap | 定义子项在容器内的换行效果 | 排列 |
flex-flow | flex-direction和flex-wrap的复合属性 | 排列 |
justify-content | 定义子项在容器内水平对齐方式 | 对齐 |
align-items | 定义子项在容器内垂直对齐方式 | 对齐 |
align-content | 定义多行子项在容器内整体垂直对齐方式 | 对齐 |
子item属性
属性 | 作用 | 特性分类 |
---|---|---|
order | 定义子项们的排列顺序 | 排列 |
flex-grow | 定义子项宽度之和不足父元素宽度时,子项拉伸的比例 | 占地面积 |
flex-shrink | 定义子项宽度之和超过父元素宽度时,子项缩放的比例 | 占地面积 |
flex-basis | 定义子项的初始宽度,flex-grow和flex-shrink以此为基础缩放 | 占地面积 |
align-self | 定义单个子项与其他项目不一样的对齐方式 | 对齐 |
Flex布局
Flex
是Flexible Box
的缩写,意思是弹性布局,用来为盒子模型提供最大的灵活性。分为两种布局方式:flex
和 inline-flex
。
1. flex: 将对象作为弹性伸缩盒显示
flex
默认从左边开始布局,所以指定宽度后,子item
就开始从左至右依次布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
width:200px;
background-color: red;
display: flex;/*父div设置该属性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性,如果不懂,请继续往下阅读*/
/*float:left;这个属性就不需要了,会自动浮动*/
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
效果图
2. inline-flex:将对象作为内联块级弹性伸缩盒显示
inline-flex
将对象作为内联级容器,它会根据子item
的大小自适应宽度和高度,所以可以删除width: 200px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
background-color: red;
display: inline-flex;/*父div设置该属性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性,如果不懂,请继续往下阅读*/
/*float:left;这个属性就不需要了,会自动浮动*/
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
效果图
flex父容器属性
1. flex direction
控制主轴的方向,即子item
的排列方向,有四个取值范围:
- row(default)- 主轴水平
- row-reverse
- column - 主轴垂直
- column-reverse
2. flex wrap
定义子item
在主轴方向的换行效果
3. flex-flow
该属性是flex-direction
和flex-wrap
两个属性的缩写,默认值为:row nowrap
4. justify content
定义子item
在主轴方向的对齐方式
5. align-items
定义子item
在交叉轴方向的对齐方式
6. align-content
定义多行子item
在交叉轴上的对齐方式
子item属性
1. order
定义子item
的排列顺序,默认为0
2. flex-grow
定义子item
的宽度小于父容器时,子item
的拉伸比例,默认为0
,表示不拉伸
3. flex-shrink
定义子item
的宽度之和超过父容器时,子item
的缩放的比例,默认为1
4. flex-basis
设置子item的宽度(flex-direction = row
)或高度(flex-direction = column
)。如果设置该属性,那么flex-grow/flex-shrink
以该属性大小进行缩放
5. flex
该属性是:flex-grow flex-shrink flex-basis
的简写,默认值为:0 1 auto
,其中后两个属性可选
6. align-self
定义单个子item
在交叉轴上的对齐方式,会覆盖默认的对齐方式。默认值为auto
,表示继承父容器的align-items
属性,如果没有父容器,则等同于stretch
(stretch
: 伸缩项目在交叉轴方向占满伸缩容器, 前提是不设置交叉轴方向的尺寸)
定位
display
属性定义子item
如何在父容器内布局,有两中类型:relative
和 absolute
1. display: relative
在相对定位中,布局子item
时需要用到margin
、border
、padding
等盒子模型。其中,border
和padding
会显示在item的背景色中;而margin
则不会,默认是透明色
2. display: absolute
使用绝对定位的item
,如果其父容器设置了relative
布局,则以父容器做参考,如果父容器不设置relative
布局,则以window
做参考。其中,设置布局的属性为:left、right、top、bottom、start、end
。
Position = Absolute; Start = 0; Top = 0; Width = 50; Height = 50;
视图:
Position = Absolute; Start = 10; Top = 10; End = 10; Bottom = 10;
视图:
至此,Flexbox的语法介绍完毕,虽然有点多,但是还要多练,熟能生巧,熟练后你会发现,前端flex布局快速、高效和灵活。
(部分图片来源互联网,如有侵权,请告知,我怕赔不起)
参考文章
https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context
https://facebook.github.io/yoga/docs/absolute-position/
http://www.cnblogs.com/shuiyi/p/5716918.html
http://www.w3school.com.cn/css/css_boxmodel.asp
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://my.oschina.net/sheila/blog/384806
前端布局之Flex语法的更多相关文章
- 【前端】Flex 布局教程:语法篇 [转]
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- Flex 布局教程:语法和实例
语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便, ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:语法篇[转]
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- Flex 布局教程:语法篇(转)
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- [转]Flex 布局教程:语法篇
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- CSS学习笔记(11)--Flex 布局教程:语法篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 ...
- 一、flex布局教程:语法篇
本文转自阮一峰大师的教程,此处做记录,方面后面自己学习使用~ 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:语法篇 【转】
Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网 ...
随机推荐
- 【ALB技术笔记】基于多线程方式的串行通信接口数据接收案例
基于多线程方式的串行通信接口数据接收案例 广东职业技术技术学院 欧浩源 1.案例背景 在本博客的<[CC2530入门教程-06]CC2530的ADC工作原理与应用>中实现了电压数据采集的 ...
- Java数据类型在实际开发中的应用二枚举类型
在实际编程中,往往存在着这样的"数据集",它们的数值在程序中是稳定的,而且"数据集"中的元素是有限的.在JDK1.5之前,人们用接口来描述这一种数据类型. 1. ...
- webpack1 新手入门教程
本文github仓库地址: https://github.com/Rynxiao/webpack-tutorial ,里面包括了本教程的所有代码. [如果你觉得这篇文章写得不错,麻烦给本仓库一颗星:- ...
- Java读取property配置文件
读取配置文件已经成了Java程序员工作的一项必备技能. 配置文件的优点: 可维护性好 怎么个可维护性好呢? 它会让程序中变化的地方很灵活的配置,不需要修改代码. Java程序部署到服务器上去之后就变成 ...
- Django学习(九)---Templates过滤器及Django shell和Admin增强
一.Templates过滤器 过滤器属于django模板语言 修改模板中的变量,从而显示不同内容 {{ value | filter }} 举例:{{ list_nums | length}} ...
- 发博客用的一些HTML
这个世界,在发生什么? 移动光标 <p style="background: #999999; padding: 5px; font-size: 22px;">< ...
- 51nod_1831: 小C的游戏(Bash博弈 找规律)
题目链接 此类博弈不需要考虑sg函数,只需要确定必胜态和必败态,解题思路一般为打败先打表找规律,而后找规律给出统一的公式.打表方式:给定初始条件(此题中为ok[0]=ok[1]=0),然后从低到高枚举 ...
- [bzoj1805][SCOI2005]骑士精神 [启发式搜索]
Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者横坐标相差为2, ...
- 关于线程和junit注入失败的问题
问题: 在使用spring的时候,通常会使用注释@Autowired或@Resource注入java Bean; 但是在碰到线程类和测试类的时候就不支持注入方式了. 定义: 线程类:继承thread或 ...
- oracle分组-神奇的cube和rollup
先看代码: 表结构如下: emp表 EMPNO NOT NULL NUMBER(4) ENAME ...