Maison > Article > interface Web > 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
.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!