Flex
flex utilities helps to quickly manage the layout, alignment, and sizing of grid columns that adjusts dynamically based on the size of the viewport or the screen.
flex
<div class="flex pad15 ds-bg-grey-500 ds-font-white">I'm a flexbox container!</div>
inline-flex
<div class="inline-flex pad15 ds-bg-grey-500 ds-font-white">I'm an inline flexbox container!</div>
flex
By applying the .flex class to the main-box, it will horizontally arrange the sub boxes. its default arrangement.
<div class="flex col-gap-10">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
flex1
By applying the ".flex" class to the wrapper, and ".flex1" to each content div, the layout will arranged as below, where the container width is equally split for the content divs:
<div class="flex flex-row col-gap-10">
<div class="flex1 ds-bg-grey-500 pad15">A</div>
<div class="flex1 ds-bg-grey-500 pad15">B</div>
<div class="flex1 ds-bg-grey-500 pad15">C</div>
</div>
flex-none
By applying the ".flex" class to the wrapper, and .flex1 classes to each other content divs, and the flex-none class to a specific content div with a width of 70% the width of the wrapper container will be split equally among the ".flex1" divs, while the "flex-none" div wll have a width of 70%.
<div class="flex col-gap-10">
<div class="flex-none ds-bg-grey-500 pad15" style="width: 300px;">A</div>
<div class="flex1 ds-bg-grey-500 pad15">B</div>
<div class="flex1 ds-bg-grey-500 pad15">C</div>
</div>
flex-column
By applying the ".flex" and ".flex-column" classes to the wrapper div, the content divs will be arranged vertically, as if they were stacked in a single column
<div class="flex flex-column row-gap-10">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
flex-column-reverse
By applying the ".flex" and ".flex-column-reverse" classes to the wrapper div, the content divs will be arranged vertically reverse order, as if they were stacked in a single column
<div class="flex flex-column-reverse row-gap-10">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
flex-row
By applying the ".flex" and ".flex-row" classes to the wrapper div, the content divs will be arranged horizontally, as if they were all in a single row
<div class="flex flex-row col-gap-10">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
flex-row-reverse
By applying the ".flex" and ".flex-row-reverse" classes to the wrapper div, the content divs will be arranged horizontally in reverse order, starting from the opposite end(right side)
<div class="flex flex-row-reverse col-gap-10">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
align-center
By applying the ".flex" and ".align-center" classes to the wrapper div, the content divs will be arranged vertically centered inside the wrapper
<div class="flex align-center col-gap-10">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
justify-center
By applying the ".flex" and ".justify-center" classes to the wrapper div, the content divs will be arranged horizontally centered inside the wrapper
<div class="flex justify-center col-gap-10">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
center-flexbox
By applying the ".flex" and ".center-flexbox" classes to the wrapper div, the content divs will be arranged vertically and horizontally centered inside the wrapper
<div class="flex center-flexbox col-gap-10">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
justify-between
By applying the ".flex" and ".justify-between" classes to the wrapper div, the content divs will share the in between spaces equally
<div class="flex justify-between col-gap-10">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
align-flex-start
By applying the ".flex" and ".align-flex-start" classes to the wrapper div, the content divs will be placed at the starting of the wrapper div
<div class="flex align-flex-start col-gap-10" >
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
align-flex-end
By applying the ".flex" and ".align-flex-end" classes to the wrapper div, the content divs will be placed at the bottom end of the wrapper div
<div class="flex align-flex-end col-gap-10" >
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
align-self-center
By applying the ".flex" class to the wrapper div and ".align-self-center" to a specific content div, then that only will be placed vertically centered in the wrapper div
<div class="flex col-gap-10" >
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="align-self-center ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
</div>
flex-wrap
By applying the ".flex" and ".flex-wrap" classes to the wrapper div, the content divs will be wrapped to the next line depending on the width
<div class="flex flex-wrap col-gap-10" style="width: 200px;">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
<div class="ds-bg-grey-500 ds-font-white pad15">D</div>
<div class="ds-bg-grey-500 ds-font-white pad15">E</div>
<div class="ds-bg-grey-500 ds-font-white pad15">F</div>
<div class="ds-bg-grey-500 ds-font-white pad15">G</div>
</div>
flex-nowrap
By applying the ".flex" and ".flex-nowrap" classes to the wrapper div, the content divs will no be wrapp to the next line
<div class="flex flex-nowrap col-gap-10" style="width: 200px;">
<div class="ds-bg-grey-500 ds-font-white pad15">A</div>
<div class="ds-bg-grey-500 ds-font-white pad15">B</div>
<div class="ds-bg-grey-500 ds-font-white pad15">C</div>
<div class="ds-bg-grey-500 ds-font-white pad15">D</div>
<div class="ds-bg-grey-500 ds-font-white pad15">E</div>
<div class="ds-bg-grey-500 ds-font-white pad15">F</div>
<div class="ds-bg-grey-500 ds-font-white pad15">G</div>
</div>