Flexbox en css3 c'est quoi?

-

 Flexbox est un modèle de mise en page flexible introduit dans CSS3. Il fournit une méthode plus avancée et efficace pour aligner, distribuer et positionner les éléments dans un conteneur.

Le modèle Flexbox est basé sur la notion de conteneur et d'éléments enfants (ou items). Le conteneur, généralement un élément parent, est configuré avec la propriété `display: flex;` pour activer le mode Flexbox.

Une fois que le conteneur est configuré en mode Flexbox, les éléments enfants à l'intérieur du conteneur peuvent être contrôlés en utilisant plusieurs propriétés spécifiques à Flexbox. Voici quelques-unes des propriétés les plus couramment utilisées :

  1. `justify-content` : Cette propriété contrôle l'alignement horizontal des éléments enfants dans le conteneur. Elle permet de les répartir sur l'axe principal du conteneur (horizontalement) et de spécifier l'espacement entre eux.
  2. `align-items` : Cette propriété contrôle l'alignement vertical des éléments enfants dans le conteneur. Elle permet de les répartir sur l'axe transversal du conteneur (verticalement) et de spécifier l'espacement entre eux.
  3.  `flex-direction` : Cette propriété spécifie la direction dans laquelle les éléments enfants sont disposés. Elle peut être utilisée pour créer des mises en page en ligne, en colonnes ou en lignes inversées.
  4.  `flex-wrap` : Cette propriété contrôle le comportement de retour à la ligne des éléments enfants lorsque l'espace du conteneur est insuffisant. Elle peut être utilisée pour créer des mises en page flexibles qui s'adaptent à différentes tailles d'écran.
  5. `flex` : Cette propriété est utilisée pour spécifier la flexibilité des éléments enfants. Elle permet de distribuer l'espace disponible de manière équitable entre les éléments ou de les faire s'agrandir ou se réduire en fonction de leur poids.

Ces propriétés, combinées à d'autres propriétés Flexbox, offrent un contrôle puissant sur la mise en page des éléments dans un conteneur. Elles permettent de créer des mises en page flexibles et réactives qui s'adaptent automatiquement à différentes tailles d'écran.

Il est important de noter que Flexbox est largement pris en charge par les navigateurs modernes, mais il peut y avoir quelques différences d'implémentation entre les navigateurs. Il est recommandé de tester votre mise en page dans différents navigateurs pour assurer une compatibilité maximale.

Exemple : 


Supposant que nous avons cette partie d'un code HTML : 

<div class="container">

  <header>

    <h1>Mon Site Web</h1>

    <nav>

      <ul>

        <li><a href="#">Accueil</a></li>

        <li><a href="#">A propos</a></li>

        <li><a href="#">Services</a></li>

        <li><a href="#">Contact</a></li>

      </ul>

    </nav>

  </header>

  <main>

    <h2>Bienvenue sur mon site web</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  </main>

</div>
Lorsqu'on lui applique cette mise forme css : 
<html>
<head>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100vh;
}

