Flex布局及其应用
什么是弹性盒子?
弹性盒子是 CSS3 的一种新的布局模式。相对于传统的依赖于
display
+position
+float
的布局方式,弹性盒子更加以有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
如何开启?
任何一个容器都可以指定为Flex布局,你需要的仅仅是增加一行
display: flex;
如果是行内元素的话则是
display: inline-flex;
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
相关概念
被指定为Flex的元素称之为"容器",该容器当中的子元素则是会成为它的“项目”,一个元素可以既是容器也是项目。
如上图所示,一个容器当中存在两根轴,默认为主轴的水平轴,默认为交叉轴的垂直轴。默认情况下容器当中的项目是沿着主轴方向排列的。
容器属性
- flex-direction: 该属性决定主轴的方向
属性值为:row(默认)、row-reverse、column、column-reverse,分别对应的主轴以及起点为左、右、上、下。
- flex-wrap: 是否换行
属性值为:nowrap(默认)、 wrap、wrap-reverse,分别对应不换行,换行,换行且第一行放在下面。
- justify-content: 主轴上对齐方式
属性值为:flex-start(默认)、flex-end、center、space-between、space-around,分别对应为起点对齐、终点对齐、居中对齐,两端对齐,左右间隔相等对齐(可以看做左右设置不重叠的margin)。
- align-items: 交叉轴对齐方式
属性值为:flex-start、flex-end、center、baseline、stretch(默认),分别对应起点、终点、居中、第一行文字基线、占满容器高度(默认,未设置高度或者auto情况下)
- align-content: 多轴线对齐方式
注意:只有一根轴的时候无效,也就是单行项目是无效的。
注意:这里的多轴线是多行的意思,不是指代垂直水平两根轴。
属性值为:flex-start、flex-end、center、space-between、space-around、stretch(默认),分别对应交叉轴的起点、终点、居中、两端、相同间隔、占满(可以看做平均分配了,但是项目设置宽高的话,空间上会平均分配,但是项目本身宽高不会变)
项目属性
- order: 排列顺序,越小的排前面,默认为0
- flex-grow: 放大比例,默认为0,如果所有都为1,等分剩余空间
- flex-shrink: 缩小比例,默认为1
- flex-basis: 设置固定宽高,可以占据固定空间,默认auto
- flex:flex-grow flex-shrink flex-basis的简写,后两个可选
- align-self: 项目单独对齐方式(脱离大部队啊!)可覆盖align-items属性
实用Flex应用
应用场景:
1 浏览器的视口空间不足,要求视口中的特定块要按照比例进行缩放
2 应对一些布局是要以基准线(baseline)对齐的特殊布局方法
3 需要模块垂直居中
- 基本网格布局
也就是每一行自适应且等分空间,通过项目的flex属性设置
flex: 1;
- 百分比布局
同样是利用项目的flex属性,为第三个值设定百分比占据固定百分比。
flex: 0 0 20%;
- 圣杯布局
传统圣杯布局实现麻烦,使用flex后仅仅需要改变nav栏目的order比main小就行
order: -1;
参考
Flex布局及其应用的更多相关文章
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- CSS之flex布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- [flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
- flex布局
一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...
随机推荐
- ARP协议抓包之帧长度和Gratuitous ARP的问题
用Winpcap编程构造ARP包选择网卡并发出,遇到若干问题,学到了许多新知识,但是有的还尚未解决,在这里记录下没解决的和解决的问题. 先来看下ARP协议的格式,ARP字段有28个字节,发到以太网中还 ...
- 17.async 函数
async 函数 async 函数 含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 ...
- [转] Hadoop MapReduce开发最佳实践(上篇)
前言 本文是Hadoop最佳实践系列第二篇,上一篇为<Hadoop管理员的十个最佳实践>. MapRuduce开发对于大多数程序员都会觉得略显复杂,运行一个WordCount(Hadoop ...
- Head First Python学习笔记4——处理数据
有这么几组数据需要你处理: James 2-34,3:21,2.34,2.45,3.01,2:01,2:01,3:10,2-22 Julia 2.59,2.11,2:11,2:23,3-10,2-23 ...
- 莫名其妙的标记之@noescape
Swift 中经常遇到一些不熟悉的关键字, 例如@autoclosure, @noescape...等等, 为什么要加这样的关键字, 我自己写方法的时候什么时候要加, 什么时候不加, 都是应该考虑的问 ...
- 网络编程: 基于UDP协议的socket
udp是无链接的,启动服务之后可以直接接受消息,不需要提前建立链接 UDP协议的通信优势: 允许一个服务器同时和多个客户端通信, TCP不行 服务端 import socket sk = socket ...
- display:table-cell自适应布局下连续单词字符换行——张鑫旭
之前有几次提到了使用display:table-cell实现强大的任意尺寸元素的自适应布局(都藏在长长文章之中).这里开篇再次提一下,希望能将该技术普及下去. 典型的双栏布局类名使用如下: fix l ...
- Android EditText方框验证码 短信验证码攻略
本文由xiawe_i提供. xiawe_i的博客地址是: http://www.jianshu.com/u/fa9f03a240c6 项目中有这样一个需求: 验证码页是四个方框,输入验证码方框颜色改变 ...
- fuzz系列之afl
afl 实战 前言 像 libFuzzer, afl 这类 fuzz 对于 从文件 或者 标准输入 获取输入的程序都能进行很好的 fuzz, 但是对于基于网络的程序来说就不是那么方便了. 这篇文章介绍 ...
- 搭建Kafka开发环境
Kafka版本是:kafka_2.10-0.8.2.1 1.maven工程方式 在pom.xml中配置kafka依赖 1 2 3 4 5 <dependency> <grou ...