• Floats
• Flow Overflow Fix
• Flex Direction
• Flex Align Items
• Media Queries

Floats

Looking at styling elements using floats, which was the original way of doing it. Each element was floated to the left and at the end using a clear fix to solve the issue of elements siting outside their parent element.

Floating an element to the right

Floating to the left

div {
 float: left;
}

Floating the div element to the left and clearing both the right and the left.

div {
 float: left;
 clear: both;
}

Fixing the issue put using the code overflow auto

Float Overflow Fix

sometimes there are a few issues where an element will sit out it’s parent element.

div{
 float: left;
}

box{
 overflow: auto;
}

Flex Direction

Flex is a more useful technology then floats. Can make it easy for rearranging cards from column to row. Building apps for android and web apps.

Doing the layout with flex with column, which is how mobile drop down menus can be built.

.flex-container {
 display: flex;
 flex-direction: column;
}

.flex-container {
 display: flex;
 flex-direction: row
}

Animation showing how flex is used in a website switching between the mobile menu and the desktop menu.

Flex Align Items

When converting a Figma design to a component, getting the right alignment towards the centre for elements. A logo is a case where it could be used to align it correctly.

Media Queries

Media Queries useful in getting site for different screen sizes. Switching between a mobile menu and desktop menu is a useful case. At large width the

@media screen and (min-width: 480px) { 
body {    
    background-color: lightred;  
   }
}

@media screen and (min-width: 768px) { 
body {  
   background-color: lightblue;
  }
}
                                   

@media screen and (min-width: 1200px) {  
 body {   
   background-color: lightgreen;
      }
}