Layouts and Media Queries

Level : Advanced
Mentor: Shailendra Chauhan
Duration : 00:02:50

CSS Flexbox:

CSS Flexbox is a layout model that allows you to create flexible and responsive designs by distributing and aligning items within a container. It simplifies the process of arranging elements in rows or columns, adjusting their size based on the container's dimensions.

Example:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

The display: flex property:

This CSS property is applied to the container to establish a flex context. It turns the container's direct children into flexible items, enabling them to be arranged using flexbox properties.

Example:

.container {
  display: flex;
}

justify-content Property:

This property is used to define how flex items are distributed along the main axis (horizontal axis by default) of the flex container.

Example:

.container {
  justify-content: center;
}

flex Property:

The 'flex' property is a shorthand for setting 'flex-grow', 'flex-shrink', and 'flex-basis' properties at once. It determines how a flex item should grow or shrink to fit the available space.

Example:

.item {
  flex: 1 0 100px;
}

flex-direction Property:

This property defines the main axis direction of the flex container, controlling whether the items are arranged in rows or columns.

Example:

.container {
  flex-direction: column;
}

align-content Property:

The 'align-content' property is used to align flex lines within the flex container when there is extra space available along the cross-axis (opposite to the main axis).

Example:

.container {
  align-content: space-between;
}

flex-grow Property:

This property determines how much a flex item should grow relative to other flex items when there is extra space along the main axis.

Example:

.item {
  flex-grow: 1;
}

flex-shrink Property:

The 'flex-shrink' property defines how much a flex item should shrink relative to other flex items when there is not enough space along the main axis.

Example:

.item {
  flex-shrink: 0;
}

CSS flex-basis Property:

The 'flex-basis' property sets the initial size of a flex item along the main axis before the remaining free space is distributed.

Example:

.item {
  flex-basis: 200px;
}

The CSS flex-flow Property:

The 'flex-flow' property is a shorthand for setting 'flex-direction' and 'flex-wrap' properties at once, defining the main axis direction and whether flex items should wrap or not.

Example:

.container {
  flex-flow: row wrap;
}

CSS display:

inline-flex Property: Similar to 'display: flex', this property establishes a flex context, but the container is rendered as an inline-level element.

Example:

.container {
  display: inline-flex;
}

Flexbox Properties align-items:

The 'align-items' property aligns flex items along the cross-axis (perpendicular to the main axis) of the flex container.

Example:

.container {
  align-items: center;
}

CSS flex-wrap Property:

The 'flex-wrap' property determines whether flex items should wrap or not when they cannot fit within the flex container along the main axis.

Example:

.container {
  flex-wrap: wrap;
}

Media Type in Media Queries:

Media types in CSS media queries are used to specify the type of device or media the styles apply to, enabling styles tailored for different contexts.

Example:

/* Styles applied for printing */
@media print {
  body {
    font-family: 'Arial', sans-serif;
  }
}

AND Operator Media Queries:

The AND operator in CSS media queries is used to combine multiple conditions, ensuring that all conditions must be true for the styles to apply.

Example:

/* Styles applied when the screen width is less than 768px and the orientation is portrait */
@media screen and (max-width: 768px) and (orientation: portrait) {
  /* CSS styles here */
}

CSS Media Query:

CSS media queries are used to apply different styles based on the characteristics of the device or browser viewing the web page, making responsive design possible.

Example:

/* Styles applied for screens with a width of 992 pixels or more */
@media (min-width: 992px) {
  /* CSS styles here */
}

CSS Media Features in Media Queries:

CSS media features are used in media queries to specify particular characteristics of the device or browser, allowing precise targeting of specific conditions.

Example:

/* Styles applied for devices with a resolution of 300 dots per inch or more */
@media (min-resolution: 300dpi) {
  /* CSS styles here */
}

Ranges in Media Queries:

Media queries can include range expressions using "min-" and "max-" prefixes to target devices within a specific range of values.

Example:

/* Styles applied for screens with a width between 768px and 1024px (inclusive) */
@media (min-width: 768px) and (max-width: 1024px) {
  /* CSS styles here */
}
Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this