Code_Regina

Posted on Nov 30, 2020

|CSS| CSS: Responsive CSS and Flexbox

#javascript #html #css #webdev

          -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.

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

 .main {
  width: 80%; 
}
}

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

DEV Community