Maison > Article > interface Web > Comprendre les propriétés Flex en CSS
Introduction :
Concevoir un site Web, c'est comme créer de l'art. Tout comme la disposition d’un tableau raconte une histoire, la mise en page d’un site Web en dit davantage sur son message. Flexbox est un outil puissant pour y parvenir.
Avant Flexbox, les développeurs devaient utiliser des techniques telles que les éléments flottants, les piratages de marge et la disposition des tableaux pour créer des conceptions réactives. Ces méthodes fonctionnaient mais n'étaient pas évolutives et nécessitaient des requêtes multimédias supplémentaires pour s'adapter aux différentes tailles d'écran.
Flexbox a changé cela en fournissant un moyen simple et efficace d'aligner, de distribuer et de dimensionner des éléments dans un conteneur.
Qu'est-ce que Flexbox ?
Flexbox est un modèle de mise en page qui vous aide à créer facilement des mises en page complexes. Il vous permet d'aligner des éléments horizontalement ou verticalement dans un conteneur. Flexbox est unidimensionnelle, ce qui signifie qu'elle contrôle la disposition le long d'un seul axe (horizontal ou vertical) à la fois.
Dans ce blog, nous aborderons les propriétés clés de Flexbox et comment elles simplifient la gestion de la mise en page.
Propriétés du conteneur flexible :
Avant de plonger dans les propriétés du flex, il est important de comprendre les deux axes de Flexbox :
Comprendre ces axes est important car certaines propriétés alignent les éléments le long de l'axe principal, tandis que d'autres les alignent le long de l'axe transversal. Sachant cela vous aidera à mieux comprendre le fonctionnement des propriétés.
flex-direction : rangée | colonne
Flexbox consiste à aligner les éléments en lignes ou en colonnes. Par défaut, il est défini sur ligne.
<div style="display: flex; flex-direction: row;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
flex-wrap : nowrap | envelopper | wrap-reverse
Cela permet aux éléments flexibles de s'enrouler dans la ligne suivante au lieu de les réduire. La valeur par défaut est nowrap.
<div style="display: flex; flex-wrap: wrap;"> <div class="box">Item 1</div> <div class="box">Item 2</div> <div class="box">Item 3</div> </div>
justify-content :flex-start | extrémité flexible | centre | espace-entre | espace autour | uniformément dans l'espace
Utilisé pour aligner les éléments le long de l'axe principal. Pour flex-direction : row, l'axe x est l'axe principal et l'axe y est l'axe transversal.
<div style="display: flex; justify-content: space-between;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
align-items :flex-start | extrémité flexible | centre | étirer | ligne de base
Utilisé pour aligner les éléments le long de l'axe transversal. Pour la direction de flexion des colonnes, l'axe y est l'axe principal et l'axe x est l'axe transversal.
<div style="display: flex; align-items: center; height: 200px;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
Propriétés des éléments flexibles
align-self : flex-start | extrémité flexible | centre | étirer | ligne de base
La propriété align-self vous permet d'aligner un enfant individuel le long de l'axe transversal.
<div style="display: flex; height: 200px;"> <div style="align-self: flex-start;">Item 1</div> <div style="align-self: center;">Item 2</div> <div style="align-self: flex-end;">Item 3</div> </div>
Croissance et rétrécissement
3 propriétés à connaître : flex-grow, flex-shrink et flex-basis.
flex-grow :
This property defines how much a flex item will grow relative to the other items inside a flex container when there is extra space available. By default, flex-grow is set to 0, meaning items won't grow beyond their natural size. Setting flex-grow: 1 allows the item to expand and occupy the remaining available space within the container.
If multiple items have flex-grow:1 applied, they will divide the extra space proportionally, based on the grow values set for each item.
Imagine a dashboard layout where you have a sidebar and a main content area. You want the sidebar to stay fixed in size, but the main content area should expand and take up the remaining space.
<div style="display: flex;"> <div style="flex-grow: 0; width: 200px;">Sidebar</div> <!-- Fixed width sidebar --> <div style="flex-grow: 1;">Main Content Area</div> <!-- Expanding content area --> </div>
flex-shrink:
When the container size reduces, items inside will also shrink proportionally.
For example, consider a profile card with a rounded image and a name. As the container shrinks, the image may distort, turning from a circle to an oval. To prevent this, you can set flex-shrink: 0, ensuring the image retains its original size while the rest of the content adapts.
<div style="display: flex;"> <img src="profile.jpg" style="flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;" alt="Profile Picture"> <!-- Image won't shrink --> <div style="flex-shrink: 1;">User Name</div> <!-- Name can shrink --> </div>
While you might think of using min-width to achieve the same effect, flex-shrink is a more straightforward and flexible approach within the Flexbox algorithm.
flex-basis: Setting the Initial Size
The flex-basis property defines the initial size of a flex item. If the flex-direction is set to row, flex-basis controls the width of the items. If the flex-direction is column, it controls the height.
flex-basis is similar to the width or height properties, but with one key difference: it only sets the initial size, while allowing the item to grow or shrink depending on the available space and the flex-grow and flex-shrink values.
.child { flex-basis: 25%; /* Starts at 25% width, but can grow to fill space */ flex-grow: 1; /* Will grow to take up more space if available */ }
In this example, the child element initially takes up 25% of the container’s width, but it can grow beyond that if there’s more space available.
Setting a fixed size:
If you want the item to have a fixed size (not grow or shrink), you can use the flex shorthand, like this:
.child { flex: 0 0 100px; /* No growth, no shrinking, stays fixed at 100px */ }
This shorthand breaks down as:
Using width instead of flex-basis inside a flex layout can lead to issues sometimes.because the item defined with width and won't adjust if the container grows or shrinks, making the layout less responsive. So use it appropriately.
align-content:
We've already learned about flex-wrap. Flex-wrap allows flex items to wrap to the next lines instead of shrinking, right?
Each of these flex lines acts like a separate "mini flex container". We also know that the align-items property is used to align items on the cross axis. Here, this align-items property will work inside this flex line only, because as I mentioned, each line itself is a mini flex container. We also have an outer flex container, right? If we need to align these lines with respect to the outer container, we need one more property that aligns these flex lines on the cross axis. That property is align-content.
.container { display: flex; flex-wrap: wrap; align-content: center; height: 300px; } .item { width: 30%; height: 50px; background-color: #3498db; margin: 5px; }
In this example, we have a flex container with multiple items that wrap onto multiple lines. The align-content: center; property centers the wrapped lines along the container's cross-axis.
The possible values for align-content include:
Gaps
The gap property was not available in earlier versions of Flexbox. Previously, developers relied on margin properties to create space between flex items. The introduction of the gap property marked a significant improvement in Flexbox functionality.
It provides a straightforward method for creating space between flex items, simplifying the layout process.
.flex-container { display: flex; gap: 10px; /* Adds a 10px gap between all flex items */ }
margin: auto:
Last but not least, a commonly used spacing trick
The margin: auto property in Flexbox is a powerful tool for aligning flex items. It automatically uses the leftover space around the item, making it useful for centering or pushing items to opposite sides of a container.
For example, you can use margin-left: auto to push an item to the right side of a flex container:
.flex-container { display: flex; } .push-right { margin-left: auto; }
This technique allows for quick and easy alignment without the need for additional positioning properties.
In this guide, we explored how Flexbox has simplified the task of aligning and distributing items within a webpage. Flexbox isn't just a layout tool—it's a critical skill for any web developer aiming to create responsive, well-structured designs. I hope this guide has helped you understand the power of Flexbox.
Try these demos and feel free to share your thoughts or questions. Thanks!
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!