CSS Section 5

Flexbox

Flexbox is a modern layout model in CSS. It is a series of properties that allow you to easily align, arrange, and distribute space among items in a container. It is highly useful for responsive layouts.

To use Flexbox, you need to set the display property of a container to flex.

flex-direction: Defines the direction of the main axis. The default is row. Options include:

• row
• row-reverse
• column
• column-reverse

justify-content: Controls how items are distributed along the main axis. Default is flex-start.

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

flex-wrap: Controls whether the flex container allows wrapping of its items. Options:

• nowrap (default)
• wrap
• wrap-reverse

align-items: Aligns items along the cross axis (usually the vertical axis). Values include:

• flex-start
• flex-end
• center
• baseline – aligns items so their baselines match
• stretch (default)

align-content: Controls the space between rows (only works when flex-wrap is enabled).

align-self: Allows individual items to override the container's align-items setting.

flex-basis: Specifies the initial main size (width or height depending on the direction) of a flex item.

flex-grow: Defines how much a flex item should grow relative to the rest.

flex-shrink: Defines how much a flex item should shrink when space is limited. 0 means it won’t shrink.

flex: A shorthand for flex-grow, flex-shrink, and flex-basis. Example: flex: 1 1 auto; (Read MDN for more)

Responsive Design

Responsive design means that your website adapts and looks good on all devices (mobile, tablet, desktop, etc.).

Media Queries: Allow you to apply different CSS rules based on conditions like screen width or device orientation.

Example syntax:

@media (max-width: 768px) {
    h1 {
        font-size: 20px;
    }
}