1. Flex layout
flexis flexible boxan acronym for "elastic layout", used to provide maximum flexibility for the box model.
Any container can be specified as a flex layout.
Elements with flex layout are called flex container, or "container" for short.
.container {
display: flex;
}
Two, flex-direction main axis and cross axis
flex-directionThe attribute determines the direction of the main axis (that is, the direction in which elements are arranged), and the axis perpendicular to the main axis is the cross axis.
flex-directionThere are 4 property values that can be set
- row (default): the main axis is horizontal, and the starting point is at the left end.
- row-reverse: The main axis is horizontal, and the starting point is at the right end.
- column: The main axis is vertical, and the starting point is the upper edge.
- column-reverse: The main axis is vertical, and the starting point is at the bottom.
justify-contentProperties define the alignment of items on the main axis.align-itemsProperties define the alignment of items on the cross axis.
3. When flex-wrap defines an element that exceeds it, it will wrap
flex-wrapAttribute definition, if an axis line does not fit, how to wrap.
It may take three values:
- nowrap (default): Do not wrap.
- wrap: Line break, the first line is above. (commonly used)
- wrap-reverse: Newline, the first line is below.
The flex-flow attribute is a shorthand form of the flex-direction attribute and the flex-wrap attribute. The default value is row nowrap. Commonly
used:flex-flow: row wrap;// The main axis is horizontal to the right, and the element wraps automatically
4. Alignment on the main axis of justify-content
justify-contentAttributes define the alignment of elements on the main axis.
It may take six values: the exact alignment depends on the orientation of the axis. The following assumes that the main axis is from left to right.
- Stretch: Automatically stretches child elements until the parent container is covered
- flex-start (default): left-aligned
- flex-end: right alignment
- center: The element is centered
- space-between: Both ends are aligned to the edges, and the spacing between elements is equal.
- space-around: Equal spacing on both sides of each element. Therefore, the spacing between elements is twice as large as the spacing between elements and borders.
- space-evenly: Completely equidistant and evenly spaced, with equal spacing between elements and between elements and borders.
Five, align-items alignment on the cross axis
align-itemsAttributes define the alignment of elements on the cross axis.
It may take 5 values. The specific alignment is related to the direction of the cross axis, and the following assumes that the cross axis is from top to bottom.
- stretch (default): If the item does not have a height set or is set to auto, it will take up the height of the entire container.
- flex-start: The starting point of the cross axis is aligned.
- flex-end: The end of the cross axis is aligned.
- center: The midpoint of the cross axis is aligned.
- baseline: The baseline alignment of the first line of text in the item.
六、align-content
1. align-content can be regarded as a similar and opposite attribute to justify-content, which refers to the alignment and distribution of flex items in each row in the vertical direction.
2. It is only applicable to multi-line flex containers, and when there is extra space on the cross axis, the flex lines in the flex container are aligned.
There must be multiple lines of items in the container for this property to render the effect.
Rookie tutorial online test align-content
Seven, examples
center layout
It is very simple to set the vertical center of the box model using flex layout, just set the align-items: center; attribute.
.wrap {
width: 300px;
height: 300px;
border: 1px solid red;
display:flex;
justify-content:center;
align-items:center;
}
.box {
height: 100px;
width: 100px;
border: 1px solid blue;
}
two column layout
.wrap {
display: flex; }
.left {
width: 200px; }
.right {
flex: 1; }
The meaning of flex:1
flex:1The meaning of : is to equally divide the remaining space (ie: flex:1 1 0%;), so that all the child elements of the flexbox model object have the same width, and ignore their internal content.
flexThe property is used to set or retrieve how the child elements of the flexbox model object allocate space.
flexThe properties are shorthand for the flex-grow , flex-shrink , and flex-basis properties. The default value is 0 1 auto. The last two attributes are optional.
-
flex-growThe attribute defines the enlargement ratio of the item , and the default is 0, that is, it will not be enlarged if there is remaining space. If all items have a flex-grow property of 1, they will equally divide the remaining space (if any). If one item has a flex-grow property of 2 and the other items have a flex-grow of 1, the former will occupy twice as much remaining space as the other items. -
flex-shrinkThe attribute defines the reduction ratio of the item , the default is 1, that is, if there is insufficient space, the item will be reduced. If the flex-shrink property of all items is 1, when the space is insufficient, they will be proportionally reduced. If the flex-shrink property of an item is 0 and other items are 1, the former will not shrink when there is insufficient space. -
flex-basisThe attribute defines the main axis space occupied by the item before allocating excess space, that is, the base value of stretching. Based on this property, the browser calculates whether there is extra space in the main axis. Its default value is auto, which is the original size of the item.
flexThe attribute attribute has two shortcut values:
- auto (1 1 auto) : automatically zoom in and zoom out
- none (0 0 auto): Do not automatically zoom in and out
It is recommended to use this attribute first instead of writing three separate attributes separately, because the browser will calculate the relevant value.
