One,
Flex is a Flexible Box acronym, meaning "elastic layout", to provide maximum flexibility to the box model.
Any container can be specified as Flex layout.
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
Using Flex layout elements, called Flex container (flex container), referred to as "container." It's all child elements automatically become a member of a container, called a Flex project (flex item), referred to as " project ."
FIG: container exist by default two axes: a horizontal spindle (main axis) and vertical axis intersect (cross axis). The start position of the spindle (intersection with border) is called the main start, end position called the main end; cross-axis start position is called cross start, the end position is called the cross end.
The default project along the spindle arrangement. Single project called the space occupied by the spindle main size, the space occupied by the cross-axis is called the cross size.
two,
A total of six containers flex properties are
- flex-direction flex-direction property determines the main direction (i.e., the arrangement direction of the project)
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
To be continued