CSS Media Queries and Box Model Quiz

CSS Flexbox and Responsive Web Design

• This presentation covers CSS Flexbox layouts and responsive web design.
• The course is ISP465.

Outlines

• CSS Flexbox Layout
• Responsive Web Design

CSS Flexbox Layout

• Flexbox aims to provide an efficient way to lay out, align, and distribute space.
• Flexbox adjusts to different screen sizes dynamically.
• Flexbox is commonly used for one-dimensional layouts (rows or columns).
• The display property configures a flexbox container.

CSS Flexible Box Layout (Flexbox)

• The Flexbox layout (Flexible Box) aims at providing efficient space distribution among elements in a container, even if the element sizes are unknown.
• The main idea behind the flex layout is giving the container the ability to move items to optimally fill the container space.
• A flex container expands its items to fill available space or shrinks them to prevent overflow, useful for one dimension (row or column).

Flex Layout

• Based on flex-flow directions.
• Items are laid out either along the main axis or the cross axis.
• The main axis is the primary direction of element layout; it is not always horizontal. it depends on the flex direction property.
• main-start and main-end are the first and last points along the main axis, respectively.
• flex items' main size (width or height) is either width or height relevant to the main axis.
• Flex container's cross axis is perpendicular to the main axis.
• cross-start and cross-end are the first and last points along the cross axis.
• flex items' cross size (height or width) is either width or height relevant to the cross axis.

Flexbox Properties: Parent (Flex container)

• display: This property defines the flex container type (inline or block).
• flex-direction: This property defines the main axis direction (row, row-reverse, column, column-reverse).
• flex-wrap: This property determines if flex items wrap to the next line (nowrap, wrap, wrap-reverse).
• flex-flow: Shorthand property, combines flex-direction and flex-wrap.
• justify-content: This determines the way flex items are aligned along the primary axis.
• align-items: This determines the way flex items are aligned along the cross axis. The default value is stretch.

Flexbox Properties: Children (Flex items)

• order: This property determines the order in which items are placed.
• flex-grow: This value determines how much an item expands when space is available.
• Flex-shrink: This value determines how much an item shrinks to fit space.
• flex-basis: This defines the initial size of an element.
• flex: Shorthand property, combines flex-grow, flex-shrink, and flex-basis
• align-self: This property overrides the align-items property for a specific item.

Gap, row-gap, column-gap

• The gap property explicitly controls the space between flex items.
• The property applies space between items not to the outer edges.
• Gap property works for grid, multi-column, and flexbox layouts.

Responsive Web Design

• Responsive web design is an approach to design web pages so that they adapt to various screen sizes and devices.
• Techniques for responsive design include: Fluid layout, CSS media queries, and flexible images..
• CSS media queries are conditions that the browser checks, based on capabilities of the device.
• CSS Media Queries Anatomy
• Media type (<@media screen>).
• Media features describing size, resolution and support (viewport, color, interaction preferences and also for devices).
• Important operators: and, or, not.

CSS Media Queries Breakdown

• Queries target different screen sizes
• Queries allow you to change the style based on the screen size, resolution, and orientation.
• Ranges can be written specifying for phones, tablets, or laptops.

CSS Media Queries Anatomy

• Defines a style sheet for specific media types
• Matches devices with or without screens, print, speech, braille, etc.
• Features like viewport size, display quality, color support, interaction preferences and others.

CSS Media Queries Anatomy-Operator

• Used with different features of devices
• Using the operator 'and' shows the range of widths required
• Using 'or' shows a feature from a device where to use it

CSS Box Model

• HTML elements are rendered as boxes.
• Fundamental components of the box model are: Content, Padding, Border, and Margin.

CSS Position

• Different positioning methods are used to position elements: Static, Relative, Absolute, Fixed, Sticky.

Margin

• Defines space around the border of an element.
• The margin property can take four values, one for each side (top, right, bottom, and left).
• margin allows values to be negative, for example: margin: 20px 10px 5px 5px (top 20px, right 10px, bottom 5px, and left 5px)

Margin Shorthand

• Allows writing margin in one line.
• 1 value - top, right, bottom, left are all equal to the given value.
• 2 values - first value (top and bottom) , second value (left and right).
• 3 Values - First value (top), second value (right and left) , third value bottom).
• 4 Values - top, right, bottom, left.

Padding

• Specifies the space or padding inside the border of an element.
• It accepts length values, percentage values (relative to the parent element).
• Padding allows values to be negative, for example: padding: 20px 10px 5px 5px (top 20px, right 10px, bottom 5px, and left 5px)

Padding Shorthand

• padding can be written in one line.
• 1 value - The padding is equal on all four sides.
• 2 values - First value (top and bottom), second value (left and right).
• 3 values - First value (top), second value (right and left), and third value bottom.
• 4 values - top, right, bottom, left.

Box-Sizing

• Specifies how width and height are calculated including padding and border (default is content-box).
• border-box is commonly used to ensure that the total element size matches the size values given.

Border

• The border property controls the style, width, and color of an element's border.
• border property values can include width, style, and color.
• The border-xxx property controls different sides of the border (top, right, bottom, and left).

CSS Grid

• The CSS Grid Layout Module offers a grid-based layout system with rows and columns, making it significantly easier to design web pages without resorting to floats and positioning.

CSS Grid Container

• To implement grid, we need at least two elements: a parent element called a grid container, and at least one child element called a grid item.
• Adding display: grid makes the .container element a grid container; it creates a two-dimensional grid layout.

CSS Grid Item

• Defines the background color, border, and padding of each grid item.

CSS Grid: Grid-Template-Columns

• Used to specify the number and size of columns in a grid container.
• Values can be in percentages(%), pixels(px), or rems(rem).