css 快速入门之 flex 布局教程

flex 简称弹性布局，是2009年W3C提出的 css3 新属性。

弹性布局（flexible box）模块旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。最重要的是弹性盒子布局与方向无关，相对于常规的布局（块是垂直和内联水平为基础），很显然，这些工作以及网页设计缺乏灵活性，无法支持大型和复杂的应用程序（特别当它涉及到改变方向，缩放、拉伸和收缩等）。注意： Flexbox布局是最合适的一个应用程序的组件，以及小规模的布局，而网格布局是用于较大规模的布局。

元素设置为 flex 或者 inline-flex 后，称为容器，不能被继承。容器直接子元素称为项目。项目的 float、clear 和 vertical-align 属性也无效。

优点在于其容易上手，根据 flex 规则很容易达到某个布局效果。

缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。

属性	描述
设置在容器上
flex-direction	设置项目的排列方向
flex-wrap	设置项目换行
flex-flow	简写：<flex-direction> <flex-wrap>
justify-content	设置项目在主轴方向的对齐方式
align-items	设置项目在交叉轴的对齐方式
align-content	设置多根轴线的对齐方式
设置在项目上
order	设置项目的排列顺序
align-self	设置单个项目的对齐方式
flex-grow	设置项目的放大比例
flex-shrink	设置项目的缩小比例
flex-basis	设置项目的基准值
flex	简写：<flex-grow> <flex-shrink> <flex-basis>

css 快速入门之 flex 布局教程相关推荐

flex.css快速入门，极速布局
什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它,但是我想我们都会有一个共同的经历,面对它的各种版本,各种坑,傻傻的分不清楚,flex.css就是对fle ...
HTML Flex布局教程
Flex 布局教程:语法篇 bShare.addEntry({ title: document.getElementById("page-title").innerHTML, ur ...
css基础精华---Flex 布局教程：实例篇
转载地址:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html http://www.ruanyifeng.com/blog/2015/0 ...
Flex 布局教程：语法篇
阮一峰的网络日志 » 首页 » 档案上一篇:ES6 的功能侦测库下一篇:Flex 布局教程:实分类: 开发者手册 Flex 布局教程:语法篇作者: 阮一峰日期: 2015年7月10日网页布 ...
Flex 布局教程：实例篇
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
Flex 布局教程实例
Flex 布局教程实例一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 F ...
视频教程-快速入门Android开发视频教程 android studio-Android
快速入门Android开发视频教程 android studio 任苹蜻,爱学啊创始人 & CEO,曾就职于某二车手公司担任Android工程师后离职创办爱学啊,我们的宗旨是:人生苦短,我 ...
XML快速入门的保姆级教程!!!
XML快速入门的保姆级教程!!! 简介基础语法组成部分约束约束分类 DTD schema 解析 Jsoup Jsoup:工具类,可以解析html或xml文档,返回Document对象 Docu ...

css 快速入门之 flex 布局教程

css 快速入门之 flex 布局教程

css 快速入门之 flex 布局教程相关推荐

最新文章

热门文章