CSS elastic box model flex application in layout, css model flex Layout

CSS elastic box model flex application in layout, css model flex Layout
* Directory [1] element center [2] Two ends alignment [3] Bottom alignment [4] input box button [5] equi layout [6] Adaptive Layout [7] Hanging layout [8] in front of full screen Layout

I have already described in detail the basic syntax and compatibility of the flex elastic box model. This article will introduce the application of flex in the layout.

 

Element center

[1] use the spindle alignment justify-content and the side Axis align-items on the scaling container

<style>.parent{    display: flex;    justify-content: center;    align-items: center;}</style>

<div class="parent"  style="background-color: lightgrey; height: 100px; width: 200px;">    <div class="in" style="background-color: lightblue;">DEMO</div>      </div>

[2] Using margin: auto in a scaling Project

<style>.parent{    display: flex;}.in{    margin: auto;}</style>

<div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">    <div class="in" style="background-color: lightblue;">DEMO</div>      </div>

 

Alignment at both ends

<style>.parent{    display: flex;    justify-content:space-between}</style>

<div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">    <div class="in" style="background-color: lightblue;">DEMO</div>    <div class="in" style="background-color: lightgreen;">DEMO</div>    <div class="in" style="background-color: lightcyan;">DEMO</div>    <div class="in" style="background-color: lightseagreen;">DEMO</div>      </div>

 

Bottom alignment

<style>.parent{    display: flex;    align-items: flex-end;}</style>

<div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">    <div class="in" style="background-color: lightblue; height:20px;">DEMO</div>    <div class="in" style="background-color: lightgreen; height:30px;">DEMO</div>    <div class="in" style="background-color: lightcyan; height:40px;">DEMO</div>    <div class="in" style="background-color: lightseagreen; height:50px;">DEMO</div>      </div>

 

Input box button

<style>.inputBox{    display: flex;    width: 250px;}.inputBox-ipt{    flex: 1;}</style>

<Div class = "inputBox"> <input class = "inputBox-ept"> <button class = "inputBox-btn"> button </button> </div>

 

Distribution

<style>body,p{margin: 0;}.parent{    display: flex;}.child{    flex:1;    height: 100px;}.child + .child{    margin-left: 20px;}</style>

<div class="parent" style="background-color: lightgrey;">    <div class="child" style="background-color: lightblue;">1</div>    <div class="child" style="background-color: lightgreen;">2</div>    <div class="child" style="background-color: lightsalmon;">3</div>    <div class="child" style="background-color: pink;">4</div>                </div>    

 

Multi-column Adaptive Layout

<style>p{margin: 0;}.parent{display: flex;}.left,.center{margin-right: 20px;}.right{flex: 1;}</style>

<div class="parent" style="background-color: lightgrey;">    <div class="left" style="background-color: lightblue;">        <p>left</p>        <p>left</p>    </div>                <div class="center" style="background-color: pink;">        <p>center</p>        <p>center</p>    </div>                <div class="right"  style="background-color: lightgreen;">        <p>right</p>        <p>right</p>    </div>                    </div>

 

Suspension Layout

<style>        .box{    display: flex;    background-color: lightgrey;    width: 300px;}.left{    margin-right: 20px;    background-color: lightblue;    height: 30px;}.main{    flex:1;}</style>

<Div class = "box"> <div class = "left"> left hanging </div> <div class = "main"> main content main Content main Content main content </div>

 

Full Screen Layout

<style>body,p{margin: 0;}body,html,.parent{height: 100%;}.parent{    display: flex;    flex-direction: column;}.top,.bottom{    height: 50px;}.middle{    display: flex;    flex: 1;}.left{    width: 100px;    margin-right: 20px;}.right{    flex: 1;    overflow: auto;}.right-in{    height: 1000px;}</style>

<div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>     <div class="middle" style="background-color: pink;">        <div class="left" style="background-color: orange;">            <p>left</p>        </div>             <div class="right" style="background-color: lightsalmon;">            <div class="right-in">                <p>right</p>            </div>                    </div>                        </div>                  <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>