display:flex
) display: flex
(ou
display: inline-flex
) aura des enfants (appelés flex items) associés à une taille
auto-adaptable.flex-direction
) qui indique
le sens d'empilement des items contenus dans la flexbox (valeur parmi row, row-reverse,
column
et column-reverse
).<div class="maFlexbox">
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>
<div>Cinquième item</div>
</div>
.maFlexbox {
display: flex;
flex-direction : row;
width: 450px
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
}
.maFlexbox {
display: flex;
flex-direction : column-reverse;
width: 450px
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
}
flex-wrap
permet de modifier ce comportement (valeur parmi
no-wrap, wrap
et wrap-reverse
).
.maFlexbox {
display: flex;
width: 450px
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
width : 100px;
}
.maFlexbox {
display: flex;
width: 450px;
flex-wrap : wrap;
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
width : 100px;
}
flex-basis, flex-grow
et
flex-shrink
permettent de définir respectivement :
.maFlexbox {
display: flex;
width: 450px
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
flex-grow : 1;
}
.maFlexbox {
display: flex;
width: 450px
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
flex-grow : 1;
}
.maFlexBox > div.item1{
flex-grow : 3;
}
flex-shrink
agit de la même façon en attribuant un coefficient de rétrécissement aux flex-items ciblés.maFlexbox {
display: flex;
width: 450px
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
flex-basis : 100px;
flex-shrink : 1;
}
.maFlexbox {
display: flex;
width: 450px
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
flex-basis : 100px;
}
.maFlexBox > div.item1{
flex-shrink : 15;
}
.maFlexBox > div.item2-4{
flex-shrink : 5;
}
align-item
et
justify-content
permettent de définir respectivement :
stretch, flex-start, flex-end
et center
;flex-start, flex-end, center, space-around, space-between
et
space-evenly
..maFlexbox {
display: flex;
height: 150px;
width: 450px;
align-items : center;
border : red solid thin;
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
flex-basis : 100px;
height: 60px;
}
.maFlexbox {
display: flex;
height: 150px;
width: 450px;
justify-content : space-evenly;
border : red solid thin;
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
flex-basis : 100px;
height: 60px;
}
.maFlexbox {
display: flex;
height: 150px;
width: 450px;
align-items : center;
justify-content : space-evenly;
border : red solid thin;
}
.maFlexBox > div{
border-radius: 5px;
border: mediumblue thin solid;
flex-basis : 100px;
height: 60px;
}