|CSS| CSS: Responsive CSS and Flexbox
Tags: javascript, html, css, webdev
Published: 2020-11-30 18:14:59

---
title: |CSS| CSS: Responsive CSS and Flexbox
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---


              -What is Flexbox
              -Flex-Direction
              -Justify-Content
              -Flex-Wrap
              -Align-Items
              -Align-Content and Align-Self
              -Flex-Basis, Grow and Shrink
              -Responsive Design and Media Queries Intro
   
      
             
            
            
         
###What is Flexbox
Flexbox is a one-dimensional layout method for laying out items in rows and columns. 
Flexbox is a recent addition to CSS. Included to address common layout frustrations. 
Flexbox allows us to distribute space dynamically across elements of an unknown size. 

###Flex-Direction
Flex-box contains a bunch of properties. 
Display-Property 
Display: flex; makes items line up in a row from left to right, which is the default structure. This is the point where flex is turned on. 

Main Axis 
Cross Axis 

flex-direction: row; Allows us to decide on the main axis direction in the container. The default is flex-direction row.

flex-direction: row-reverse; Reverses the left to right direction on the main axis to right to left. 
 
Still a row, just in the opposite direction. 

Column changes the horizontal direction. 

flex-direction: column; Column is top to bottom by default 
flex-direction: column-reverse; Reverse column changes to bottom to top. 


###Justify-Content
Determines how the actual content is distributed across the main axis. 

justify-content: flex-start; Start is the default. 
If the main axis goes from left to right, then start will be on the left. If the main axis goes from right to left then start will be on the right. 

justify-content: flex-end; End will take the content and move it to the end of the main axis. 

justify-content: center; Center will put the content in the center along the main axis. 





###Flex-Wrap

flex-wrap: wrap; 
The property flex-wrap determines whether the elements will wrap along the main axis. If the main axis is horizontal or a new column or if it is a vertical main axis. 

###Align-Items
align-items: flex-start; 
The property align-items distributes space along the cross axis. 



###Align-Content and Align-Self
When we have multiple rows or columns, it is possible to control the space between them. 

 if we're in a row or column based. 
align-content: space-between; 




###Flex-Basis, Grow and Shrink

####Flex-Basis 
defines the initial size of an element before additional space is distributed. 

####Flex-Grow 
controls the amount of available space an element should take up. Accepts a unit-less number value. 

####Flex-Shrink 
If items are larger than the container, they will shrink according to flex-shrink. 



###Responsive Design and Media Queries Intro

####The Problem 
As mobile devices and tablets become widely available, developers had a problem. How do we create websites that look good on all screen sizes?

####One Approach 
Early on, it was common to create separate stylesheet for different devices or even completely different websites for each size. 

####Enter Responsive 
These days, we typically create 1 website and stylesheet that is able to respond to different device sizes and features. 

####Media Queries 
Media Queries allow for websites to scale up or down in size regarding the specific device that will be displaying the web page. 



```css
@media (max-width: 800px) {
 .sidebar {
   display: none; 
}

 .main {
  width: 80%; 
}
}

@media (min-width: 30em) and (orientation: landscape) {
 #container {
   flex-direction: column; 
   justify-content: center; 
}
}




```