MaxSite Plus
Additional blocks for Berry CSS, Albireo CMS and MF-template
Home/Blocks
Berry CSSBerry CSS Builder

Flex

flex1
<p class="t-center t-bold">b-flex</p>

<div class="b-flex">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">7</div>
</div>
flex2
<p class="t-center t-bold">flex</p>

<div class="flex">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">7</div>
</div>
flex3
<p class="t-center t-bold">row</p>

<div class="flex flex-row">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">7</div>
</div>

<br>

<div class="flex flex-row-reverse">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">7</div>
</div>
flex4
<p class="t-center t-bold">column</p>

<div class="flex flex-column">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
</div>

<br>

<div class="flex flex-column-reverse">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
</div>
flex5
<p class="t-center t-bold">wrap</p>

<div class="flex flex-wrap">
    <div class="w50 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="w50 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w50 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
</div>

<br>

<div class="flex flex-wrap-reverse">
    <div class="w50 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="w50 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w50 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
</div>

<br>

<div class="flex flex-nowrap">
    <div class="w50 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="w50 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w50 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
</div>
flex6
<p class="t-center t-bold">justify-content</p>

<div class="flex flex-jc-start bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">start</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>

<br>

<div class="flex flex-jc-end bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">end</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>

<br>

<div class="flex flex-jc-between bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">between</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>

<br>

<div class="flex flex-jc-around bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">around</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>

<br>

<div class="flex flex-jc-center bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">center</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>
flex7
<p class="t-center t-bold">align-items</p>

<div class="flex flex-ai-start bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">start</div>
    <div class="pad20 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad30 bordered bg-primary100 dark:bg-primary700">3</div>
</div>

<br>

<div class="flex flex-ai-end bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">end</div>
    <div class="pad20 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad30 bordered bg-primary100 dark:bg-primary700">3</div>
</div>

<br>

<div class="flex flex-ai-baseline bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">baseline</div>
    <div class="pad20 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad30 bordered bg-primary100 dark:bg-primary700">3</div>
</div>

<br>

<div class="flex flex-ai-stretch bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">stretch</div>
    <div class="pad20 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad30 bordered bg-primary100 dark:bg-primary700">3</div>
</div>

<br>

<div class="flex flex-ai-center bordered bg-primary50 dark:bg-primary800">
    <div class="pad10 bordered bg-primary100 dark:bg-primary700">center</div>
    <div class="pad20 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="pad30 bordered bg-primary100 dark:bg-primary700">3</div>
</div>
flex8
<p class="t-center t-bold">align-content</p>

<div class="b-flex flex-wrap flex-ac-start h150px bordered bg-primary50 dark:bg-primary800">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">start</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">7</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>

<br>

<div class="b-flex flex-wrap flex-ac-end h150px bordered bg-primary50 dark:bg-primary800">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">end</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">7</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>

<br>

<div class="b-flex flex-wrap flex-ac-center h150px bordered bg-primary50 dark:bg-primary800">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">center</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">7</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>

<br>

<div class="b-flex flex-wrap flex-ac-between h150px bordered bg-primary50 dark:bg-primary800">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">between</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">7</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>

<br>

<div class="b-flex flex-wrap flex-ac-around h150px bordered bg-primary50 dark:bg-primary800">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">around</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">7</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>

<br>

<div class="b-flex flex-wrap flex-ac-stretch h150px bordered bg-primary50 dark:bg-primary800">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">stretch</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">7</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>
flex9
<p class="t-center t-bold">align-self start</p>

<div class="b-flex flex-wrap h200px">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="flex-as-start w25 pad10 bordered bg-primary100 dark:bg-primary700">start</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="flex-as-start w25 pad10 bordered bg-primary100 dark:bg-primary700">start</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>
flex10
<p class="t-center t-bold">align-self end</p>

<div class="b-flex flex-wrap h200px">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="flex-as-end w25 pad10 bordered bg-primary100 dark:bg-primary700">end</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="flex-as-end w25 pad10 bordered bg-primary100 dark:bg-primary700">end</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>
flex11
<p class="t-center t-bold">align-self center</p>

<div class="b-flex flex-wrap h200px">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="flex-as-center w25 pad10 bordered bg-primary100 dark:bg-primary700">center</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="flex-as-center w25 pad10 bordered bg-primary100 dark:bg-primary700">center</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>
flex12
<p class="t-center t-bold">align-self baseline</p>

<div class="b-flex flex-wrap h200px">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="flex-as-baseline w25 pad10 bordered bg-primary100 dark:bg-primary700">baseline</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="flex-as-baseline w25 pad10 bordered bg-primary100 dark:bg-primary700">baseline</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>
flex13
<p class="t-center t-bold">align-self stretch</p>

<div class="b-flex flex-wrap h200px">
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="flex-as-stretch w25 pad10 bordered bg-primary100 dark:bg-primary700">stretch</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">6</div>
    <div class="flex-as-stretch w25 pad10 bordered bg-primary100 dark:bg-primary700">stretch</div>
    <div class="w25 pad10 bordered bg-primary100 dark:bg-primary700">8</div>
</div>
flex14
<p class="t-center t-bold">flex-basis</p>

<div class="flex">
    <div class="flex-basis50px  pad10 bordered bg-primary100 dark:bg-primary700">50px</div>
    <div class="flex-basis100px pad10 bordered bg-primary100 dark:bg-primary700">100px</div>
    <div class="flex-basis150px pad10 bordered bg-primary100 dark:bg-primary700">150px</div>
</div>

<br>

<div class="flex">
    <div class="flex-basis-var pad10 bordered bg-primary100 dark:bg-primary700" style="--flex-basis: 70px">70px</div>
    <div class="flex-basis-var pad10 bordered bg-primary100 dark:bg-primary700" style="--flex-basis: 90px">90px</div>
    <div class="flex-basis-var pad10 bordered bg-primary100 dark:bg-primary700" style="--flex-basis: 130px">130px</div>
</div>
flex15
<p class="t-center t-bold">order</p>

<div class="flex">
    <div class="flex-order2 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="flex-order3 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="flex-order1 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
</div>
flex16
<p class="t-center t-bold">flex-grow</p>

<div class="flex">
    <div class="flex-grow1 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="flex-grow2 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="flex-grow3 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="flex-grow4 pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="flex-grow5 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>
flex17
<p class="t-center t-bold">flex-shrink</p>

<div class="flex">
    <div class="w50 flex-shrink1 pad10 bordered bg-primary100 dark:bg-primary700">1</div>
    <div class="w50 flex-shrink2 pad10 bordered bg-primary100 dark:bg-primary700">2</div>
    <div class="w50 flex-shrink3 pad10 bordered bg-primary100 dark:bg-primary700">3</div>
    <div class="w50 flex-shrink4 pad10 bordered bg-primary100 dark:bg-primary700">4</div>
    <div class="w50 flex-shrink5 pad10 bordered bg-primary100 dark:bg-primary700">5</div>
</div>
MaxSite.org © 2006-2026