Comment implémenter rapidement la mise en page BorderLayout avec FLEX en CSS3

La mise en page BoxLayout devrait être familière aux programmeurs qui ont écrit du code d'interface utilisateur back-end, ceux qui ont écrit du code front-end la connaissent également, y compris le cadre html. Cependant, dans le passé, float était utilisé pour le contrôle. CSS, qui était relativement difficile à contrôler. Il est plus compliqué et nécessite d'ajouter plus de balises et de codes

Après avoir lu cette interface, nous pouvons commencer à écrire la disposition du code des balises :

<div class="parent">
    <header>北</header>
    <aside class="left">东</aside>
    <div class="center">中</div>
    <aside class="righ">西</aside>
    <footer>南</footer>
</div>

<. 🎜>Le code est très simple. Il n'y a qu'une relation de deuxième niveau. Bien sûr, vous pouvez également supprimer le parent et utiliser body comme parent sauf si nécessaire

Ensuite, nous commençons à utiliser CSS. pour implémenter BoxLayout, et le parent est également défini ici Le parent est un conteneur flexible, la direction est de gauche à droite et peut être enveloppé

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}

Ensuite, définissez le mode de mise en page des éléments flexibles, header et footer Nous les définissons sur flex-basis:100% car ils occupent toute la ligne et la largeur des deux côtés est égale et le centre est plus large que les côtés des deux côtés, nous utilisons donc flex-grow. pour définir leur taux d'occupation.

header, footer{
    flex-basis: 100%;
}.center{
    flex-grow: 3;
}aside{
    flex-grow:1;
}

De cette façon, la mise en page BoxLayout est implémentée, ce qui n'est pas très simple. N'oubliez pas de définir la hauteur et la couleur d'arrière-plan correspondantes, sinon vous le ferez. je vois tout blanc et je pense qu'il n'y a pas de réponse ! Je l'ai configuré comme ça pour référence

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}header,footer,aside,.center{
    padding: 10px;;
}.center,aside{
    min-height: 300px;
}header, footer{
    flex-basis: 100%;
    min-height: 80px;
}header{
    background-color: cadetblue;
}footer{
    background-color: darkgrey;
}.center{
    flex-grow: 3;
}aside{
    flex-grow:1;
    background-color: bisque;
}

Test final OK !

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!