CSS Flexbox is a powerful layout tool that helps you create responsive web designs. Flexbox arranges items in rows or columns, distributing space dynamically based on your settings.
Key Concepts of Flexbox
Before diving into commands, here are the basic terms you should know:
- Flex Container: The parent element that uses the
display: flexproperty. - Flex Items: The child elements inside the flex container.
Basic Flexbox Commands
1. Setting the Flex Container
display: flex;
2. Flex Direction
Defines the direction of the main axis.
flex-direction: row; /* Default - Items are placed in a row */
flex-direction: row-reverse; /* Items are placed in reverse row */
flex-direction: column; /* Items are stacked in a column */
flex-direction: column-reverse; /* Items are stacked in reverse column */
3. Justify Content
Aligns items along the main axis.
justify-content: flex-start; /* Default - Items align to the start */
justify-content: flex-end; /* Items align to the end */
justify-content: center; /* Items are centered */
justify-content: space-between; /* Items are evenly spaced, with space in between */
justify-content: space-around; /* Items have equal space around them */
justify-content: space-evenly; /* Items have equal space distributed evenly */
4. Align Items
Aligns items along the cross-axis.
align-items: stretch; /* Default - Items stretch to fill container */
align-items: flex-start; /* Items align to the start of the cross-axis */
align-items: flex-end; /* Items align to the end of the cross-axis */
align-items: center; /* Items are centered on the cross-axis */
align-items: baseline; /* Items align along their baseline */
5. Align Content
Aligns multi-line flex containers along the cross-axis.
align-content: stretch; /* Default - Lines stretch to fill container */
align-content: flex-start; /* Lines align to the start of the container */
align-content: flex-end; /* Lines align to the end of the container */
align-content: center; /* Lines are centered */
align-content: space-between; /* Lines have space in between */
align-content: space-around; /* Lines have equal space around them */
align-content: space-evenly; /* Lines have equal space distributed evenly */
Flexbox Properties for Flex Items
1. Order
Controls the order of flex items.
order: 0; /* Default value */
2. Flex Grow
Defines how much the item should grow relative to others.
flex-grow: 1; /* Item grows to fill available space */
flex-grow: 0; /* Default - Item doesn't grow */
3. Flex Shrink
Defines how much the item should shrink relative to others.
flex-shrink: 1; /* Default - Item can shrink */
flex-shrink: 0; /* Item doesn't shrink */
4. Flex Basis
Sets the base size of an item.
flex-basis: auto; /* Default - Size is based on content */
flex-basis: 50%; /* Item takes up 50% of the container */
flex-basis: 200px; /* Item takes up 200px of space */
5. Flex (Shorthand for Flex Grow, Flex Shrink, and Flex Basis)
flex: 1 1 auto; /* Default values */
flex: 2 1 200px; /* Grow: 2, Shrink: 1, Basis: 200px */
6. Align Self
Overrides align-items for individual items.
align-self: auto; /* Default - Follows align-items */
align-self: flex-start; /* Aligns to the start */
align-self: flex-end; /* Aligns to the end */
align-self: center; /* Centers the item */
align-self: baseline; /* Aligns to the baseline */
align-self: stretch; /* Stretches to fill the container */
Advanced Flexbox Features
1. Wrap Flex Items
Allows items to wrap onto multiple lines.
flex-wrap: nowrap; /* Default - No wrapping */
flex-wrap: wrap; /* Wrap items to next line */
flex-wrap: wrap-reverse; /* Wrap items in reverse order */
2. Shorthand for Direction and Wrap
flex-flow: row nowrap; /* Default values */
flex-flow: column wrap; /* Column direction with wrapping */
Complete Example
Here’s how you can combine these properties for a real-world layout:
Flexbox is an essential tool for modern web design. It simplifies layouts and ensures your website is responsive across devices. Start experimenting with the commands above and build amazing layouts effortlessly!