CSS Flexbox overview
Flexbox is a one-dimensional layout method for arranging items in rows or columns. It helps to distribute the space within the container efficiently. Flexbox simplifies the design process by providing better alignment, spacing, and ordering of elements compared to older layout models such as float.
Traditional layouts before Flexbox include:
Block layout – used to section large areas of content.
Inline layout – used for text and small elements
Table layout – suited for two-dimensional layouts
Positioned layout – allows the explicit placement of elements using coordinates and positioning methods.
Flex Container
A flexbox layout is created by defining a flex container, which holds flex items. Flex items can be manipulated using the flexbox properties. To define a flex container, set the containers display property to flex
.flex-container{
Display: flex;
}
Properties of flex containers
Flex-direction- determines the direction in which flex items are placed in the flex container.
- Row: items are placed horizontally
- Row-reverse: items are places horizontally but reversed
- Column: items are placed vertically
- Column-reverse: items are placed vertically but reversed
Flex-wrap controls wether flex items should wrap onto multiple lines if necessary
- Nonwrap: all items will be on a single line
- Wrap: items wrap onto multiple lines form top to bottom
- Wrap-reverse: items wrap onto multiple lines in the opposite direction
Flex-flow is a shorthand for both flex-direction and flex-wrap. The first value defines the direction, and the second defines wrapping behavior.
Justify content: defines how flex items are aligned along the main axis
- Flex-start: align items to the start of the container
- Flex-end: align items to the end of the container
- Center: center items
- Space-between: evenly distribute items with space between them
- Space-around: distributes items with space before, between, and after.
Align-items aligns flwex items along the cross-axis
- Stretch: stretches to fill the container
- Flex-start: aligns items to the start of the cross-axis
- Flex-end: aligns items to the end of the cross-axis
- Center: centers items along the cross-axis
- Baseline: aligns items along their baseline
Align-contenet aligns rows of flex items when there is extra space along the cross-axis
- Flex-start: rows are packed at the start
- Flex-end: rows are packed at the end
- Center: rows are packed in the center
- Space-between: rows are evenly distributed with space between them
- Space- around: rows are evenly distributed with space before, between and after them
- Stretch: rows stretch to fill the container