Flexbox 布局教程
Flex 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
使用 flex 布局首先要设置父容器 display: flex
,然后再设置 justify-content: center
实现水平居中,最后设置 align-items: center
实现垂直居中(需要在确定height下才能实现)。
#dad {
height:300px;
display: flex;
justify-content: center;
align-items: center
}
justify-content
和 align-items
是啥?哪里可以看出横向、竖向的语义?是的,flex 的确没有那么简单,这就要从两个基本概念说起了。
flex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器,轴包括 主轴 和 交叉轴,可以说 flex 布局的全部特性都构建在这两个概念上。
一、容器
1.1 父容器
1.1.1 justify-content属性用于定义如何沿着主轴方向排列子容器。
flex-start:起始端对齐
flex-end:末尾段对齐
center:居中对齐
space-around:子容器沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半
space-between:子容器沿主轴均匀分布,位于首尾两端的子容器与父容器相切
1.1.2 align-items属性用于定义垂直方向分配子容器的间距。
flex-start:起始端对齐
flex-end:末尾段对齐
center:居中对齐
baseline:基线对齐,这里的
baseline
默认是指首行文字,即first baseline
,所有子容器向基线对齐,交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。
stretch:子容器沿交叉轴方向的尺寸拉伸至与父容器一致。
1.2 子容器
在主轴上如何伸缩:flex
子容器是有弹性的(flex 即弹性),它们会自动填充剩余空间,子容器的伸缩比例由 flex
属性确定。
flex
的值可以是无单位数字(如:1, 2, 3),也可以是有单位数字(如:15px,30px,60px),还可以是 none
关键字。子容器会按照 flex
定义的尺寸比例自动伸缩,如果取值为none
则不伸缩。
虽然 flex
是多个属性的缩写,允许 1 - 3 个值连用,但通常用 1 个值就可以满足需求,它的全部写法可参考下图。
flex-start:起始端对齐
flex-end:末尾段对齐
center:居中对齐
baseline:基线对齐
stretch:拉伸对齐
二、轴
轴 包括 主轴 和 交叉轴,我们知道 justify-content
属性决定子容器沿主轴(水平方向)的排列方式,align-items
属性决定子容器沿着交叉轴(垂直方向)的排列方式
从左到右:flex-direction: row
- 从上到下:flex-direction: column
- 从右到左:flex-direction: row-reverse
- 从下到上:flex-direction: column-reverse
flex 进阶概念(自适应不同分辨率)
1、父容器
设置换行方式:flex-wrap
决定子容器是否换行排列,不但可以顺序换行而且支持逆序换行。
- nowrap:不换行
- wrap:换行
- wrap-reverse:逆序换行
多行沿交叉轴对齐:align-content
当子容器多行排列时,设置行与行之间的对齐方式。
- flex-start:起始端对齐
- flex-end:末尾段对齐
- center:居中对齐
- space-around:等边距均匀分布
- space-between:等间距均匀分布
- stretch:拉伸对齐
2、子容器
设置基准大小:flex-basis
flex-basis
表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度,主轴为纵向时代表高度。
设置扩展比例:flex-grow
子容器弹性伸展的比例。如图,剩余空间按 1:2 的比例分配给子容器。
设置排列顺序:order
改变子容器的排列顺序,覆盖 HTML 代码中的顺序,默认值为 0,可以为负值,数值越小排列越靠前。
flex总结
Flexbox 布局教程的更多相关文章
- 互动教程,让你5分钟掌握 Flexbox 布局模式
Flexbox 布局模块目前是 W3C 候选标准,旨在提供一个更有效的方式进行布局,对齐和为容器里的项目分配空间,即使它们的大小是未知的或者动态的.这里分享一个基于 Knockout.js 构建的互动 ...
- React Native基础&入门教程:初步使用Flexbox布局
在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- Flex 布局教程:实例篇(转)
你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...
- CSS3弹性盒模型,Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
- (转)Flex 布局教程:
这个博客的内容比较新,多看看 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html [语法篇] http://www.ruanyifeng. ...
- Flexbox 布局的最简单表单 (转)
作者: 阮一峰 弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚.今天,我看到一篇教程 ...
- Flex 布局教程:实例
分类: 开发者手册 Flex 布局教程:实例篇 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Fle ...
- CSS学习笔记(12)--Flex 布局教程:实例篇
原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...
随机推荐
- 执行sql时出现错误 extraneous input ';' expecting EOF near '<EOF>'
调用jdbc执行hive sql时出现错误 Error while compiling statement: FAILED: ParseException line 5:22 extraneous i ...
- Linux入门之常用命令(6)Bash命令重定向 管线命令
命令重定向 将目前所得数据转移到其他地方 > 将输出结果导入文件 如 ls -l / >test (1)若test文件不存在则创建 (2)若test文件存在 清空后写入 > ...
- 移植u-boot-2012.04.01到JZ2440
开发环境:Ubuntu 12.04 开发板:JZ2440 256M NandFlash 64M SDRAM 交叉编译器:arm-linux-gcc-4.3.2 u-boot:u-boot-2012 ...
- Max Sum of Max-K-sub-sequence hdu3415
Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- VBA.NET 系统可行性分析模板
系统可行性分析 1. 技术可行性分析 前提: 系统不知在Window系统中,开发环境不受限制:系统以C/S结构为主,提供大量的数据操作:主要用VB.NET开发,提高安全性和访问效率. 基本要求 客户 ...
- php使用PHPMailer邮件类发送邮件
PHPMailer是一个用于发送电子邮件的PHP函数包.它提供的功能包括:*.在发送邮时指定多个收件人,抄送地址,暗送地址和回复地址*.支持多种邮件编码包括:8bit,base64,binary和qu ...
- JavaScript设计模式接口
JavaScript中实现接口的方法有三种: 第一种,使用注释的方法实现接口 特点:(1)最简单,但是功能最弱(2)利用 interface和 implement"文字"(3)把他 ...
- Python自学笔记-paramiko模块(Mr serven)
文章出处:http://www.cnblogs.com/wupeiqi/articles/5095821.html SSHClient 用于连接远程服务器并执行基本命令 基于用户名密码连接: #!/u ...
- CSS3实现3D旋转相册
静态效果图: 代码如下: <!doctype html><html lang="en"><head> <meta charset=&quo ...
- 斐讯 FIR151M 频繁掉线(OpenWRT解决方案)
0. 现象与前言 在使用斐讯 FIR151M 路由器连接网络时,传输数据时频繁掉线. 官方固件刷了两个版本,问题未解决. 建议高级用户看本教程,要做好不能使用 Web 管理界面的心理准备. 1. 准备 ...