<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox</strong> class on the container</p>

<!-- Use .pow-flexbox -->
<div class="pow-flexbox">
    <div class="bloc">Flex item</div>
    <div class="bloc">Flex item</div>
    <div class="bloc">Flex item</div>
</div>



<!-- DO NOT REFER TO THIS -->
<style>
.pow-flexbox {
    background-color: #b8c0ce;
}
.bloc {
    padding: 10px;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #333;
    text-align: center;
    font-family: "Regular";
}
p {
    margin: 0;
}
strong {
    font-family: "Bold";
}
</style>
		

		<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-row</strong> classes on the container</p>

<!-- Use .pow-flexbox.pow-flex-row -->
<div class="pow-flexbox pow-flex-row">
    <div class="bloc">Flex item 1</div>
    <div class="bloc">Flex item 2</div>
    <div class="bloc">Flex item 3</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-column</strong> classes on the container</p>

<!-- Use .pow-flexbox.pow-flex-column -->
<div class="pow-flexbox pow-flex-column">
    <div class="bloc">Flex item 1</div>
    <div class="bloc">Flex item 2</div>
    <div class="bloc">Flex item 3</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-row-reverse</strong> classes on the container</p>

<!-- Use .pow-flexbox.pow-flex-row-reverse -->
<div class="pow-flexbox pow-flex-row-reverse">
    <div class="bloc">Flex item 1</div>
    <div class="bloc">Flex item 2</div>
    <div class="bloc">Flex item 3</div>
</div>





<!-- DO NOT REFER TO THIS -->
<style>
.pow-flexbox {
    background-color: #b8c0ce;
    margin-bottom: 30px;
}
.bloc {
    padding: 10px;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #333;
    text-align: center;
    font-family: "Regular";
}
p {
    margin: 0;
}
strong {
    font-family: "Bold";
}
</style>
		

		<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-space-between</strong> classes on the container</p>

<!-- Use .pow-flexbox.pow-flex-space-between -->
<div class="pow-flexbox pow-flex-space-between">
    <div class="bloc">Flex item 1</div>
    <div class="bloc">Flex item 2</div>
    <div class="bloc">Flex item 3</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-space-around</strong> classes on the container</p>

<!-- Use .pow-flexbox.pow-flex-space-around -->
<div class="pow-flexbox pow-flex-space-around">
    <div class="bloc">Flex item 1</div>
    <div class="bloc">Flex item 2</div>
    <div class="bloc">Flex item 3</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-justify-center</strong> classes on the container</p>

<!-- Use .pow-flexbox.pow-flex-justify-center -->
<div class="pow-flexbox pow-flex-justify-center">
    <div class="bloc">Flex item 1</div>
    <div class="bloc">Flex item 2</div>
    <div class="bloc">Flex item 3</div>
</div>



<!-- Use .pow-flexbox.pow-flex-justify-end -->
<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-justify-end</strong> classes on the container</p>

<div class="pow-flexbox pow-flex-justify-end">
    <div class="bloc">Flex item 1</div>
    <div class="bloc">Flex item 2</div>
    <div class="bloc">Flex item 3</div>
</div>





<!-- DO NOT REFER TO THIS -->
<style>
.pow-flexbox {
    background-color: #b8c0ce;
    margin-bottom: 30px;
}
.bloc {
    padding: 10px;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #333;
    text-align: center;
    font-family: "Regular";
}
p {
    margin: 0;
}
strong {
    font-family: "Bold";
}
</style>
		

		<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flex-align-self-start</strong> class on flexbox child element</p>

<!-- Use .pow-flex-align-self-start -->
<div class="pow-flexbox">
    <div class="bloc pow-flex-align-self-start">Item with pow-flex-align-self-start</div>
    <div class="bloc">Flex item</div>
    <div class="bloc pow-flex-align-self-start">Item with pow-flex-align-self-start</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flex-align-self-center</strong> class on flexbox child element</p>

<!-- Use .pow-flex-align-self-center -->
<div class="pow-flexbox">
    <div class="bloc pow-flex-align-self-center">Item with pow-flex-align-self-center</div>
    <div class="bloc">Flex item</div>
    <div class="bloc pow-flex-align-self-center">Item with pow-flex-align-self-center</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flex-align-self-center</strong> class on flexbox child element</p>

<!-- Use .pow-flex-align-self-end -->
<div class="pow-flexbox">
    <div class="bloc pow-flex-align-self-end">Item with pow-flex-align-self-end</div>
    <div class="bloc">Flex item</div>
    <div class="bloc pow-flex-align-self-end">Item with pow-flex-align-self-end</div>
</div>





<!-- DO NOT REFER TO THIS -->
<style>
.pow-flexbox {
    background-color: #b8c0ce;
    margin-bottom: 30px;
    min-height: 80px;
}
.bloc {
    padding: 10px;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #333;
    text-align: center;
    font-family: "Regular";
}
p {
    margin: 0;
}
strong {
    font-family: "Bold";
}
</style>
		

		<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-wrap</strong> classes on the container</p>

