[Nomadecoder] CSS Layout MasterClass #1.1

---

Nomade Coder CSS layout master Class 1.1 

 

Lecture Note for 1.4- 1.7 

 

 

1.4 align-self and order 

 

So far we only talk to "father" which is flexbox container but

 

there are two ways to talk to the "child"

 

1. align-self 

2. order 

 

using .child:nth-child(child number)

 

.father {
  display: flex;

  justify-content: space-around;

  height: 100vh;
}

.child {
  height: 200px;
  width: 200px;
  background: rgb(159, 199, 233);
  color: black;
}

.child:nth-child(2) {
  order: 3;
}

.child:nth-child(1) {
  order: 2;
  /*align-self: center*/
}
/* father  tell children  but align-self do the same thing as align-item but onlt for the certain children*/

 

 

1. using align-self : center (middle) align-self: flex-end: bottom   2. using order : 0 is the normal order 

 

 

1.5 wrap, nowrap, reverse , align-content 

 

 

wrap :  no-wrap(default) squeeze all the child in one line 

             wrap: respect the child's width 

             wrap-reverse : back order of wrap 

 

 

reverse: we can use it in the flex-direction : column-reverse / row-reverse

 

algin-content :   space between two line  we can change via    flex-end/center/...etc
                        just think like the after (whole container) and you chaing the items position

 

.father {
  display: flex;
  justify-content: space-around;
  height: 100vh;
  align-content: space-around;

  /*

  1.

  flex-direction: column-reverse/ row-reverse

  /* flex-wrap: wrap;  
  nowrap is default and whaterver happen it keep the all the kids in oneline
     wrap : respect the origial size;
     wrap-reverse: reverse order of wrap



  2. algin-content :  center /space-betwwen /space-around /flex-end
     the space between first row and second row 
  */
}

.child {
  height: 200px;
  width: 200px;
  background: rgb(159, 199, 233);
  color: black;
  font-size: 50px;
  display:flex;
  align-items: center;
  justify-content: center;
}

/* even if setted width this all 6boxs are going to squeezed in oneline *

1.6 flex-grow, flex-shrink

 

 

use flex-grow / flex-shrink for the child 

using flex-grow : 0(default) 2 3 takes more space 

         flex-shrink: 1(default) 2 3 shrink more 

 

 

1.  box 2 is flex-shrink 2   2. box 2 is flex-frow 2

.father {
  display: flex;
  justify-content: space-around;
  align-content: center;
  height: 100vh;
}
.child:nth-child(2) {
  background-color: black;
  color: white;

  flex-grow: 1;
  /*flex-grow :0(default)  if it is 1 then take the space as much as it can 
  flex-shrink: 1(default); shirk *2 than regular */
}

.child {
  height: 200px;
  width: 200px;
  background: rgb(159, 199, 233);
  color: black;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

 

1.7  flex -basis 

 

apply to child : initial size    it will change when there is flex-shrink /flex grow !!

This will change!! This will change depend on the flex-direction !!! 

1. flex-axis : 300px   when flex-direction : row ;   2. flex-axis :300px when the flex-direction : column;

               

.father {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  height: 100vh;
}
.child:nth-child(2) {
  background-color: black;
  color: white;
}

.child {
  flex-basis: 300px;
  height: 200px;

  background: rgb(159, 199, 233);
  color: black;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

---