CSS Flexbox Introduction
In this chapter you will learn the following flexbox properties:
- Flex containers
- display
- Flex Ordering & Orientation
- flex-direction
- flex-wrap
- flex-flow
- order
- Flex Alignment
- justify-content
- align-items
- align-self
- align-content
- Flex Flexibility
- flex-grow
- flex-shrink
- flex-basis
- flex
- flex values
Flex containers
display
A flex container establishes a new flex formatting context for its contents.
And this is the same as establishing a block formatting context, except that flex layout is used instead of block layout.
Syntax:
selector {
display: flex | inline-flex;
}- flex - The element generates a block-level flex container box.
- inline-flex - The element generates an inline-level flex container box.
1
2
3
4
5
Example
.container {
border: 2px dashed #0069FF;
display: flex;
padding: 10px;
}
.container > div {
background-color: #0069FF;
padding:16px;
margin: 1px;
text-align: center;
font-size: 32px;
}Notes:
- Vertical-align has no effect on a flex item.
- Float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.
- Floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.
- Flex containers form a containing block for their contents exactly like block containers do.
- The ::first-line and ::first-letter pseudo-elements do not apply to flex containers, and flex containers do not contribute a first formatted line or first letter to their ancestors.
- The overflow property applies to flex containers.
- Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout.
All CSS Flexbox Properties
| Property | Description |
|---|---|
| align-content | Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. |
| align-items | Sets the align-self value on all direct children as a group. |
| align-self | Specifies the default alignment for items within the flex container. |
| display | Specifies an element’s display type and can override an element’s defined presentation. |
| flex | Sets how a flex item will grow or shrink to fit the space available in its flex container. |
| flex-basis | Sets the initial main size of a flex item. |
| flex-direction | Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). |
| flex-flow | A shorthand property for the flex-direction and the flex-wrap properties. |
| flex-grow | Specifies the flex grow factor of a flex item's main size. |
| flex-shrink | Sets the flex shrink factor of a flex item. |
| flex-wrap | Sets whether flex items are forced onto one line or can wrap onto multiple lines. |
| justify-content | Specifies the alignment between the items inside a flexible container when the items do not use all available space. |