Width

Options

Classe Description
.width[XS, S, M, L, XL]
.width[100, 75, 66, 50, 33, 25]
.width[100, 75, 66, 50, 33, 25]vw
Appliquer une largeur à un élément.
Unités en pixels, pourcentage ou viewport.
.minWidth[XS, S, M, L, XL]
.minWidth[100, 75, 66, 50, 33, 25]
.minWidth[100, 75, 66, 50, 33, 25]vw
Appliquer une largeur minimum à un élément.
.maxWidth[XS, S, M, L, XL]
.maxWidth[100, 75, 66, 50, 33, 25]
.maxWidth[100, 75, 66, 50, 33, 25]vw
Appliquer une largeur maximum à un élément.
.height[XS, S, M, L, XL]
.height[100, 75, 66, 50, 33, 25]
Appliquer une hauteur à un élément.
Unités en pixels ou viewport.
.minHeight[XS, S, M, L, XL]
.minHeight[100, 75, 66, 50, 33, 25]
Appliquer une hauteur minimum à un élément.
.maxHeight[XS, S, M, L, XL]
.maxHeight[100, 75, 66, 50, 33, 25]
Appliquer une hauteur maximum à un élément.
.ratio[16-9, 4-3, 3-2, 2-1, 1-1, 1-2] Appliquer un ratio hauteur/largeur à un élément.

Exemples

Width

WidthXS

WidthS

WidthM

WidthL

WidthXL

<div class="overflowAuto">
    <div class="childCard childBgColor1 childLight">
        <div class="widthXS"><p>WidthXS</p></div>
        <div class="widthS"><p>WidthS</p></div>
        <div class="widthM"><p>WidthM</p></div>
        <div class="widthL"><p>WidthL</p></div>
        <div class="widthXL"><p>WidthXL</p></div>
    </div>
</div>

Width25

Width33

Width50

Width66

Widtd75

Width100

<div class="overflowAuto">
    <div class="childCard childBgColor1 childLight">
        <div class="width25"><p>Width25</p></div>
        <div class="width33"><p>Width33</p></div>
        <div class="width50"><p>Width50</p></div>
        <div class="width66"><p>Width66</p></div>
        <div class="width75"><p>Widtd75</p></div>
        <div class="width100"><p>Width100</p></div>
    </div>
</div>

Min width

minWidthXS

minWidthS

minWidthM

minWidthL

minWidthXL

<div class="overflowAuto">
    <div class="childCard childBgColor1 childLight">
        <div class="minWidthXS"><p>minWidthXS</p></div>
        <div class="minWidthS"><p>minWidthS</p></div>
        <div class="minWidthM"><p>minWidthM</p></div>
        <div class="minWidthL"><p>minWidthL</p></div>
        <div class="minWidthXL"><p>minWidthXL</p></div>
    </div>
</div>

Max width

maxWidthXS

maxWidthS

maxWidthM

maxWidthL

maxWidthXL

<div class="childCard childBgColor1 childLight">
    <div class="maxWidthXS"><p>maxWidthXS</p></div>
    <div class="maxWidthS"><p>maxWidthS</p></div>
    <div class="maxWidthM"><p>maxWidthM</p></div>
    <div class="maxWidthL"><p>maxWidthL</p></div>
    <div class="maxWidthXL"><p>maxWidthXL</p></div>
</div>

Ratio

ratio16-9

ratio4-3

ratio3-2

ratio2-1

ratio1-1

ratio1-2

<div class="grid2 grid4M grid6XS gutter flexTop childBgColor1 childLight">
    <div>
        <div class="ratio16-9">
            <p class="positionCenter">ratio16-9</p>
        </div>
    </div>
    <div>
        <div class="ratio4-3">
            <p class="positionCenter">ratio4-3</p>
        </div>
    </div>
    <div>
        <div class="ratio3-2"><p class="positionCenter">ratio3-2</p></div>
    </div>
    <div>
        <div class="ratio2-1"><p class="positionCenter">ratio2-1</p></div>
    </div>
    <div>
        <div class="ratio1-1"><p class="positionCenter">ratio1-1</p></div>
    </div>
    <div>
        <div class="ratio1-2"><p class="positionCenter">ratio1-2</p></div>
    </div>
</div>

height

heightXS

heightS

heightM

heightL

heightXL

<div class="childCard childBgColor1 childLight">
    <div class="heightXS"><p>heightXS</p></div>
    <div class="heightS"><p>heightS</p></div>
    <div class="heightM"><p>heightM</p></div>
    <div class="heightL"><p>heightL</p></div>
    <div class="heightXL"><p>heightXL</p></div>
</div>

height25

height33

height50

height66

height75

height100

<div class="childCard childBgColor1 childLight">
    <div class="height25"><p>height25</p></div>
    <div class="height33"><p>height33</p></div>
    <div class="height50"><p>height50</p></div>
    <div class="height66"><p>height66</p></div>
    <div class="height75"><p>height75</p></div>
    <div class="height100"><p>height100</p></div>
</div>