CS-318

Lab 07 Display Flex & Media Queries

Goal

learn CSS flexbox layout
learn what media queries are and how they create responsive web pages
learn what a scaleable vector graphic is and why it is important with web design

Learn

CSS Flexbox

Flexbox is a dynamic alternative to display inline-block, that allows flex-elements within a flex-container to be arranged in either rows or columns based on flex properties.

Display flex diagram

Flex-Container Properties

.flex-container{
    display:flex;
}

display:flex;

This defines a flex container. It enables a flex context for all its direct children(flex-items).

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

flex-direction

This defines the main-axis of the flex container in which the flex-items will arrange themselves.

Values for flex-direction:

row - flex-items will arrange from left to right
row-reverse - flex-items will arrange from right to left
column - flex-items will arrange from top to bottom
column-reverse - flex-items will arrange from bottom to top

Flex direction diagram

.flex-container{
    display:flex;
    flex-wrap:wrap;
}

flex-wrap

This defines whether the flex-items will be contained on one line or be allowed to wrap on to new lines.

Values for flex-wrap:

no-wrap - all flex items will be on one line
wrap - flex items will wrap onto multiple lines, from top to bottom
wrap-reverse - flex items will wrap onto multiple lines from bottom to top

Flex-wrap diagram

.flex-container{
    display:flex;
    flex-flow:column wrap;
}

flex-flow

This is a shorthand property for both flex-direction and flex-wrap.

.flex-container{
    display:flex;
    justify-content:center;
}

justify-content

This defines the alignment of the flex-items along the main axis.

Values for justify-content:

flex-start - flex-items begin at the beginning of the flex-container
flex-end - flex-items begin at the end of the flex-container
center - flex-items will center themselves in the middle of the main axis
space-evenly- flex-items will space themselves out across the main axis with equal space in between each item and the edge of the container.
space-around - flex-items will space themselves out across the main axis with equal space around each item.
space-between - the first flex-item will be positioned at the start of the flex-container, the last flex-item will be at the end of the flex-container, and the rest of the items will space out with equal space in between.

Justify-content

.flex-container{
    display:flex;
    align-items:flex-start;
}

align-items

This defines how flex-items are aligned on the cross axis of the flex-container on the current line.

Values for align-items:

flex-start - the flex-items will begin at the beginning of the flex-container on the cross axis
flex-end - the flex-items will begin at the end of the flex-container on the cross axis
center - the flex-items will align in the middle of the flex-container on the cross axis
stretch - the flex-items will stretch to fill the flex-container on the cross axis
baseline - - the flex-items will align with each other based on the baseline of their text content

Align-items

align-content

This defines how flex-items are aligned on the cross axis of the flex-container when there is extra space.
*Note this property will only work if flex-wrap:wrap; or flex-wrap:wrap-reverse; is used.

Values for align-content:

flex-start - the flex-items will begin at the beginning of the flex-container on the cross axis
flex-end - the flex-items will begin at the end of the flex-container on the cross axis
center - the flex-items will align in the middle of the flex-container on the cross axis
stretch - the flex-items will stretch to fill the flex-container on the cross axis
space-between - the first flex-item will be positioned at the start of the flex-container, the last flex-item will be at the end of the flex-container, and the rest of the items will space out with equal space in between on the cross axis.
space-around - flex-items will space themselves out across the cross axis with equal space around each item.

Flex align-content diagram

Media Queries

Media queries are used to apply conditional CSS styles. We will be using them to specify what happens when the devices screen size exceeds certain sizes.

main{
   width:50%;
}
h1{
   margin:2rem;
}
@media (min-width: 1200px){
    main{
       width: 70%;
    }
    h1{
       margin:1rem;
    }
}

In the example:

The main has a width of 50% and the h1 has a margin of 2 rem. Except when the screen size is bigger that 1200 pixels, then the main has a width of 70% and h1 has a margin of 1 rem.

Notice how the main and h1 are inside the @media ruleset. When a ruleset is inside the media query ruleset then it is conditionally applied when the condition is met.

Mobile First

For the rest of the semester we will be practicing mobile first CSS. This means when you are writing your CSS it will be for narrow screens. Then you will use a media query to adjust elements for wider screens.

SVG

Scalable Vector Graphics is an XML-based markup language for describing two dimensional based vector graphics. SVG is essentially to graphics what HTML is to text.

What makes SVG powerful in terms of web design is the fact the image is made of vectors instead of pixels, therefore it can be scaled to any size with out losing quality. Also because SVG are lines of code, they are tiny files that require little load time. SVGs are ideal for logos and icons on websites.

Vector graphics are made of points connected by lines to form polygons and other shapes. Adobe Illustrator is a graphic software designed for creating vector graphics.

Example of SVG code: