频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
CSS3弹性伸缩布局盒(Flexible Box)模型
2016-07-07 09:11:28         来源:macanfa的博客  
收藏   我要投稿

1.前言

CSS3中引入的布局模式Flexbox布局,主要是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳的方式填充可用空间(适配所有类型的现实设备和屏幕大小)。
Flexbox布局功能主要有以下几点:

屏幕和浏览器窗口大小改变时可以灵活调整布局 指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),来调整项目大小。(注意,额外空间的概念要理清楚!) 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间 指定如何将垂直于元素布局周的额外空间分布到该元素的周围 控制元素在页面上的布局方向 可以在浏览器渲染周不按照文档流先后顺序重排伸缩项目顺序

2.Flexbox模型中术语:

1.主轴和侧轴
Flexbox
- 主轴、主轴方向<喎"/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPqO6yezL9cjdxve1xNb31uGjrMnsy/XP7sS/1vfSqtHY18XV4sz11uG9+NDQsry+1qOsPHN0cm9uZz61q8rHo6Gyu9K7tqjKx8uuxr21xKOsyKG+9tPaanVzdGlmeS1jb250ZW50yvTQ1KOsyKHWtc6qY29sdW1uyrGjrNb31uG3vc/yzqrX3c/ytcShozwvc3Ryb25nPjxiciAvPg0KLSA8c3Ryb25nPtb31uHG8LXjoaLW99bh1tW14zwvc3Ryb25nPqO6yezL9c/uxL+3xdbD1NrJ7Mv1yN3G98TatNPW99bhxvC148/y1vfW4dbVteO3vc/yoaM8YnIgLz4NCi0gPHN0cm9uZz7W99bhs6S2yKGi1vfW4bOktsjK9NDUPC9zdHJvbmc+o7o8c3Ryb25nPsnsy/XP7sS/1NrW99bht73P8rXEv+22yLvyuN+2yL7NysfP7sS/tcTW99bhs6S2yDwvc3Ryb25nPqOsxMS49r/ttsi78rjftsjK9NDUttTXxdb31uG+zdPJy/y+9raooaM8L3A+DQo8c3Ryb25nPrLg1uGhorLg1uG3vc/yPC9zdHJvbmc+o7rT69b31uG0udaxtcS3vc/yo6zIob7209rW99bht73P8qGjIDxzdHJvbmc+suDW4cbwteOhorLg1uHW1bXjPC9zdHJvbmc+o7rM7sL6z+7Ev7XEyezL9dDQtcTF5NbDtNPI3cb3tcSy4NbhxvC147Hfv6rKvKOszfmy4Nbh1tW147HfveHK+KGjIDxzdHJvbmc+suDW4bOktsihorLg1uGzpLbIyvTQ1Dwvc3Ryb25nPqO6PHN0cm9uZz7J7Mv1z+7Ev9TasuDW4be9z/K1xL/ttsi78rjftsi+zcrHz+7Ev7XEsuDW4bOktsg8L3N0cm9uZz6jrMTEuPa/7bbIu/K437bIyvTQ1LbU18Wy4Nbhvs3Tycv8vva2qKGjDQo8cD48c3Ryb25nPjIuyezL9cjdxve6zcnsy/XP7sS/o7o8L3N0cm9uZz48L3A+DQo8cD48c3Ryb25nPsnsy/XI3cb3o7o8L3N0cm9uZz7NqLn9ZGlzcGxhecr00NTP1Mq+tdi4+NK7uPbUqsvYyejWw86qZmxleLvyaW5saW5lLWZsZXijrNXiuPbI3cb3vs3Kx9K7uPbJ7Mv1yN3G9yHJ6NbDzqpmbGV4tcTI3cb3sbvk1si+zqrSu7j2v+m8ttSqy9ijrMno1sPOqmlubGluZS1mbGV4tcTI3cb3vauxu+TWyL7OqtK7uPbQ0MTa1KrL2KGjPC9wPg0KPHA+PHN0cm9uZz7J7Mv1z+7Ev6O6PC9zdHJvbmc+0ru49snsy/XI3cb3tcTE2sjdvt/T0MHjuPbS1MnPtcTJ7Mv1z+7Ev6OsyezL9cjdxve1xMO/uPbX09Sqy9i2vLvhs8nOqtK7uPbJ7Mv1z+7Ev6GjPC9wPg0KPHA+PHN0cm9uZz4zLsnsy/XI3cb3tcTK9NDUo7o8L3N0cm9uZz48L3A+DQo8c3Ryb25nPsnsy/XB97e9z/Kjujwvc3Ryb25nPta4yezL9cjdxve1xNb31uG3vc/yo6y+9raowcvJ7Mv1z+7Ev7fF1sPU2snsy/XI3cb3tcS3vc/yoaM8c3Ryb25nPs2ouf1mbGV4LWRpcmVjdGlvbsr00NTAtMno1sOjrMSsyM/Wtc6qcm93oaM8L3N0cm9uZz7J7Mv1wfe3vc/yus3K6dC0xKPKvdPQudjPtaOsyezL9c/uxL+4+b7dyunQtMSjyr21xLe9z/KyvL7WoaMgPHN0cm9uZz7J7Mv10NC7u9DQPC9zdHJvbmc+o7rJ6NbDyezL9cjdxve1xMnsy/XP7sS/ysc8c3Ryb25nPrWl0NDP1Mq+u7nKx7bg0NDP1Dwvc3Ryb25nPsq+o6zS1Lywvva2qLLg1uG1xLe9z/KhozxzdHJvbmc+zai5/WZsZXgtd3JhcMr00NTAtMno1sPJ7Mv1z+7Ev8rHt/G7u9DQo6zErMjPzqpub3dyYXChozwvc3Ryb25nPiA8c3Ryb25nPsnsy/W3vc/y0+u7u9DQPC9zdHJvbmc+o7rJ7Mv10+u7u9DQyvTQ1GZsZXgtZmxvd82syrHJ6Laowcs8c3Ryb25nPsnsy/XB97e9z/JmbGV4LWRpcmVjdGlvbrrNyezL9bu70NBmbGV4LXdyYXDBvbj2yvTQ1Dwvc3Ryb25nPqGjysfBvbj2yvTQ1LXEy/XQtKOsvva2qMHLyezL9cjdxve1xNb31uG6zbLg1uGhoyA8c3Ryb25nPtb31uG21MbrPC9zdHJvbmc+o7rJ6NbDyezL9cjdxve1scew0NDJ7Mv1z+7Ev9Ta1vfW4be9z/K1xLbUxuu3vcq9o6zWuLaoyOe6ztTayezL9c/uxL/Wrrzkt9ayvMnsy/XI3cb3tu7N4r/VvOShoyA8c3Ryb25nPrLg1uG21MbrPC9zdHJvbmc+o7rJ7Mv1z+7Ev7/J0tTU2snsy/XI3cb3tbHHsNDQtcSy4Nbhyc+9+NDQttTG67XEt73KvaGjIDxzdHJvbmc+ttHVu8nsy/XQ0Dwvc3Ryb25nPqO6tqjS5cnsy/XI3cb31tDJ7Mv1z+7Ev9DQ1Nqy4NbhtcS21Mbrt73KvaOswODLxtPasuDW4bbUxuujrNa7sru5/crH08PAtL/Y1sbJ7Mv1z+7Ev9DQ1NqyvL7W1uG1xLbRt8W3vcq9oaMNCjxwPjxzdHJvbmc+NC7J7Mv1z+7Ev7XEyvTQ1KO6PC9zdHJvbmc+PC9wPg0KPHA+0ru49snsy/XP7sS/ysfSu7j2yezL9cjdxve1xNfT1KrL2KGjyezL9cjdxvfW0LXEzsSxvtKysbvK086q0ru49snsy/XP7sS/oaPJ7Mv1z+7Ev9bQxNrI3dPrxtXNqMH30rvR+aGj09C8uLj2yvTQ1L/J0tS199X7yezL9c/uxL+1xNDQzqqjujwvcD4NCjxzdHJvbmc+z9TKvsuz0PI8L3N0cm9uZz46v8nS1M2ouf3J7Mv1z+7Ev7XEz9TKvsuz0PLQ3rjEyezL9c/uxL/U2tKzw+bW0M/Uyr7Ls9Dyo6zSsr/J0tS21Mnsy/XP7sS/vfjQ0MXF0PLX6brPoaMgPHN0cm9uZz6y4NbhttTG6zwvc3Ryb25nPqO609DBvdbWo6w8c3Ryb25nPmFsaWduLWl0ZW1zus1hbGlnbi1zZWxmyvTQ1Dwvc3Ryb25nPqOhYWxpZ24taXRlbXO/ydLU08PAtMno1sPJ7Mv1yN3G99bQsPzAqMTkw/vJ7Mv1z+7Ev7XEy/nT0M/uxL+1xLbUxuu3vcq9o7u2+GFsaWduLXNlbGbW99Kq08PAtLWltsC1xMnsy/XP7sS/yc+4stC0xKzIz7XEttTG67e9yr2ho9TaxOTD+8nsy/XP7sS/1tCjrGFsaWduLXNlbGa1xNa108DUttPrxuS52MGqtcTJ7Mv1yN3G97XEYWxpZ24taXRlbXO1xNa1z+DNrKGjIDxzdHJvbmc+yezL9dDUPC9zdHJvbmc+o7q/ydLUvavJ7Mv1yN3G97XEtu7N4r/VvOS31reiuPjG5Mnsy/XP7sS/u/K9q8v8w8fL9dCh0tS3wNa5yezL9c/uxL/S57P2oaMgPHN0cm9uZz7J7Mv10NA8L3N0cm9uZz6jusnsy/XP7sS/0djXxcnsy/XI3cb3tcTSu7j2yezL9dDQtqjOu6GjyezL9cjdxve/ydLUyse1pdDQtcSjrNKyv8nS1MrHtuDQ0LXEoaPG5Nb30qrTyWZsZXgtd3JhcMr00NS+9raooaMNCjxoMiBpZD0="3flexbox模型语法规范">3.Flexbox模型语法规范

