Devarsenal

Flexbox cheat sheet 2

Flex container (Parent)

1 2 3

Flex items (Children)

Child properties
order flex-basis
4 1 3 2
1 2 3 4

The order property defines the order in which the

flex items are to be arranged in. By default, flex The flex-basis property defines how much the initia l

items will be arranged in the source order. The length of an individual flex-item can be.

initial value of order is 0 “ZERO”.

<div class=”flex-container”>
<div class=”flex-container”>
<div> 1 </div>
<div style=”order: 1”> 1 </div>
<div> 2 </div>
<div style=”order: 3”> 2 </div>
b p
<div style=”flex- asis: 300 x”> 3 </div>
<div style=”order: 2”> 3 </div>
<div> 4 </div>
<div style=”order: 0”> 4 </div> </div>
</div>

flex-grow flex
The “ flex” is a shorthand property for defining
row-1
k
flex-grow, flex-shrin , and the flex-basis properties.

1 2 1 <div class=”flex-container”>

<div> 1 </div>

row-2 <div> 2 </div>

p
<div style=”flex: 0 0 300 x”> 3 </div>

1 1 1 <div> 4 </div>

</div>

This defines how much a flex item can grow inside the This shorthand property is highly recommended over

flex container. The default value is 0. In row-1, the defining individual properties.

first and the last are of equal sizes, but the second

item is twice as big as the first or the last item.

align-self
<div class=”row-1”>
The align-self property sets the alignment property for
<div style=”flex-grow: 1”> 1 </div>
the selected flex item inside the flex-container. This
<div style=”flex-grow: 2”> 2 </div>

<div style=”flex-grow: 1”> 1 </div>

property overrides the default alignment property
</div> ’
assigned by the container s align-items property.

<div class=”row-2”>
flex-start
<div style=”flex-grow: 1”> 1 </div>

<div style=”flex-grow: 1”> 1 </div>

<div style=”flex-grow: 1”> 1 </div> 1 2 4

</div>

3
flex-shrink

1 2 3 4 5 6 7 8 9 flex-end

The flex-shrin k property defines how a flex item <div class=”container” style=”flex-start”>

should shrin k relative to the rest of the flex items. <div> 1 </div>

<div class=”flex-container”>
<div> 2 </div>

<div> 1 </div> f
<div style=”align-sel : flex-end”> 3 </div>
<div> 2 </div>
<div> 4 </div>
<div> 3 </div>
</div>
h k
<div style=”flex-s rin : 0”> 4 </div>

...
<div> 5 </div>

<div> 9 </div> k
The align-self property wor s similarly for
</div>
flex-start, center, space-between, space-around

and space-evenly properties.

Copyright © 2021 by Devarsenal

All rights reserved. No part of this guide

may be reproduced or used in any

manner without written permission of the

copyright owner except for the

Contact - [email protected] Beginner to Advanced HTML5 and CSS3 quotations in a review.

Referral code - https://www.udemy.com/course/beginner-to-advanced-html5-css3/?referralCode=86B48B5D2E398D20182A