CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习
转自:http://www.xifengxx.com/web-front-end/1408.html
CSS2定义了四种布局:块布局、行内布局、表格布局盒定位布局。
CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒(Flexible Box)模型,此布局对于设计比较复杂的页面非常有用,特别是“垂直居中”布局,非常容易实现。
Flexbox布局语法有三种:
旧版本:2009年版本,使用display:box或者display:inline-box; [目前仅Safari浏览器支持]
混合版本:2011年版本,使用display:flexbox或者display:inline-flexbox; [仅IE10支持]
最新版本:使用display:flex或者display:inline-flex. [目前的主流浏览器均支持,不过在Webkit内核浏览器需要使用前缀“-webkit-”]
对于Flex布局,最初是通过看绿叶学习网,学的是flexbox旧版本,感觉很简单;然后又看了大漠老师的《图解CSS3-核心技术与案例实战》,其中详细介绍了三种布局,但我理解的不深,有些迷糊。最后通过网上找到了阮一峰翻译的一篇文章,直观易懂,终于明晰了Flex布局。
关于Flexbox布局旧版本(display:box/inline-box)版本,请参考绿叶学习网教程。
以下内容主要介绍Flexbox布局最新版本。(内容删减自阮一峰博客)
——————————————————————————–
一、Flex布局是什么?
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{display: flex; }
行内元素也可以使用Flex布局。
.box{display: inline-flex; }
Webkit内核的浏览器,必须加上-webkit前缀。
.box{display: -webkit-flex; /* Safari */ display: flex; }
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
二、基本概念
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
三、容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {flex-direction: row | row-reverse | column | column-reverse; }
它可能有4个值。
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
3.2 flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{flex-wrap: nowrap | wrap | wrap-reverse; }
它可能取三个值。
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
3.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {flex-flow: <flex-direction> || <flex-wrap>; }
3.4 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {justify-content: flex-start | flex-end | center | space-between | space-around; }
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
3.5 align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box {align-items: flex-start | flex-end | center | baseline | stretch; }
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
3.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
该属性可能取6个值。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
四、项目的属性
以下6个属性设置在项目上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.1 order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {order: <integer>; }
4.2 flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item {flex-grow: <number>; /* default 0 */ }
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {flex-shrink: <number>; /* default 1 */ }
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
.item {flex-basis: <length> | auto; /* default auto */ }
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; }
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
备注:阮一峰博客上还有一篇文章,《Flex 布局教程:实例篇》,是用具体的案例来解说Flex布局,感兴趣的朋友,可以移步获取。我主要是对其中的“骰子案例”感兴趣:DEMO
转载于:https://www.cnblogs.com/sxz2008/p/6635196.html
CSS3 Flex布局(伸缩布局盒模型)学习相关推荐
- CSS3 弹性布局/伸缩布局 flex
CSS3 之 弹性布局 flex 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
- 【web前端HTML5+CSS3】03CSS--layout(布局)之盒模型
目录 1.文档流 2.盒模型 3.盒模型--边框 4.盒模型--内边距 5.盒模型--外边距 6.盒子的水平布局 7.盒子的垂直布局 8.外边框的折叠 9.行内元素的盒模型 10.默认样式 11.练习 ...
- flex布局实现叠在另一个div之上_CSS3 flex弹性伸缩布局[上]
本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.布局简介 CSS3 提供一种崭新的布局方式:Flexbox 布局,即弹性伸缩布局模型(Fl ...
- css3 flex弹性盒子布局梳理,打通任督二脉
挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...
- css改火狐滚动条样式_css布局系列1——盒模型布局
明确基本概念 网页的布局类似于在一个大盒子中摆放各不相同的小盒子.在布局之前,首先要明确几个概念: 1. 块元素:在页面中独占一行,高度默认被内容(子元素)撑开,宽度默认为父元素的100%,也即aut ...
- CSS3 flex实现等分布局的小案例
就是模仿了一下移动端的淘宝页面上的一小部分的导航栏 哼哼哼 主要是我还得自己切图 然后做,着实有一点点的开心 哈哈哈哈哈 代码走起:个人还是比较喜欢把样式表单独放. html部分: <!DOCT ...
- 【 盒模型】css盒模型学习
盒模型 box:盒子,每个元素在页面中都会生产成一个矩形区域(盒子) 盒子类型 1.行盒,display等于inline的元素 2.块盒,dipplay等于block的元素 行盒在页面中不换行.块盒独 ...
- 两个简单h5小页面布局-练习弹性盒模型
效果(chrome环境下) 页面1:仿小米分类导航布局 点击导航可达对应目录 页面2:仿公众号效果 底部点击显示弹窗 <!-- 页面1 实现导航页面 --><!DOCTYPE htm ...
- flex 平铺布局_CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- 怪异盒模型/flex布局
传统盒模型(标准盒模型) 默认的都是标准盒模型;(border,padding,margin,content) box-sizing:content-box; 盒子的宽度/高度= width/heig ...
最新文章
- 依图科技终止上市审核:冲击科创板「AI第一股」失败
- python中cursor属性_Python – AttributeError:’NoneType’对象没有属性’cursor’
- server sql 判断是否是当天_判断sql server 是否在开启服务状态
- jmeter启动报错 Error occurred during initialization of VM Could not reserve enough space for object heap
- Android动态加载技术三个关键问题详解
- [MOSS开发]:如何使用用户控件
- App后台开发运维和架构实践学习总结(8)——后台产品设计的4个原则
- C++中map的用法详解
- 不安全的文件下载原理
- swift3.0 coreData的使用-日记本demo
- Confluence 6 你模板中可用的对象
- 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_7 获取Servlet原生的API
- 现代电工技术实训考核装置
- 手把手教你写让人眼前一亮的软件测试简历,收不到面试邀请算我输
- 如何判断一个数是素数(质数)
- QtWebApp的使用【在Qt中搭建HTTP服务器】(三)
- Spring3.2.1+Hibernate4.1.7 多数据源动态切换
- 跳过Nexus7第一次开机设置的网络验证
- 解决报错Duplicate keys detected
- CC2530——点对点通信
热门文章
- 包与模块管理及面向对象初步
- cad完全卸载教程_CAD室内设计中厨房布置实例
- python ssh实现_SSH协议的Python实现paramiko
- LeetCode 2141. 同时运行 N 台电脑的最长时间(二分查找)
- LeetCode 502. IPO(优先队列)
- LeetCode 1760. 袋子里最少数目的球(二分查找)
- LeetCode 255. 验证前序遍历序列二叉搜索树(单调栈)*
- 程序员面试金典 - 面试题 16.18. 模式匹配(逻辑题)
- LeetCode 295. 数据流的中位数(大小堆)
- LeetCode 1046. 最后一块石头的重量(priority_queue 堆)