CSS布局flex实现div交叉排布与底部对齐方法

最近在用wordpress写页面时，设计师给出了一种网页排布图样，之前从未遇到过，其在电脑上（分辨率大于768px）的效果图如下：

而在手机（分辨率小于等于768px）上要求这样排列：

我想到了两种方法

第一种是用bootstrap的row、col-md配合col-md-push、col-md-pull来实现，代码如下：

 1  2  3    4      5      6      7      8    9   10 26 
27   
28     
29       
30         31       
32     
33     
34       
我是文字，我用到了padding来实现大致居中
35     
36   
37   
38     
39       
40         41       
42     
43     
44       
我是文字，我用到了padding来实现大致居中
45     
46   
47   
48     
49       
50         51       
52     
53     
54       
我是文字，我用到了padding来实现大致居中
55     
56   
57 
58   59 

电脑上效果：

立即学习“前端免费学习笔记（深入）”；

手机上效果：

用bootstrap这种方法需要写多个row（我试着用一个row来实现，但没成功），另外需要注意的就是，在col-md这层，最好不要再另外添加类（样式），如果需要控制里层的元素（上面的例子中是图片和文字），比如加个padding之类的，可以再加一层p来写样式。

第二种方法用flex布局中的flex-direction: row-reverse来实现，代码如下：

 1  2  3    4      5      6      7    8    9 41 
42   
43     
44     
我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。
45   
46   
47     
48     
我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。
49   
50   
51     
52     
我是文字，我使用了flex布局，我按column在主轴y轴上居中对齐。
53   
54 
55   56 

电脑上效果如下：

手机上效果如下：

可以看到，用flex实现要灵活一些， 所有的p都按row排列，其中的关键在于让偶数行反向排列： .R:nth-child(even) { flex-direction: row-reverse; } ，然后在手机上让其正常排列即可 .R { display: block; width: 100%; } 。

BgSub

免费的AI图片背景去除工具

下载

我还发现，用flex可以很容易的实现两个p底部对齐，具体代码如下：

.C {
  display: flex;
  align-items: flex-end;
}
.A {
  background: rgba(255, 0, 0, 0.1);
}
.A:nth-child(odd) {
  background: #1a88ea;
  color: white;
  font-size: 30px;
  padding: 10px 15px;
}

  
创新
  
实验基地

其实就是让C内的p，以主轴为x（按row排列时，主轴即为x，未指明flex-diretion时，默认为按row排列），排布方向为row，然后让p都在y轴(交叉轴)上处于底部 align-items: flex-end; 

效果如下：

当然，也可以用其他方法来实现。比如，让C相对定位，让C内其中的一个p绝对定位，然后通过设置bottom为0即可，代码如下，效果同上。

  
创新
  
实验基地

不过显然，用flex实现更加简便。