Possible CSS-Flex layout (2)

preface

The impact of flex box on the old world and change, the old world refers to my vision of layout before learning Flex

  1. It’s really convenient to center vertically
  2. Do not float to achieve three column layout, grail layout
  3. It is easy to place the child elements in the desired position. If it is only qualitative, it is no longer necessary to use left and top.

Vertical center

The use of margin

The body just this

<div class="wrapper">
    <div class="content"></div>
</div>
Copy the code

The style is as follows

<style>
*{
    margin:0;
    padding:0;
}
.wrapper{
    width:500px;
    height: 400px;
    display:flex;
    background-color: #f0f;
    margin:auto;
}
.content{
    width:300px;
    height: 200px;
    margin:auto;
    background-color: #0ff;
}
    </style>
Copy the code

rendering

Conclusion: In flex layout, children use margin: Auto; Can do vertical center

The parent element uses context-content and align-items

Let’s change the style

* {margin:0;
    padding:0;
}
.wrapper{
    width:500px;
    height: 400px;
    display:flex;
    background-color: #f0f;
    margin:auto;
    justify-content: center;
    align-items: center;
}
.content{
    width:300px;
    height: 200px;
    /* margin:auto; * /
    background-color: #0ff;
}
Copy the code

Add the justify – content: center; align-items: center; Margin :auto; It looks the same

If you want the Wrapper div to be centered in the view

It looks something like this

Of course you can use positioning, then left:50%; top:50%; The transform: translate (50%, 50%)

Here are the other methods on Flex that are in the middle:

  1. The Wrapper is in the body if you set the body to Flex
  2. The body is set to the Wrapper height, so now you need to manually set the body height to the height of a view

The CSS code is as follows

<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        display:flex;
        height:100vh;
    }
    .wrapper{
        width:500px;
        height: 400px;
        display:flex;
        background-color: #f0f;
        margin:auto;
        justify-content: center;
        align-items: center;
    }
    .content{
        width:300px;
        height: 200px;
        /* margin:auto; * /
        background-color: #0ff;
    }
</style>
Copy the code

The holy grail layout

Contents of the body

<body>
    <div class="wrapper">
        <header>header</header>
        <main>
            <div class="left">left</div>
            <div class="content">content</div>
            <div class="right">right</div>
        </main>
        <footer>footer</footer>
    </div>
</body>
Copy the code

CSS Style description

  1. Header and Footer height set to 10%, non-compressible, non-stretchable
  2. The main area automatically occupies one of the visual height and the other blank areas are filled up
  3. The left and right width of the main area is set to 10%. It is not compressible and cannot be stretched
  4. The Content area automatically fills up the rest of the center
<style>
    *{
        margin:0;
        padding:0;

        font-size:25px;
    }
    .wrapper{
        width:100%;
        height: 100vh;
        border: 1px solid black;
        box-sizing: border-box;
        display:flex;
        flex-direction: column;

    }
    header,footer{
        flex:0 0 10%;
        border: 1px solid black;
        box-sizing: border-box;
    }
    main{
        flex:1 1 auto;
        display:flex;
        border: 1px solid black;
        box-sizing: border-box;
    }
    main .left,.right{
        flex:0 0 10%;
    }
    main .content{
        flex:1 1 auto;
        border: 1px solid black;
        box-sizing: border-box;
    }
</style>
Copy the code

Write a sieve

Content load failure