CSS3的Flex布局实例教程

《CSS3的Flex布局实例教程》要点:
本文介绍了CSS3的Flex布局实例教程,希望对您有用。如果有疑问,可以联系我们。

你会看到,不管是什么布局,Flex往往都可以几行命令搞定。

CSS3的Flex布局实例教程1

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

一、骰子的布局

骰子的一面,最多可以放置9个点。

CSS3的Flex布局实例教程2

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

CSS3的Flex布局实例教程3

如果不加说明,本节的HTML模板一律如下。

<div class=box>
  <span class=item></span></div>

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

1.1 单项目

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

CSS3的Flex布局实例教程4

.box {
  display: flex;}

设置项目的对齐方式,就能实现居中对齐和右对齐。

CSS3的Flex布局实例教程5

.box {
  display: flex;
  justify-content: center;}

CSS3的Flex布局实例教程6

.box {
  display: flex;
  justify-content: flex-end;}

设置交叉轴对齐方式,可以垂直移动主轴。

CSS3的Flex布局实例教程7

.box {
  display: flex;
  align-items: center;}

CSS3的Flex布局实例教程8

.box {
  display: flex;
  justify-content: center;
  align-items: center;}

CSS3的Flex布局实例教程9

.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;}

CSS3的Flex布局实例教程10

.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;}

1.2 双项目

CSS3的Flex布局实例教程11

.box {
  display: flex;
  justify-content: space-between;}

CSS3的Flex布局实例教程12

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;}

CSS3的Flex布局实例教程13

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;}

CSS3的Flex布局实例教程14

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;}

CSS3的Flex布局实例教程15

.box {
  display: flex;}.item:nth-child(2) {
  align-self: center;}

CSS3的Flex布局实例教程16

.box {
  display: flex;
  justify-content: space-between;}.item:nth-child(2) {
  align-self: flex-end;}

1.3 三项目

CSS3的Flex布局实例教程17

.box {
  display: flex;}.item:nth-child(2) {
  align-self: center;}.item:nth-child(3) {
  align-self: flex-end;}

1.4 四项目

CSS3的Flex布局实例教程18

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;}

CSS3的Flex布局实例教程19

HTML代码如下。

<div class=box>
  <div class=column>
    <span class=item></span>
    <span class=item></span>
  </div>
  <div class=column>
    <span class=item></span>
    <span class=item></span>
  </div></div>

CSS代码如下。

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;}.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;}


相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...