blob: 90496bbcbeff01f669d75e1021531fc3c3013f0b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
---
title: Conteneur flexible
slug: Glossaire/Flex_Container
tags:
- CSS
- Glossaire
- flexbox
translation_of: Glossary/Flex_Container
---
<p>Une mise en page {{glossary("flexbox")}} est définie en utilisant les valeurs <code>flex</code> ou <code>inline-flex</code> de la propriété <code>display</code> sur l'élément parent. Cet élément devient alors un <strong>conteneur flexible</strong> et chacun de ses enfants un {{glossary("flex item","élément flexible")}}.</p>
<p>Une valeur <code>flex</code> fait que l'élément devient un conteneur flexible de niveau bloc et <code>inline-flex</code>, un conteneur flexible de niveau en ligne. Ces valeurs créent un <strong>contexte de mise en forme flexible</strong> pour l'élément, qui est similaire à un contexte de mise en forme de bloc dans la mesure où les flottants ne s'introduiront pas dans le conteneur et les marges du conteneur ne s'effondreront pas avec celles des articles.</p>
<h2 id="En_apprendre_plus">En apprendre plus</h2>
<h3 id="Références_de_la_propriété">Références de la propriété</h3>
<div class="index">
<ul>
<li>{{cssxref("align-content")}}</li>
<li>{{cssxref("align-items")}}</li>
<li>{{cssxref("flex")}}</li>
<li>{{cssxref("flex-direction")}}</li>
<li>{{cssxref("flex-flow")}}</li>
<li>{{cssxref("flex-wrap")}}</li>
<li>{{cssxref("justify-content")}}</li>
</ul>
</div>
<h3 id="En_lire_plus">En lire plus</h3>
<ul>
<li>Guide Flexbox CSS : <em><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base pour flexbox</a></em></li>
<li>Guide Flexbox CSS : <em><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible">Aligner des éléments dans un conteneur flexible</a></em></li>
<li>Guide Flexbox CSS : <em><a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Maîtriser le passage à la ligne des éléments flexibles</a></em></li>
</ul>
|
