Mobile-Resilient Layout--flex

Currently,flex layouts make it easy, complete, and responsive to implement a variety of page layouts. Moreover, it has been supported by all browsers, which means that we can use this feature very safely.

If you're interested in flexible page layouts, don't miss the easy-to-use properties of flex.

First, the initial knowledge of Flex

When I used to lay out my PC-side web page, I was based on the box model and then used float and position to locate the 2 main properties, which I didn't know about the flex layout. Later, when I started touching the mobile project, I started to understand the new layout, and I knew the flex layout was there.

Why do I have a crush on flex layout?

The first is because the previous layout way is a bit inadequate, need to have a new layout way. Just started to cut the page I most commonly used float floating layout, at that time, I was simply a float as a savior, as long as my page vision slightly problem, I will use float float, completely do not consider the impact of the compatibility of the page or a random version.

The other is the position positioning layout, which is one of the layouts I often use, but it is important to figure out the parent and child before using it.

Friendship tip: Do not use or rely on float float and position positioning properties Oh ~ One of the suffering I can say a few days and nights t_t ...

Second, be familiar with flex (in my practice ...) ）

(1) Good simple to achieve the ' proportional ' arrangement (emphasis is adaptive)

With flex properties, you can implement block-level elements 1:1:1

　　　　

　　　　

Similarly, if you change the flex value in ITEM2 to 2, the following effect will appear

　　　　

(2) can make the contents of the inside center (especially vertical center, easy to explode)

　　　　

　　　　

Above is the use of jsutify-content and ALIGN-ITEM2 properties, corresponding to the implementation of horizontal and vertical center.

(3) Horizontal arrangement, vertical arrangement (flex-direction:row/column)

　　　　

　　　　

Third, Flex is a lot of charm, waiting for you to find

First of all, Flex has a lot of features, and several of the properties I've written above are just the ones I used recently, and I think it's good to write them.

If you want to have a better use of flex flexible layouts, do it yourself ... ^.^ ...

　　

　　　　

　　

Mobile-Resilient Layout--flex