旧版本:

box:将对象作为弹性伸缩盒显示。(伸缩盒最老版本)

inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)

混合版本:

flexbox:将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)

inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)

最新版本:

flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)

inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)

Flexbox布局的语法规范经过多年的变更,版本众多,浏览器对语法支持度也不同,理智分清对应版本下的规范写法!!!

4.Flexbox模型语法变更:

参考:http://www.runoob.com/css3/css3-flexbox.html

伸缩容器:通过设置display属性将一个元素变成伸缩容器,其子元素会自动变成伸缩项目:
这里写图片描述

伸缩流方向:指定伸缩容器主轴的伸缩流方向
这里写图片描述

伸缩行换行:指定伸缩项目是否沿着侧轴排列
这里写图片描述

主轴对齐方式:指定伸缩项目沿主轴对齐方式,包括左对齐、中间对齐、右对齐、两端对齐和扩散对齐。(justify-content…)
这里写图片描述

侧轴对齐方式:指定伸缩项目沿侧轴的对齐方式,包括顶边对齐、中间对齐、底部对齐、基线对齐和伸缩项目拉伸填充整个伸缩容器。
这里写图片描述

单个伸缩项目对齐方式类似于侧轴对齐方式属性,主要用来设置伸缩项目在侧轴的对齐方式,覆盖伸缩项目在伸缩容器中侧轴的对齐方式。
这里写图片描述

