Responsive_CSS_and_Flexbox

Introduction to CSS Flexbox

The Basic

What is it?

Flexbox is one-dimensional layout method for laying out items in rows or columns.

It’s New(ish)

Flexbox is a recent addition to CSS, included to address common layout frustations.

Why ‘Flex’?

Flexbox allows us to distirbute space dynamically accross elements of an unknown size, hence the term “flex”

Flex direction

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Justify-content

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Flex Wrap

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

• main Axis: left-right
• cross Axis: `top-down

Align Item

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Flex-Basis, Grow and Shrink

Flex-Basis

Defines the initial size of an element before additional space is distributed.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Flex-Grow

Controls the amount of available space an element should take up. Accepts a unit-less number value.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

Flex-Shrink

If items are large than the container. They shrink according to flex-shrink.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

Flex Shorthands

/* Three values: flex-grow flex-shrink flex-basis */
flex: 2 2 10%

Responsive Design and Media_Queries_Intro

https://www.ibest.tw/page01.php

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.

Enter Responsive

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

Media Queries

Media queries allow us to modify our styles depending on particular parameters like screen width or device type.

Example

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

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

The Power of Media Queries

Breakpoint to find the most frequently used px size

https://www.browserstack.com/guide/what-are-css-and-media-query-breakpoints