Layouts and Media Queries
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 */
}
Still have some questions? Let's discuss.
CONTACT US