伸缩项目行(堆栈伸缩行)对齐方式:只有伸缩容器设置flex-wrap为wrap时,并且没有足够的空间把伸缩项目放在同一行中。这个属性只有伸缩项目时有多行时才生效。
这里写图片描述

显示顺序:重置伸缩项目的现实顺序。
这里写图片描述

伸缩性:控制伸缩项目在伸缩容器中扩展或收缩伸缩项目的宽度,用来填充伸缩容器的额外空间。
这里写图片描述

那么,问题来了!你看完上面的归纳晕不晕?就问你晕不晕?反正我是晕了(◎﹏◎)

5.新版本Flexbox模型

1.伸缩容器display(用于伸缩容器)

display:flex | inline-flex;

flex:块伸缩容器
inline-flex:内联伸缩容器

注意:CSS的columns在伸缩容器上没有效果;float、clear和vertical-align在伸缩项目上没有效果。

2.伸缩流方向flex-direction(用于伸缩容器)

flex-direction:row | row-reverse | column | column-reverse ;

row:在ltr排版方式下从左向右排列,在rtl排版方式下从右向左排列
column:类似于row,不过是从上到下排列
row-reverse和column-reverse是与对应的row和column排列方向相反

主要用来创建主轴,从而定义 了伸缩项目放置在伸缩容器的方向

