YouTipflex item 1
flex item 2
flex item 3
Css3 Flexbox
# CSS3 Flexbox
## CSS3 Flexbox
Flexbox is a new layout mode in CSS3.
CSS3 Flexbox (Flexible Box or flexbox) is a layout method that ensures elements behave appropriately when a page needs to adapt to different screen sizes and device types.
The purpose of introducing the flexbox layout model is to provide a more efficient way to arrange, align, and distribute space among items in a container.
---
## Browser Support
The numbers in the table indicate the first browser version that supports the property.
The `-webkit-` or `-moz-` immediately following the number is the prefix for the specified browser.
| Property | | | | | |
| --- | --- | --- | --- | --- | --- |
| Basic support (single-line flexbox) | 29.0 21.0-webkit- | 11.0 | 22.0 18.0-moz- | 6.1-webkit- | 12.1-webkit- |
| Multi-line flexbox | 29.0 21.0-webkit- | 11.0 | 28.0 | 6.1-webkit- | 17.0 15.0-webkit- 12.1 |
---
Flexbox consists of a flex container and flex items.
The flex container is defined by setting the `display` property value to `flex` or `inline-flex`.
The flex container contains one or more flex items.
**Note:** Outside the flex container and inside the flex items, rendering is normal. Flexbox only defines how flex items are laid out within the flex container.
Flex items are typically displayed in a single line within the flexbox. By default, each container has only one line.
The following example shows flex items displayed in a single line, from left to right:
### Example
.flex-container{display: -webkit-flex; display:flex; width:400 px; height:250 px; background-color:lightgrey; }.flex-item{background-color:cornflowerblue; width:100 px; height:100 px; margin:10 px; }
[Try it »](#)
Of course, we can change the arrangement.
If we set the `direction` property to `rtl` (right-to-left), the arrangement of flex items will also change, and the page layout will change accordingly:
### Example
body{direction:rtl; }.flex-container{display: -webkit-flex; display:flex; width:400 px; height:250 px; background-color:lightgrey; }.flex-item{background-color:cornflowerblue; width:100 px; height:100 px; margin:10 px; }
[Try it »](#)
---
## flex-direction
The `flex-direction` property specifies the direction of the flex items within the parent container.
### Syntax
flex-direction: row | row-reverse | column | column-reverse
The values of `flex-direction` are:
* row: Horizontal arrangement from left to right (left-aligned), the default arrangement.
* row-reverse: Reverse horizontal arrangement (right-aligned, arranged from back to front, with the last item placed first).
* column: Vertical arrangement.
* column-reverse: Reverse vertical arrangement, arranged from back to front, with the last item placed at the top.
The following example demonstrates the use of `row-reverse`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-flex-direction:row-reverse; flex-direction:row-reverse; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `column`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-flex-direction:column; flex-direction:column; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `column-reverse`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
---
## justify-content Property
The justify-content property is applied to the flex container to align flex items along the main axis of the flex container.
The syntax for justify-content is as follows:
justify-content: flex-start | flex-end | center | space-between | space-around
Analysis of each value:
* **flex-start:**
Flex items are packed toward the start of the line. This is the default value. The main-start outer margin edge of the first flex item is placed on the main-start line of the container, and subsequent flex items are placed flush against each other.
* **flex-end:**
Flex items are packed toward the end of the line. The main-end outer margin edge of the first flex item is placed on the main-end line of the container, and subsequent flex items are placed flush against each other.
* **center:**
Flex items are packed toward the center of the line. (If the remaining free space is negative, the flex items will overflow in both directions equally).
* **space-between:**
Flex items are evenly distributed along the line. If the remaining space is negative or there is only one flex item, this value is equivalent to flex-start. Otherwise, the outer margin of the first flex item is aligned with the main-start line of the container, the outer margin of the last flex item is aligned with the main-end line, and the remaining flex items are distributed along the line with equal spacing between adjacent items.
* **space-around:**
Flex items are evenly distributed along the line, with half-size spaces on both ends. If the remaining space is negative or there is only one flex item, this value is equivalent to center. Otherwise, the flex items are distributed along the line with equal spacing between them (e.g., 20px), and the space between the first/last item and the container is half of that (1/2 * 20px = 10px).
Visual effect:
!(#)
The following example demonstrates the use of `flex-end`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-justify-content:flex-end; justify-content:flex-end; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `center`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `space-between`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-justify-content:space-between; justify-content:space-between; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `space-around`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-justify-content:space-around; justify-content:space-around; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
---
## align-items Property
The `align-items` property sets or retrieves the alignment of flex items on the cross axis (vertical axis).
### Syntax
align-items: flex-start | flex-end | center | baseline | stretch
Analysis of each value:
* flex-start: The cross-axis start edge of the flex item's margin box is flush with the cross-axis start edge of the line.
* flex-end: The cross-axis start edge of the flex item's margin box is flush with the cross-axis end edge of the line.
* center: The flex item is centered on the cross-axis of the line. (If the line's size is smaller than the flex item's size, it will overflow equally in both directions).
* baseline: If the flex item's inline axis is the same as the cross-axis, this value is equivalent to 'flex-start'. In other cases, it participates in baseline alignment.
* stretch: If the cross-axis size property is 'auto', the item's margin box size will be as close as possible to the line's size, while still respecting 'min/max-width/height' constraints.
The following example demonstrates the use of `stretch` (default value):
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-align-items:stretch; align-items:stretch; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `flex-start`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-align-items:flex-start; align-items:flex-start; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `flex-end`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-align-items:flex-end; align-items:flex-end; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `center`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-align-items:center; align-items:center; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `baseline`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-align-items:baseline; align-items:baseline; width:400 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
---
## flex-wrap Property
The **flex-wrap** property specifies how flex items should wrap within the flex container.
### Syntax
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
Analysis of each value:
* **nowrap** - Default, the flex container is single-line. In this case, flex items may overflow the container.
* **wrap** - The flex container is multi-line. In this case, overflowing flex items are placed onto new lines, and line breaks may occur within items.
* **wrap-reverse** - Reverses the wrap arrangement.
The following example demonstrates the use of `nowrap`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-flex-wrap:nowrap; flex-wrap:nowrap; width:300 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `wrap`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; width:300 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
The following example demonstrates the use of `wrap-reverse`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-flex-wrap:wrap-reverse; flex-wrap:wrap-reverse; width:300 px; height:250 px; background-color:lightgrey; }
[Try it »](#)
---
## align-content Property
The `align-content` property modifies the behavior of the `flex-wrap` property. Similar to `align-items`, but instead of aligning individual flex items, it aligns the lines themselves.
### Syntax
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Analysis of each value:
* `stretch` - Default. Lines will stretch to take up the remaining space.
* `flex-start` - Lines are packed toward the start of the flex container.
* `flex-end` - Lines are packed toward the end of the flex container.
* `center` - Lines are packed toward the center of the flex container.
* `space-between` - Lines are evenly distributed within the flex container.
* `space-around` - Lines are evenly distributed within the flex container, with half-size spaces on both ends.
The following example demonstrates the use of `center`:
### Example
.flex-container{display: -webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-align-content:center; align-content:center; width:300 px; height:300 px; background-color:lightgrey; }
[Try it »](#)
---
## Flex Item Properties
### Order
### Syntax
order:
Analysis of each value:
* : Defines the arrangement order using an integer value. Items with smaller values are placed first. Can be negative.
The `order` property sets the order of flex items within the flex container:
### Example
.flex-item{background-color:cornflowerblue; width:100 px; height:100 px; margin:10 px; }.first{ -webkit-order: -1; order: -1; }
[Try it »](#)
### Alignment
Setting the "margin" value to "auto" automatically acquires the remaining space in the flex container. Therefore, setting the vertical margin value to "auto" allows the flex item to be perfectly centered in both axes within the flex container.
The following example sets `margin-right: auto;` on the first flex item. It places the remaining space on the right side of the element:
### Example
.flex-item{background-color:cornflowerblue; width:75 px; height:75 px; margin:10 px; }.flex-item:first-child{margin-right:auto; }
[Try it »](#)
### Perfect Centering
The following example perfectly solves the centering problem we often encounter.
Using flexbox, centering becomes very simple. Just set `margin: auto;` to perfectly center the flex item in both axes:
### Example
.flex-item{background-color:cornflowerblue; width:75 px; height:75 px; margin:auto; }
[Try it »](#)
### align-self
The `align-self` property specifies the alignment of the flex item itself on the cross axis (vertical axis).
### Syntax
align-self: auto | flex-start | flex-end | center | baseline | stretch
Analysis of each value:
* auto: If the 'align-self' value is 'auto', its computed value is the 'align-items' value of its parent element. If it has no parent, the computed value is 'stretch'.
* flex-start: The cross-axis start edge of the flex item's margin box is flush with the cross-axis start edge of the line.
* flex-end: The cross-axis start edge of the flex item's margin box is flush with the cross-axis end edge of the line.
* center: The flex item is centered on the cross-axis of the line. (If the line's size is smaller than the flex item's size, it will overflow equally in both directions).
* baseline: If the flex item's inline axis is the same as the cross-axis, this value is equivalent to 'flex-start'. In other cases, it participates in baseline alignment.
* stretch: If the cross-axis size property is 'auto', the item's margin box size will be as close as possible to the line's size, while still respecting 'min/max-width/height' constraints.
The following example demonstrates the application of different values of align-self on flex items:
### Example
.flex-item{background-color:cornflowerblue; width:60 px; min-height:100 px; margin:10 px; }.item1{ -webkit-align-self:flex-start; align-self:flex-start; }.item2{ -webkit-align-self:flex-end; align-self:flex-end; }.item3{ -webkit-align-self:center; align-self:center; }.item4{ -webkit-align-self:baseline; align-self:baseline; }.item5{ -webkit-align-self:stretch; align-self:stretch; }
[Try it »](#)
### flex
The `flex` property specifies how flex items should allocate space.
### Syntax
flex: auto | initial | none | inherit | || ||
Analysis of each value:
* auto: Computed value is 1 1 auto
* initial: Computed value is 0 1 auto
* none: Computed value is 0 0 auto
* inherit: Inherits from parent element
* : Defines the flex grow factor of the flex item.
* : Defines the flex shrink factor of the flex item.
* : Defines the default main size of the flex item.
In the following example, the first flex item occupies 2/4 of the space, and the other two each occupy 1/4:
### Example
.flex-item{background-color:cornflowerblue; margin:10 px; }.item1{ -webkit-flex:2; flex:2; }.item2{ -webkit-flex:1; flex:1; }.item3{ -webkit-flex:1; flex:1; }
[Try it »](#)
---
## More Examples
(#)
---
## CSS3 Flexbox Properties
The table below lists commonly used properties in flexbox:
| Property | Description |
| --- | --- |
| (#) | Specifies the box type of an HTML element. |
| (#) | Specifies the arrangement of child elements within the flex container. |
| (#) | Sets the alignment of flex items on the main axis (horizontal axis). |
| (#) | Sets the alignment of flex items on the cross axis (vertical axis). |
| (#) | Specifies whether flex items should wrap. |
| (#) | Shorthand property for setting both `flex-direction` and `flex-wrap`. |
| (#) | Modifies the behavior of the `flex-wrap` property, aligning lines within the flex container. |
| (#) | Specifies the order of a flex item relative to other items in the same container. |
| (#) | Shorthand property for setting `flex-grow`, `flex-shrink`, and `flex-basis`. |
| (#) | Allows the default alignment (or the one specified by `align-items`) to be overridden for individual flex items. |