header {
  background-color: #f2f2f2;
  padding: 20px;
  width: 100%;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav ul li {
  margin-right: 10px;
}

main {
  flex: 1;
  width: 100%;
  padding: 20px;
}

h1, h2 {
  margin: 0;
}

</style>
</head>
<body>
  <div class="container">

  <header>

    <h1>Mon Site Web</h1>

    <nav>

      <ul>

        <li><a href="#">Accueil</a></li>

        <li><a href="#">A propos</a></li>

        <li><a href="#">Services</a></li>

        <li><a href="#">Contact</a></li>

      </ul>

    </nav>

  </header>

  <main>

    <h2>Bienvenue sur mon site web</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  </main>

</div>
</body>
</html>


 on obtient ceci : 


Dans cet exemple, nous utilisons Flexbox pour créer une mise en page centrée verticalement et horizontalement. Voici comment fonctionne le CSS :

.container est configuré en tant que conteneur Flexbox avec display: flex;. Nous utilisons flex-direction: column; pour empiler les éléments verticalement.
align-items: center; aligne les éléments enfants horizontalement au centre du conteneur.
text-align: center; centre le texte à l'intérieur du conteneur.
header est un élément contenant le titre et la barre de navigation. Il a un arrière-plan gris clair et une marge intérieure.
nav ul est configuré en tant que conteneur Flexbox pour aligner les éléments de la barre de navigation horizontalement.
main est le conteneur principal du contenu. Nous utilisons flex: 1; pour que le contenu occupe tout l'espace disponible restant.
Les autres styles sont principalement pour le positionnement et la mise en forme des éléments.
Cet exemple illustre une mise en page de base, mais Flexbox offre de nombreuses possibilités pour créer des mises en page plus complexes et adaptatives.

N'hésitez pas à expérimenter avec les propriétés Flexbox pour créer différentes mises en page selon vos besoins spécifiques.



Commentaires

Enregistrer un commentaire

Your comment will be reviewed by moderators

Posts les plus consultés de ce blog

Premier tutoriel avec Arduino et Proteus ISIS

-
Image
Premier tutoriel Arduino avec Proteus ISIS La simulation est un outil très puissant pour comprendre comment le périphérique fonctionnera après l'implémentation en réel. Avant de commencer un projet, il est recommandé de le simuler et de vérifier virtuellement que cela fonctionne. Proteus est un logiciel de base de simulation.En utilisant ce logiciel Arduino peut être simulé.Aujourd'hui, nous allons simuler arduino dans Proteus. Nous allons tester le programme Arduino Blink avec Proteus. Étape 1: Logiciels requis (IDE Arduino et Proteus ISIS) IDE Arduino. Vous pouvez le télécharger depuis https://www.arduino.cc/en/Main/Software Logiciel  Proteus isis. Vous pouvez télécharger depuis https://www.labcenter.com/                    Si vous posséder déjà une carte Arduino, donc pas la peine d'installer Porteus, voys pouvez lier votre carte au PC en utilisant un cable USB.   Étape 2: Mise en place de l'environnement  1. Une fois l'installation des
Read more »

Login et password ,formulaire d'authentification sous android avec mysql et json

-
Image
Tutoriel avec code et explication dans cette vidéo :  Supposant que nous avons une table "user" dans une base de données mysql et nous voulons créé un code android qui permet à l'utilisateur d'accéder à son compte à partir d'un formulaire d'authentification.  Table structure for table `user` -- CREATE TABLE `user` (   `id` int(11) NOT NULL AUTO_INCREMENT,   `nom` varchar(15) ,   `prenom` varchar(15) ,   `mail` varchar(100) ,   `pass` varchar(100) ,   PRIMARY KEY (`id`)); Nous devons par la suite hébergé un web services RESTful dans un serveur web apache. On suppose que nous avons créé un fichier db_connect.php qui contient les paramètres de connexion à la base . db_connect.php <?php $ connection = mysqli_connect ( "localhost" , "root" , "" ); if (! $ connection ) { die ( "Database connection failed: " . mysqli_error ()); } $ db_select = mysqli_select_db ( $ connection , "loginma
Read more »

Connexion d'une application Android et une base de données externe Mysql avec web services php Json (opérations CRUD)

-
Image
Ce tutoriel est constitué par plusieurs vidéos qui vont vous montrer comment gérer une base de données externe ( toutes les opérations CRUD : ajout, modification, suppression et sélection de données) à travers une application Android. Il est bien détaillé et il vous guide pas à pas de sorte que vous n'aller pas rencontrer de grands problèmes pour la compréhension des  étapes nécessaires pour la création de ce petit projet. Il faut tout d'abord avoir les logiciels nécessaires (à part Android Studio bien sûr car ce tutoriel suppose que vous avez déjà un minimum de connaissance en développement Android). Il faut tout d'abord avoir un logiciel comme Xampp  ou WampServer . De ma part je préfère le premier car il est plus professionnel. A travers l'un de ces deux logiciels nous pouvons avoir un SGBDR Mysql où nous allons créer notre base de données et un serveur web apache où nous allons héberger nos web services qui vont permettre la liaison entre l'application cliente
Read more »