The best CSS3 Flexible Box Tutorial In 2024, In this tutorial you can learn Browser Support,CSS3 Flexible Box contents,flex-direction,justify-content attribute,align-items property,flex-wrap property,align-content attribute,Flexible sub-element attributes,More examples,CSS3 Flexible Box Properties,
CSS3 Flexible Box is a new layout mode.
CSS3 Flexible Box (Flexible Box or flexbox), when the page is a need to adapt to different screen sizes and device types when elements have to ensure proper behavior layout.The purpose of introducing the flexible pouch layout model is to provide a more efficient way to arrange for a container sub-elements, alignment and distribution of the blank space.
Figures in the table represent the first browser to support the property version number.
Immediately after the number -webkit- browser or -moz- specified prefix.
Attributes | |||||
---|---|---|---|---|---|
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 |
Flexible box made of an elastic container (Flex container) and the elastic sub-elements (Flex item) components.
Elastic container by setting the display property is flex or inline-flex will be defined as the elastic container.
The elastic container contains one or more resilient sub-elements.
Note: the elastic outer container and the elastic element is a child of normal rendering. Flexible box defines only how resilient the child elements within the layout of the elastic container.
Flexible sub-element is usually displayed in the elastic line box. By default, each container is only one line.
The following shows the elastic element child elements are displayed in one line, left to right:
Of course, we can modify the arrangement.
If we set the direction
property to rtl
(right-to-left), the arrangement of the elastic sub-elements will change, change page layouts also followed:
flex-direction
order specifies the elastic sub-element in the parent container.
flex-direction: row | row-reverse | column | column-reverse
flex-direction
values are:
The following example illustrates the row-reverse
use:
The following example illustrates the column
used:
The following examples demonstrate the column-reverse
use:
Content alignment (justify-content) on the elastic properties of the application container, the elastic elastic container items aligned along the main axis (main axis).
justify-content syntax is as follows:
justify-content: flex-start | flex-end | center | space-between | space-around
Each value analysis:
Flexible project to the first line next to the filling. This is the default. The first main-start from the outside edges of the elastic item is placed in the main-start edges of the line, and the subsequent flush in turn placed an elastic term.
Flexible project to the end of the line next to the filling. The first main-end items from outside the elastic threads are placed in main-end edges of the line, and the subsequent flush in turn placed an elastic term.
Flexible project centered next to fill. (If the remaining free space is negative, the project will also overflow elasticity in both directions).
Flexible project evenly distributed on the row. If the space is negative or only an elastic term, the value equivalent to the flex-start. Otherwise, main-start from the outside edges of the first row and an elastic item alignment, while main-end line and sideline margin last an elastic term alignment and distribution of the remaining items on the elastic line, adjacent equally spaced items.
Flexible project evenly distributed on the line, on both sides of the left half of the space. If the space is negative or only an elastic term, the value is equivalent to the center. Otherwise, the elasticity of the project along the distribution line and equally spaced from each other (for example, is 20px), while leaving half of the interval (1/2 * 20px = 10px) between the head and tail on both sides and elastic container.
Renderings show:
The following example demonstrates the flex-end
use:
The following example demonstrates the center
's use:
The following examples demonstrate the space-between
the use of:
The following examples demonstrate the space-around
use:
align-items
set or retrieve the elastic element on the side of the box axis (vertical axis) direction of alignment.
align-items: flex-start | flex-end | center | baseline | stretch
Each value analysis:
The following example demonstrates stretch(默认值)
the use of:
The following example demonstrates the flex-start
use:
The following example demonstrates the flex-end
use:
The following example demonstrates the center
's use:
The following example demonstrates the baseline
usage:
flex-wrap attribute is used to specify an elastic box child element wrap mode.
flex-flow: ||
Each value analysis:
The following example demonstrates the nowrap
use:
The following example demonstrates the wrap
of use:
The following example demonstrates the wrap-reverse
use:
align-content
attribute is used to modify the flex-wrap
attribute behavior. Similar align-items
, but it is not set the alignment of the elastic sub-elements, but set the alignment of each row.
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Each value analysis:
stretch
- default. Each line will stretch to occupy the remaining space. flex-start
- rows of stacked boxes to the starting position of the elastic container. flex-end
- rows of stacked boxes to the end position of the elastic container. center
- rows of stacked boxes to the middle position of the elastic container. space-between
- the flexible pouch container each row evenly distributed. space-around
- each line in the flexible pouch container equally distributed between the two ends to retain half of sub-elements and sub-elements spacing size. The following example demonstrates the center
's use:
order:
Each value analysis:
order
to set properties within the elastic properties of the elastic container child elements:
Settings "margin" is "auto" value, automatically obtain the elastic container in the remaining space. So set the vertical margin value of "auto", it allows the elastic sub-elements are completely focused on the two-axis direction of the elastic container.
The following examples are on the first sub-elastic element set margin-right: auto;
. The remaining space will be placed in the right elements:
The following examples will be the perfect solution to the problems we usually encounter center.
Elastic box, center becomes very simple, just want to set the margin: auto;
can make the elastic sub-elements in the axial direction on two perfectly centered:
align-self
attribute is used to set the direction of alignment of the elastic element itself on the side of the axis (vertical axis).
align-self: auto | flex-start | flex-end | center | baseline | stretch
Each value analysis:
The following example demonstrates the elastic sub-elements align-self application effect of different values:
flex
attribute is used to specify how to allocate space for the elastic sub-elements.
flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
Each value analysis:
The following example, a first sub-elastic element occupies 2/4 of the space, the other two each 1/4 Space:
Create a responsive page using an elastic box
The following table lists commonly used to box in the elastic properties:
Attributes | description |
---|---|
display | Specifies the HTML element box type. |
flex-direction | Specify how to arrange the elements of neutron elastic container |
justify-content | An elastic element in the spindle box (horizontal) direction of alignment. |
align-items | An elastic element in the box side axis (vertical axis) the alignment direction. |
flex-wrap | Whether an elastic wrap box sub-elements beyond the parent container. |
align-content | Modify the behavior of flex-wrap property, similar to align-items, but not set the sub-elements are aligned, but the alignment of the line set |
flex-flow | flex-direction and flex-wrap shorthand |
order | An elastic box child element order. |
align-self | Use the resilient child elements. Cover the container align-items property. |
flex | How to set up an elastic box child element allocated space. |