CSS layout flex implements Div cross arrangement and bottom alignment method

Recently when using WordPress to write a page, the designer gave a page layout pattern, has never encountered before, its on the computer (resolution greater than 768PX) is as follows:

This arrangement is required on the phone (resolution less than or equal to 768px):

I think of two ways.

the first is to use Bootstrap row, COL-MD with Col-md-push, col-md-pull to achieve , the code is as follows:

 1 <! DOCTYPE html> 2 

On the computer effect:


Effects on the phone:


With bootstrap this method needs to write multiple row (I try to use a row to achieve, but not successful), it is also important to note that in the COL-MD layer, it is best not to add another class (style), if you need to control the inner element (image and text in the example above), For example, add a padding or something, you can add a layer of p to write the style.

The second method is implemented with Flex-direction:row-reverse in the flex layout , with the following code:


 1 <! DOCTYPE html> 2 

The effect on the computer is as follows:


The effect on the phone is as follows:


As you can see, the flex implementation is flexible, and all p is sorted by row, where the key is to have even rows reverse the arrangement: . R:nth-child (even) {flex-direction:row-reverse;} , then make it normal on your phone . R {display:block; width:100%;} 。


I also found that using flex can easily achieve two P-bottom alignments, with the following code:


. 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;} </style><p class= "C" >  <p class= "A" > Innovation </p>  <p class= "A" > Experimental base </p>< /p>

In fact, let C in the P, with the main axis x (by row, the spindle is x, the flex-diretion is not specified when the default is row-by-line), the arrangement of the direction of row, and then let P all on the y axis (cross axis) on the bottom align-items:flex-end ;

The effect is as follows:



Of course, it can be implemented in other ways as well. For example, let C relative positioning, let C within one of the P absolute positioning, and then by setting bottom to 0, code as follows, the effect ibid.


<style media= "screen";. C {  position:relative;}. A {  display:inline-block;  Background:rgba (255, 0, 0, 0.1);}. A:nth-child (odd) {  background: #1a88ea;  Color:white;  font-size:30px;  padding:10px 15px;}. A:nth-child (even) {  bottom:0;  Position:absolute;} </style><p class= "C" >  <p class= "A" > Innovation </p>  <p class= "A" > Experimental base </p>< /p>

However, it is clear that flex is easier to implement.