<!-- Use .pow-flexbox.pow-flex-wrap -->
<div class="pow-flexbox pow-flex-wrap">
    <div class="bloc">Flex item 1</div>
    <div class="bloc">Flex item 2</div>
    <div class="bloc">Flex item 3</div>
    <div class="bloc">Flex item 4</div>
    <div class="bloc">Flex item 5</div>
    <div class="bloc">Flex item 6</div>
    <div class="bloc">Flex item 7</div>
    <div class="bloc">Flex item 8</div>
    <div class="bloc">Flex item 9</div>
    <div class="bloc">Flex item 10</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-nowrap</strong> classes on the container</p>

<!-- Use .pow-flexbox.pow-flex-nowrap -->
<div class="pow-flexbox pow-flex-nowrap">
    <div class="bloc">Flex item 1</div>
    <div class="bloc">Flex item 2</div>
    <div class="bloc">Flex item 3</div>
    <div class="bloc">Flex item 4</div>
    <div class="bloc">Flex item 5</div>
    <div class="bloc">Flex item 6</div>
    <div class="bloc">Flex item 7</div>
    <div class="bloc">Flex item 8</div>
    <div class="bloc">Flex item 9</div>
    <div class="bloc">Flex item 10</div>
</div>




<!-- DO NOT REFER TO THIS -->
<style>
.pow-flexbox {
    background-color: #b8c0ce;
    margin-bottom: 30px;
    min-height: 80px;
    width: 280px;
}
.bloc {
    padding: 10px;
    color: #333;
    background-color: rgba(0, 0, 0, .1);
    border: 1px solid #333;
    text-align: center;
    font-family: "Regular";
}
p {
    margin: 0;
}
strong {
    font-family: "Bold";
}
</style>
		

		<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flex-align-right</strong> class on flexbox child element</p>

<!-- Use .pow-flex-align-right -->
<div class="pow-flexbox">
    <div class="bloc">Flex item</div>
    <div class="bloc pow-flex-align-right">Flex item with pow-flex-align-right</div>
    <div class="bloc">Flex item</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flex-align-left</strong> class on flexbox child element</p>

<!-- Use .pow-flex-align-left -->
<div class="pow-flexbox">
    <div class="bloc">Flex item</div>
    <div class="bloc pow-flex-align-left">Flex item with pow-flex-align-left</div>
    <div class="bloc">Flex item</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flex-align-bottom</strong> class on flexbox child element</p>

<!-- Use .pow-flex-align-bottom -->
<div class="pow-flexbox">
    <div class="bloc pow-flex-align-bottom">Item with pow-flex-align-bottom</div>
    <div class="bloc">Flex item</div>
    <div class="bloc pow-flex-align-bottom">Item with pow-flex-align-bottom</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flex-align-top</strong> class on flexbox child element</p>

<!-- Use .pow-flex-align-top -->
<div class="pow-flexbox">
    <div class="bloc pow-flex-align-top">Item with pow-flex-align-top</div>
    <div class="bloc">Flex item</div>
    <div class="bloc pow-flex-align-top">Item with pow-flex-align-top</div>
</div>




<!-- DO NOT REFER TO THIS -->
<style>
.pow-flexbox {
    background-color: #b8c0ce;
    margin-bottom: 30px;
    min-height: 80px;
}
.bloc {
    padding: 10px;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #333;
    text-align: center;
    font-family: "Regular";
}
p {
    margin: 0;
}
strong {
    font-family: "Bold";
}
</style>
		

		<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-row</strong> classes on container and use .pow-flex-fit on flexbox child element</p>

<!-- Use .pow-flexbox.pow-flex-row and pow-flex-fit -->
<div class="pow-flexbox pow-flex-row">
    <div class="bloc pow-flex-fit">Flex item with .pow-flex-fit</div>
    <div class="bloc">Flex item</div>
    <div class="bloc">Flex item</div>
</div>



<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flexbox.pow-flex-column</strong> classes on container and use .pow-flex-fit on flexbox child element</p>

<!-- Use .pow-flexbox.pow-flex-column and pow-flex-fit -->
<div class="pow-flexbox pow-flex-column">
    <div class="bloc pow-flex-fit">Flex item with .pow-flex-fit</div>
    <div class="bloc">Flex item</div>
    <div class="bloc">Flex item</div>
</div>





<!-- DO NOT REFER TO THIS -->
<style>
.pow-flexbox {
    background-color: #b8c0ce;
    margin-bottom: 30px;
}
.pow-flexbox.pow-flex-column {
    min-height: 150px;
}
.bloc {
    padding: 10px;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #333;
    text-align: center;
    font-family: "Regular";
}
p {
    margin: 0;
}
strong {
    font-family: "Bold";
}
</style>
		

		<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">Use <strong>.pow-flex-no-shrink</strong> class on the child element to prevent this element to be shrink: it will retain the width it needs, and not wrap its content.</p>

<!-- Use .pow-flexbox.pow-flex-space-between -->
<div class="pow-flexbox">
    <div class="bloc pow-flex-no-shrink" style="width: 100px">Flex item with 122px</div>
    <div class="bloc pow-flex-fit" style="width: 1000px">Flex item 2</div>
    <div class="bloc">Flex item 3</div>
</div>






<!-- DO NOT REFER TO THIS -->
<style>
.pow-flexbox {
    background-color: #b8c0ce;
    margin-bottom: 30px;
}
.bloc {
    padding: 10px;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #333;
    text-align: center;
    font-family: "Regular";
}
p {
    margin: 0;
}
strong {
    font-family: "Bold";
}
</style>