3.伸缩换行flex-wrap(用于伸缩容器)

flex-wrap:nowrap | wrap | wrap-reverse

nowrap:伸缩容器单行显示,在ltr和rtl排版方式下按对应方向排列;
wrap:伸缩容器多行显示,在ltr和rtl排版方式下按对应方向排列;
wrap-reverse:伸缩容器多行显示,但在ltr排版下,伸缩项目从右向左排列;rtl排版下,伸缩项目从左向右排列(和wrap相反)

主要用来定义伸缩容器里是单行显示还是多行显示,侧轴的方向决定了新行堆放的方向

4.伸缩流方向和换行flex-flow(用于伸缩容器)

flex-flow:<’flex-direction’> || <’flex-wrap’>

是伸缩流方向flex-direction和伸缩行换行flex-wrap的缩写版本

同时定义了伸缩容器的主轴和侧轴。

5.主轴对齐justify-content(用于伸缩容器)

justify-content:flex-start | flex-end | center | space-between | space-around

flex-start:伸缩项目向一行的起始位置靠齐
flex-end:伸缩项目向一行的结束为止靠齐
center:伸缩项目向一行的中间位置靠齐
space-between:伸缩项目会平均分布在行里,第一个和最后一个伸缩项目靠着开始和结束位置
space-around:伸缩项目会平均分布在行里,两端保留一半的空间

主要用来定义伸缩项目沿着主轴线的对齐方式。

6.侧轴对齐align-items(用于伸缩容器)和align-self(用于伸缩项目)

设置伸缩项目在侧轴的对齐方式有两种。一种是伸缩项目行在侧轴的对齐方式,由属性align-items控制;另一种是伸缩项目自身在侧轴的对齐方式,主要由属性align-self控制

align-items:flex-start | flex-end | center | baseline | strecth
align-self:flex-start | flex-end | center | baseline | strecth

flex-start:伸缩项目在侧轴起点边的外边距紧靠在该行在侧轴起始边
flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点边
center:伸缩项目的外边距盒在该行的侧轴上居中放置
baseline:伸缩项目根据伸缩项目的基线对齐
strech:默认值,伸缩项目拉伸填充整个伸缩容器

7.堆栈伸缩行align-content

align-content会改变flex-wrap的行为。与align-items相似,但不是对齐伸缩项目,对齐的是伸缩行。

align-content:flex-start | flex-end | center | space-between | space-around | stretch

flex-start:各行向伸缩容器的起点位置堆叠
flex-end:各行向伸缩容器的终点位置堆叠
center:伸各行向伸缩容器的中间位置堆叠
space-between:各行在伸缩容器中平均分布
space-around:各行在伸缩容器中平均分布,在两边各有一半空间
strech:默认值,各行将会伸展以占用额外的空间

这个属性只有伸缩项目有多行时才生效,在flex-wrap为wrap时,并且没有足够的空间把伸缩项目行放在同一行中。该属性对每一行起作用而不是每个伸缩项目。

8.伸缩性flex

设置属性flex的伸缩容器会等比地按照各伸缩项目的扩展比率分配额外的空间,也会按照收缩比率缩小各伸缩项目以避免伸缩项目溢出伸缩容器

flex:none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]

flex-grow:扩展比率
flex-shrink:收缩比率
flex-basis:伸缩基准值

flex属性可以用来指定可伸缩长度的部件:扩展比率、收缩比率和伸缩基准值

9.显示顺序order

order : number

通过order属性来改变伸缩项目出现在源文档的次序,从序号最小的组开始布局

应用:圣杯布局!顺序重组,还实现了中间列的等高效果以及页脚的黏附效果

总结:主要整理了Flexbox模型布局功能、属性术语、语法规范、各版本语法变更和新版本Flexbox模型!除此之外,还有更头疼的是浏览器兼容性,需要多次练习整理才能好好使用伸缩布局模型来解决布局问题。

点击复制链接 与好友分享!回本站首页
相关TAG标签 弹性 布局 模型
上一篇:CSS3的几个标签速记1
下一篇:css3media响应式布局
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站