Layout – Flex
Flex based layout systems are used for layouting, align content and distribute space. CSS flex property is used for setting such layouts
Basic layout with as many columns of equal width.
This is item 1
This is item 2
This is item 3
This is item 4
This is item 5
Basic layout with different length of content.
This is item 1. This has more content and will probably need more space
This is item 2. Short one!
This is item 3. This is the biggest of the lott but needs to be in the same width as others. It’s easy to do this.
This is item 3. This is the biggest of the lott but needs to be in the same width as others. It’s easy to do this.
This is item 3. This is the biggest of the lott but needs to be in the same width as others. It’s easy to do this.
Basic layout with column alignment.
This is item 1. This has more content and will probably need more space
This is item 2. bottom aligned one!
This is item 3. This is the biggest of the lott but needs to be in the same width as others. It’s easy to do this.
This is item 3. This is the biggest of the lott but needs to be in the same width as others. It’s easy to do this.
This is item 3. This is the biggest of the lott but needs to be in the same width as others. It’s easy to do this.
Basic layout with column padding and center alignment.
This is item 1. This has more content and will probably need more space
This is item 2. Center aligned one!
This is item 3. This is the biggest of the lott but needs to be in the same width as others. It’s easy to do this.
<div class="app-flex">
<div class="flex__col">
<div class="border-box-styled">This is item 1</div>
</div>
<div class="flex__col">
<div class="border-box-styled">This is item 2</div>
</div>
<div class="flex__col">
<div class="border-box-styled">This is item 3</div>
</div>
<div class="flex__col">
<div class="border-box-styled">This is item 4</div>
</div>
</div>
<div class="app-flex is--padded is--center-aligned">
<div class="flex__col">
<div class="border-box-styled">This is item 1. This has more content and will probably need more space</div>
</div>
<div class="flex__col">
<div class="border-box-styled">This is item 2. Center aligned one!</div>
</div>
<div class="flex__col">
<div class="border-box-styled">This is item 3. This is the biggest of the lott but needs to be in the same width as others. It's easy to do this.</div>
</div>
</div>
Layout with specified column width. Use values ranging between 10-100% on columns to specify width.
Column 25
Column 25
Column 50
Column 33
Column 66
Column 20
Column 80
Grid columns with padding:
Column 60
Column 40
<div class="app-flex is--padded">
<div class="flex__col is--col-25">Column 25</div>
<div class="flex__col is--col-25">Column 25</div>
<div class="flex__col is--col-50">Column 50</div>
</div>
<div class="app-flex is--padded">
<div class="flex__col is--col-60">Column 60</div>
<div class="flex__col is--col-40">Column 40</div>
</div>