Frontend Scrapbook

Notes that make a difference

Flexbox

By admin

on Wed Sep 16 2020

We can make a container as flexbox using property

display:flex

Flexbox container always has a direction. On the web, this always defaults to the main-axis being left to right (horizontally) and cross-axis being top to bottom ( vertically ).

flex-direction: row // default (lef-right)
//means all the elements inside it are layout horizontally
// column means each element takes its own row (like a block level element) layed out vertically (top-bottom).
Fun Fact: This behavior is different from React Native, where flex-direction defaults to column.

To position elements in the horizontal axis,

justify-content: center || space-around || space-between || space-evenly || flex-start || flex-end

To position each element in the horizontal axis,

<div class="container">
   <div class="home">Home</div>
   <div class="search">Search</div>
   <div class="logout">Logout</div>
</div>

.home { margin-left:auto } // will move all items towards right
OR
.logout { margin-left: auto; } // will move logout to right
//if margin-right:auto; it will move towards left end

We can make all child elements of container responsive using flex property

.container > div {
  flex: 1;
  /*flex-grow, flex-shrink, flex-basis */
}

We could specifically target an element and set a different flex value. This will set the width of the search element to twice the width of other elements.

.container > .search {
  flex: 2;
}

We can have a fixed width to search element and other elements responsive by setting

// not set a flex value to search element
.home, .logout {
  flex: 1;
}

//both .home and .logout will scale responsively

To have elements vertically responsive, we could add

html,body {
  height:100%;
}
//If we didn't set html,body to a height of 100%, below css rule will not have any effect.
.container {
  height: 100%;
}

When we define a container with

display: flex;

align-items property defaults to stretch. align-items control how the elements are layout in the cross-axis.

align-items: stretch || flex-start || flex-end || center

We can layout individual item along the cross-axis using

.container {
 align-self: flex-start;
}

We have flex-wrap property

flex-wrap: nowrap //default || wrap

Flex property – deep dive

flex is a shorthand property for flex-grow, flex-shrink and flex-basis

flex : 1 // defaults 1 1 0

Consider you have set only flex-basis, it is a means to set the base width of the element. It means that if the container has a minimum of width 400px, each home and logout will have 200px base width regardless of how much extra space container has.

.home {
  /*
  flex-grow: 1;
  flex-shrink: 1;
  */
  flex-basis: 200px;
  
}

.logout {
    /*
  flex-grow: 1;
  flex-shrink: 1;
  */
  flex-basis: 200px;
}

If we set flex-grow now, it decides how much extra space needs to be distributed among the container’s child elements.

.home {
  flex-basis: 200px;
  flex-grow: 0; // home element will remain at 200px
  
}

.logout {
  flex-basis: 200px;
  flex-grow: 1; 
}

If we set flex-shrink, it decides how much the element shrinks

.home {
  flex-basis: 200px;
  flex-grow: 0; // home element will remain at 200px
  flex-shrink:1;
  
}

.logout {
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink:0; // logout element will remain at 200px and won't shrink!
}

flex-grow and flex-shrink work in relation to one another within the container.

Flexbox order property

Flexbox has source order independence!

<div class="container">
   <div class="item1">1 Home</div>
   <div class="item2">2 Search</div>
   <div class="item3">3 Logout</div>
</div>

.item1 {
  order: 3;
}
.item2 {
 order: 0,

.item3 {
 order: -1
}

//In this case, item3 is layout first, then item2 and finally item1