https://www.jmqz1000.com

css3中flexbox!伸缩盒深入理解

这个背后有一个悲伤的故事,所以就取了个这么有点像标题党的标题,具体什么我就不说了。很早之前就知道css3里面有这么个东西,而且随着规范的改变,它的版本也改了几次。

也就是因为这个flexbox伸缩盒布局太强大了,以至于我没在意它也是display的一个属性。

要想解决这个布局问题,我们还是先了解一些基础的问题。先回顾下display有哪些属性吧:

none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline:指定对象为内联元素。block:指定对象为块元素。

list-item:指定对象为列表项目。inline-block:指定对象为内联块元素。(CSS2)

table:指定对象作为块元素级的表格。类同于html标签<table>(CSS2)

inline-table:指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)

table-caption:指定对象作为表格标题。类同于html标签<caption>(CSS2)

table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2)

table-row:指定对象作为表格行。类同于html标签<tr>(CSS2)

table-row-group:指定对象作为表格行组。类同于html标签<tbody>(CSS2)

table-column:指定对象作为表格列。类同于html标签<col>(CSS2)

table-column-group:指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)

table-header-group:指定对象作为表格标题组。类同于html标签<thead>(CSS2)

table-footer-group:指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)

run-in:根据上下文决定对象是内联对象还是块级对象。(CSS3)

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

&nb

小清新网名[www.la240.com/html2017/1/34/]sp; inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)

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

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

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

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

可以看到,目前最新的版本是display:flex ;当然要是用以前过度版本的估计还有用,但我们还是跟着最新的规范来。

我们再了解下伸缩盒的定义和一些概念的东西吧:

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。

虽然现在我们可以使用 Flexbox 轻松创建布局,而不会像以前那样难以理解,但我们仍然需要花一些时间去熟悉到底如何使用 Flexbox。新的术语和概念可能会是我们使用 Flexbox 时的一个障碍,所以让我们先来了解以下它们。

Flexbox 由 伸缩容器 和 伸缩项目 组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

相关文章阅读