[TIL] 20201123 Responsive CSS & Flexbox

Flexbox

• A one-dimensional layout method for laying out items in rows or columns.
• Recent addition to CSS, included to address common layout frustrations.
• Flebox allows us to distribute space dynamically across elements of an unknown size, hence the term "flex".

To Start Using Flexbox

• Include 'display: flex'.

The Flex Model

default: 

 

 

 

 

 

 

 

 

 

 

flex-direction

• Values
  • row(default, left to right)
  • row-reverse(right to left)
  • column(top to bottom)
  • column-reverse(bottom to top)
• Changes the direction of main axis.

 

 

justify-content

• Determines how content is distributed across the main axis.
• Values
  • flex-start : default
  • flex-end : Take the content and move it to the end of the main axis.
  • center : Center the contents along the main axis.
  • space-between : Take all of the extra space and evenly distribute it between the elements, but not on the outside edges.
  • space-around : Take all the extra space and gives each element the same amount of space around it.
  • space-evenly : Distribute extra space evenly between and around the element. 

 

 

 

flex-wrap

• It determines whether our elements are going to wrap along the main axis onto a new line if it's horizontal, or a new column if it's a vertical main axis.
• When the elements are too big for the container, they shrink down to fit in. Using flex-wrap, elements are moved to the next line and display their full length.
• Value
  • wrap : cross axis goes top to bottom or left to right.
  • wrap-reverse : cross axis goes bottom to top or right to left.
  • nowrap : default

 

 

align-items

• Distribute space and items along the cross axis.
• Values
  • flex-start : align items at the starting point of the cross axis.
  • flex-end : align items at the ending point of the cross axis.
  • center : align items at the center of the cross axis.
    • To move items at the center of the containter,
      1. justify-content: center;
      2. align-items: center;
  • baseline : aline items using the baseline of the text. (bottom of the letters)

 

 

align-content 

• Used to control or distribute space along the cross axis, only when there are multiple rows or columns.
• Values : same as justify-content

 

 

align-self

• Similar to align-items, but for the individual item.

 

 

flex-basis

• Defines the initial size of an element before additional space is distributed.
• It could be width or height, according to how the main axis is determined.

 

 

flex-grow

• Controls the amount of available space an element should take up. Accepts a unit-less number value.
• Number values are proportions. The larger the number is compared to other number values, the larger proportion the item takes up. (relavite to other elements)
• Governs the rate that elements grow when there's available space.

 

 

flex-shrink

• If items are larger than the container, they shrink according to flex-shrink.
• Governs the rate that elements shrink when there's not enough space in the container.
• If the number value is set to 0, the element doesn't shrink at all.

 

 

flex (shorthand)

• Shorthand property for flex-grow, flex-shrink, and flex-basis.
• Values
  • With 3 values : {flex-grow} {flex-shrink} {flex-basis}
  • With 1 unit-less value : {flex-grow}
  • With 1 unit value : {flex-basis}

 

 

Responsive Design

The Problem

As mobile devices and tablets became 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 stylesheets for different devices, or even completely different websites for each size.

Responsive

These days, we typically create ONE website and stylesheet that is able to respond to different device sizes and features.

 

 

 

Media Queries

• Allows us to modify our styles depending on particular parameters like screen width or device type.
• Syntax

@media ( feature ) {
    /* CSS */
}


/* to combine media queries */

@media ( feature ) and ( feature ) {
    /* CSS */
}

• Viewport
  • Represents a polygonal area in computer graphics that is currently being viewed.
  • In web browser terms, it refers to the part of the document you're viewing which is currently visible in its window.
• Media Query features
  • min-width : when width is x and bigger
  • max-width : when width is x and smaller

 

 

 

 

* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.