Media Queries

• Layouts depending on properties

• media attribute

  <link rel='stylesheet' media='screen and (min-width: 701px)' href='css/mediumsize.css' />

• @media selector

Author Notes

Media queries allow you to use certain styles depending on certain device properties. There are two ways to control this. First, you can add a media property that will load depending on, for example, the size of the device.

You can also use a @media selector in your CSS to control an individual element or a group of elements.

---

Media Types/Features

• all, screen, print, speech
• features: width, height
orientation, resolution, etc.
• operators: and, not

Author Notes

You can control where these features apply. For example, you can control wether stylesheets apply only when printing or to screens.

There are a number of features that you can check for, but the most common are width or height, which are almost always expressed with minimum or maximum parameters.

body {
  background: red;
}

@media all and (min-width: 701px) {
  body {
    background: yellow;
  }
}

---

Flexbox

---

Introducing Flexbox

• One of many display properties
• One dimensional layouts
• Backwards compatible

Author Notes

Flexbox, of course, is one of the many display properties. There are so many available that it’s hard to go over all of them.

Flexbox is perfect for handling simpler, two dimensional layouts. There is anoteher property for more complex two dimensional layouts called grid, but it doesn’t have very good browser support, so we won’t be covering it in this class yet.

Flexbox has great compatibility with older browsers, although some older browsers require that you write flexbox in multiple ways, which is usually handled with processors that can take care of the conversion.

---

Container vs Items

• Control containers
• Customize items
• Direction agnostic

Author Notes

The main power that flexbox gives you is the ability of a container to modify the width and height of it’s items to fit the available space.

You can then customize the placement of individual items if you wnat to. However, most of the time, the main container will be the target that will take care of what you need.

Flexbox is direction agnostic. Whereas block is vertically based and inline horizontally based, flexbox can be rearranged to display elements horizontally or vertically as needed with just a few simple classes.

---

Container vs Items

• Control containers
• Customize items
• Direction agnostic

Author Notes

The main power that flexbox gives you is the ability of a container to modify the width and height of it’s items to fit the available space.

You can then customize the placement of individual items if you wnat to. However, most of the time, the main container will be the target that will take care of what you need.

Flexbox is direction agnostic. Whereas block is vertically based and inline horizontally based, flexbox can be rearranged to display elements horizontally or vertically as needed with just a few simple classes.

---

Controlling Direction

• flex-direction property

• Values: row
row-reverse
column
column-reverse

• Great with @media rules

Author Notes

You can easily control wether elements inside the container display as rows or columns with this property. The default is row. It works super well with media queries to allow you to do this conditionally.

---

Wrapping

• flex-wrap property
• Values: nowrap wrap wrap-reverse
• flex-flow: row nowrap; combo

Author Notes

Flexbox by default will try to fit the items in the container, even if the items get big. You can change this behavior by using the flex-wrap property. This will make items continue on a separate line once they fill up the horizontal space.

---

Justification

• justify-content property
• Values: flex-start flex-end center
space-between space-around space-evenly

Author Notes

Justify content lets you lets you control the horizontal alignment or justification of elements inside the container. It makes it incredibly simple to center or spread out elements inside a container.

---

Justify Content Vertically

• align-items property
• Values: flex-start flex-end center
baseline stretch

Author Notes

Although this property is called align elements, it’s easier if you think about it as vertical justification. A lot of the same properties as horizontal justification. This makes flexbox the easiest way to center something vertically.

---

Aligning Content Vertically

• align-content property
• flex-start flex-end center
space-between space-around stretch
• More than one line

Author Notes

Whenever you have more than one line worth of elements and a big vertical area to fill, this will help you position those elements vertically. This makes flexbox the easiest way to align multiple elements.

---

Flexbox: Individual Items

---

Order

• order property
• Numbers grouped together

Author Notes

You can order elements individually. The order is a number you can assign that allows you to group elements within that order. Think of it as layers. Any group you assign as group 5 will be grouped together.

---

Grow Proportionally

• flex-grow, flex-shrink, flex-basis
• Set up proportions

Author Notes

When you need to control how an element grows in relationship with other elements you can use these different properties.

---

Individual Vertical Position

• align-self property
• auto flex-start flex-end
center baseline stretch
• Assign to individual items.

Author Notes

Use these if you want to align something vertically separately from the rest of the group.