Comment utiliser le modèle de boîte flexible CSS flex dans la mise en page

Application du modèle de boîte flexible CSS flex dans la mise en page

Centrage des éléments

【1】Utilisez l'alignement sur l'axe principal, justifiez le contenu et l'alignement sur l'axe transversal, alignez les éléments sur le conteneur évolutif

<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】Utilisez margin:auto

<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>

Aligner les deux extrémités

<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>

Aligner le bas

<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>

Bouton de la zone de saisie

<style>.inputBox{
    display: flex;
    width: 250px;}.inputBox-ipt{
    flex: 1;}
</style>
<div class="inputBox">
  <input class="inputBox-ipt">
  <button class="inputBox-btn">按钮</button>
</div>

etc. Mise en page divisée

<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>

Mise en page adaptative multi-colonnes

<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>

Mise en page suspendue

<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">左侧悬挂</div>
    <div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div>    
</div>

Mise en page plein écran

<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>

Ce qui précède concerne l'application du modèle de boîte flexible CSS flex dans la mise en page.

Références associées :

site Web chinois php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!