The original article is reprinted from liu Yue’s Technology blog v3u.cn/a_id_109

We know that for those who are used to the front end of the page, they are most used to the floating layout based on the box model, which relies on display + position + float. However, the floating layout has some fatal small problems, such as vertical center is difficult. For example, the famous float collapse problem, and in some extreme cases, using model +clear:both to manually clear the float can be cumbersome.

As a result, the W3C has come up with a new solution, —-Flex layout, that allows for simple, complete, and responsive page layouts. It is now supported by all browsers, which means it is now safe to use. I tried the flexible layout in the wechat mini program page, and my personal opinion is: it works very well.

Flex, short for Flexible Box, is designed to provide maximum flexibility to Box models.

Any container can be specified as a Flex layout.

.box{
  display: flex;
}
Copy the code

Note, however, that setting the Flex layout disables the float, clear, and vertical-align attributes of the child elements. That is to say, floating layout and elastic layout cannot coexist, the two must live one of them.

In fact, flex layout principle is very simple, using flex layout elements, called Flex container, or “container”. All of its child elements automatically become container members and are called Flex items, or “items.”

The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end. By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.

An elastic container can set the following properties:

Flex-direction The flex-direction attribute determines the direction of the main axis (that is, the alignment of items). .box { flex-direction: row | row-reverse | column | column-reverse; } flex-wrap By default, items are arranged in a single line (A.K.A"Axis"). The flex-wrap property defines how to wrap a line if an axis does not fit. .box{ flex-wrap: nowrap | wrap | wrap-reverse; } flex-flow The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is row nowrap. .box { flex-flow: <flex-direction> || <flex-wrap>; } context-content the context-content attribute defines the alignment of items on the main axis. .box { justify-content: flex-start | flex-end | center | space-between | space-around; } the align-items align-items property defines how items are aligned on the cross axis. .box { align-items: flex-start | flex-end | center | baseline | stretch; } the align-content align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis. .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }Copy the code

Said so much, is the theory, let’s use elastic layout practice, for example, we want to imitate rising coffee applet, the first row single column, double column, and adapt to the layout of the entire mobile phone page

Page part:

<template>
   

        <div class="container1">
 
            <div class="item11">
            1
            </div>
            
           <div class="item12">
            
              <div class="item1">
                  3
                  </div>


                  <div class="item1">
                      3
                      </div>
            
          </div>
            
            <div class="item12">
              
                <div class="item1">
                    3
                    </div>
  
  
                    <div class="item1">
                        3
                        </div>


            </div>
            
         
            
  


      

    </div>
    </template>
Copy the code

The CSS part:

.container1{
  height: 100%;
  width:100%;
  background-color:beige;
  display:flex;
  flex-flow:column;
}


.item11{
  height:300rpx;
  background-color:cyan;
  border: 1px solid #fff
}

.item12{
  height:300rpx;
  background-color:cyan;
  border: 1px solid #fff;
  display:flex;
}
 
.item1{
  height:300rpx;
  width: 50%;
  background-color:cyan;
  border: 1px solid #fff
}
Copy the code

Easy to do, much less code than a floating layout, perfect.

The original article is reprinted from liu Yue’s Technology blog v3u.cn/a_id_109