Flex 布局教程：实例篇

概述你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到

你会看到，不论是甚么布局，Flex常常都可以几行命令弄定。

我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by FlexBox。

1、骰子的布局

骰子的1面，最多可以放置9个点。

下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。

如果不加说明，本节的HTML模板1律以下。

<div class="Box"> <span "item></span</div>

上面代码中，div元素（代表骰子的1个面）是Flex容器，span元素（代表1个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

1.1 单项目

首先，只有左上角1个点的情况。Flex布局默许就是首行左对齐，所以1行代码就够了。

.Box { display: flex; }

设置项目的对齐方式，就可以实现居中对齐和右对齐。

; justify-content: center

: flex-end设置交叉轴对齐方式，可以垂直移动主轴。

align-items

}

1.2 双项目

: space-between

flex-direction: column

} .item:nth-child(2) align-self

}

1.3 3项目

.item:nth-child(3) }

1.4 4项目

flex-wrap: wrapalign-content

HTML代码以下。

"columnCSS代码以下。

.column flex-basis: 100%}

1.5 6项目

"row.row:flex.row:nth-child(2).row:nth-child(3)}

1.6 9项目

}

2、网格布局2.1 基本网格布局

最简单的网格布局，就是平均散布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。

"GrID"GrID-cell>....GrID .GrID-cell flex: 1}

2.2 百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

"GrID-cell u⑴of4>以上是内存溢出为你收集整理的Flex 布局教程：实例篇全部内容，希望文章能够帮你解决Flex 布局教程：实例篇所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1015991.html