🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

📖 INDEX

# Align-content
# Align-items
# Align-self
# Animation-delay
# Animation-duration
# Animation-timing-function
# Animation
# Background-color
# Background-image
# Background-position
# Background-repeat
# Background-size
# Basic-Selectors
# Borders
# Box-sizing
# Child-Selectors
# Class-Selectors
# Clear
# Clip-path
# Color
# Content
# CSS-Attribute-Selectors
# CSS-Comments
# CSS-Rules
# CSS-Syntax
# Cursor
# Descendant-Selectors
# Display-flex
# Display-grid
# Filter
# Flex-basis
# Flex-direction
# Flex-grow
# Flex-shrink
# Flex-wrap
# Float
# Font-family
# Font-size
# Font-style
# Font-weight
# Grid-column
# Grid-gap
# Grid-row
# Grid-template-areas
# Grid-template-columns
# Grid-template-rows
# ID-Selectors
# Include-Css-in-Html
# index
# Justify-content
# Justify-items
# Keyframes
# Letter-spacing
# Line-height
# Margin
# Media-queries
# Object-fit
# Opacity
# Order
# Orientation
# Overflow
# Padding
# Pointer-events
# Position
# Properties
# RefDeviceCharacteristics
# RefDimensions
# RefScreenDimensions
# Resize
# Resolution
# Selectors
# Siblings-Selectors
# Text-align
# Text-shadow
# Text-transform
# Top, Right, Bottom, Left
# Transition-delay
# Transition-duration
# Transition-timing-function
# Transition
# Universal-Selectors
# User-select
# Values
# Visibility
# Word-spacing
# Z-index
# Including-Css-in-Html
LOADING ENGINE...

CSS display: flex

Modern layouts made easy. Learn how to control direction, alignment, and distribution of elements.

style.css
/* Flex Container */
.container {
display: flex;
justify-content: center;
}
/* Flex Item */
.item {
margin: 5px;
}
📐
style.css
1 / 8
📦

Tutor:Welcome to Flexbox. Initially, block elements stack vertically. To start using Flexbox, we need to define a container.


Flexbox Mastery

Unlock nodes by learning containers, axes, and alignment.

Concept 1: The Container

The foundation of Flexbox is the container. By setting display: flex on a parent element, you transform all direct children into flex items.

System Check

Which CSS property activates the Flexbox layout?

Community Holo-Net

Share Layouts

Created a complex grid with Flexbox? Share your code snippets.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Flexbox Guide

Author

Pascual Vila

Frontend Instructor.

The display: flex property enables a flexible context for all its direct children. It is a one-dimensional layout method for laying out items in rows or columns.

The Container

To start using Flexbox, you must select a parent element and apply display: flex. This establishes a new flex formatting context.

The Axes

Flexbox deals with two axes: the Main Axis and the Cross Axis.

  • Main Axis: Defined by flex-direction. By default, it is horizontal (row). Aligned via justify-content.
  • Cross Axis: Perpendicular to the main axis. By default, it is vertical. Aligned via align-items.

Alignment

Using justify-content: center will center items along the main axis, while align-items: center will center them along the cross axis.

Flexbox Glossary

display: flex
Activates the flexbox layout on a container and makes its children flex items.
justify-content
Aligns flex items along the main axis (e.g., center, space-between, flex-start).
align-items
Aligns flex items along the cross axis (e.g., center, stretch, flex-end).
flex-direction
Defines the direction of the main axis (row, row-reverse, column, column-reverse).