- Example on using flexbox.
- Parent level apis for
display:flex
flex-flow
this contains flex-direction & flex-wrap.
Example:
flex-flow: row wrap;
flex-direction
: functions by ** Main Axis vs. Cross Axis ** concept
# flex-direction: row
main axis starts on the Left--->
|
|
cross axis
# flex-direction: row-reverse
<-----| Main axis starts from Right
|
|
cross axis
# flex-direction: column
|---->Cross axis Left--->Right
|
|
Main Axis heads TOP--->BOTTOM
# flex-direction: column-reverse
Main Axis heads BOTTOM--->UP
|
|
|---->Cross axis Left--->Right
align-items
: adjusted by cross axis So ifflex-direction: row
&alight-items: center
, then the content would be centered coming from the top ---> bottom.
justify-content
: adjusted by main-axis So ifflex-direction: row
&justify-content: center
, then the content would be centered coming from the left ---> center.
align-content
: defines extra space characteristics based on cross-axis. All these<div>
will have there blank spaces adjusted. Soalign-content:space-between
would adjust the space (on view resizing) to keep the<div>
sizes by forcing them to the ends so a large amount of white space would appear between them.
*** All these child properties are affected by flex-flow!
order
property Ex.order:1
on the first div would position it last. All other divs are treated asorder:0
by default.
align-self
property - based on parent cross-axis Ex.flex-direction: row
in parent and setalign-self:flex-start
on the child div would set it at the top of the page.
flex
- contains 3 properties (flex-grow
,flex-shrink
,flex-basis
)
# flex default setting
# 0 = flex-grow
# 1 = flex-shrink
# auto = flex-basis
flex: 0 1 auto;
flex-grow
- default adjustments are all
flex-grow:0
- flex-grow will grow will increase the width to fill the whole page
- And if a div is set to
flex-grow:1
and another div is set toflex-grow:2
They will both grow but at a 2:1 ratio
flex-shrink
- default adjustments are all
flex-shrink:1
- Just like flex-grow, giving another div a setting of
flex-shrink:2
will cause it to shrink 2xmore
flex-basis
- default adjustments are all
flex-basis:auto
- Always the size of the element relating to the Main Axis. So a height setting (effected by flex-direction: column) and width (effected by flex-direction:row)
- *** heights and width in parent or sibiling divs will affect a div set with
flex-basis:???px