Implementation of vertical layout based on Flex

Generally speaking, we all doHorizontal layoutAt most, make a vertical center. Moreover, for some floats and positions, it seems that they are not suitable for vertical layout.

Just a while ago, we made a page with weex. Weex is naturally based on flex. And weexflex-directionThe default value iscolumn，flex-directionThe arrangement direction of flex member items in flex container is defined.

The page is divided into three parts (header, section and footer), with some optimization points:

1. It’s similar to both ends alignment, but it’s better to make the section a little higher
2. As far as possible a screen display, if not enough, then the scroll bar.

So let’s see what we can do.

Implementation based on Flex

<div id="app">
    <header>
        I'm the head, and I want my screens to be on top, big or small
    </header>
    <section>
        < div > I'm the content, I want me to display in the middle of the screen, I don't want me to suppress other content, I want a screen to display this page < / div >
    </section>
    <footer>
        I'm the bottom, and I hope I can click on the bottom, and if the screen goes beyond that, I slide visible.
    </footer>
</div>

First set the basic conditionsdisplay: flex;flex-direction: column;Because the browser defaults to horizontal alignment.

Then we set up the boxmin-height:500pxSimulate the height of one screen, it can be used normallymin-height: 100vhperhapshtml,body{height: 100%;} 。

Address:https://www.lilnong.top/static/html/flex-direction-column-sf.html

justify-content: space-between;

We can be directly irascibleSet justification #app{justify-content: space-between;}
justify-content: space-between;The first one has no front padding, and the last one has no post padding
justify-content: space-around;Each block is the same size before and after padding, which also means that there is double padding between adjacent blocks
justify-content: space-evenly;Each blank area is the same size

It seems to be implemented, but if we still want to fine tune the position, it’s very difficult to do itmin-height, allow narrowing).
Address:https://www.lilnong.top/static/html/flex-direction-column-sf.1.html

flex: 1 0 auto

flexWhat do you mean? yesflex-grow(zoom in)flex-shrink(zoom out)flex-basis(base size).

Then we can consider using section to expand, and then the content can be vertically centered.

Pay attention to the background color of this scheme and the previous one to see the differenceBut it’s also not easy to operate.

Test address:https://www.lilnong.top/static/html/flex-direction-column-sf.2.html

Flex: 1 + blank block

Based on the above scheme, we know that flex can automatically zoom in and out, so we can use it to make the blank area OK?

Address:https://www.lilnong.top/static/html/flex-direction-column-sf.3.html

If you want to make the space below larger, we can giveflex-grow: 3;Larger zoom area

Other options

1. The Min height is reserved in the section, and it is padded up and down. Head and tail absolute.
2. Absolute positioning, easy to be covered.

What else?

WeChat official account: front-end Linong

Welcome to my official account. If you have any questions, you can add my wechat front-end communication group.