One, what is flex layout?
CSS3 introduced a new layout method flex-box layout (flexible box model layout).
1) The element with the flex layout is called the flex container, and its child elements are automatically called container items, which are called flex items.
2) Its main feature is that the flexible container has the ability to let its flexible items change its width order, etc. to fill the available space most appropriately. The telescoping item can be expanded to fill the space, or abbreviated to prevent overflowing the telescoping container.
2. Related attributes
1. Attributes of the telescopic container
1) flow-direction: set the direction of the main axis of the telescopic container
row (default value): typeset from left to right
row-reverse: typeset from right to left
column: Typesetting from top to bottom
column-reverse: typesetting from bottom to top
2)flex-wrap: Set whether the flexible items in the flexible container are displayed in single line or multiple lines
nowrap: single line display
wrap: multiple lines, Show below the first line
wrap-reverse: multiple lines, displayed above the first line
3)flex-flow property: short for flex-direction and flex-wrap
default value: row nowrap
4)justify-content: the alignment of the telescopic items on the main axis
< span style="font-family: Consolas,'Bitstream Vera Sans Mono','Courier New', Courier, monospace; white-space: pre;"> flex-start: flex-start items are aligned at the starting position of the main axis
flex-end:The telescopic items are aligned at the beginning and end of the main axis
< /span>
center:
space-around: Add the same gap to all the expansion items in both passes, so the leftmost and rightmost two gaps are half of the gap in the middle
< /p>
space-between: align at both ends, and the items in the middle equally occupy gaps
5) alien-item: the alignment of the cross axis, only works for multiple lines
p>
start: default value
end:
center:
stretch:The default value, the stretch item stretches to fill the entire Container (item cannotHeight or set to auto, it will occupy the height of the entire container)
baseline: Align according to the baseline of the content of all expansion items
2, the properties of the stretch item
1) order: Set the order of the telescopic items, the default is 0, the smaller the value, the higher it is. Can be negative
2) flex-grow : Allocate the width of the flexible container according to a certain ratio. The default value is 0, which means no change will be made even if there is excess width
excess width: flex container width-width of all items
each item assigned=(excess width/flex-grow and)*each item’s own flex-grow
flex-grow:1 Indicates that the item occupies a width
flex-grow: 2 Indicates that the current retractable project is occupied The extra space is twice that of other projects
3) Defining the shrinking ability of a stretchable item
< /span>flex-shrink:The default value is 1 When the width of the flexible container is smaller than the width of all flexible items, it will be scaled according to the set flex-shrink
If the flex-shrink property of all items is 1, when the space is insufficient, all items will be scaled down. If the flex-shrink property of one item is 0 and all other items are 1, then the former will not shrink when the space is insufficient.
4) flex-basis: Set the base value of the flex item, browser Based on this value, the remaining space on the main axis will be calculated. The default value is auto, which is the original size of the project
Note: At the same time, set the width of the expansion item through width and flex-basis, and the flex-basis value is preferred. If flex-basis is auto, use the value of width
5) flex: flex-grow flex-shrink flex-basis abbreviation default value 0,1, auto
6) alien-self: Set a different alignment between a single and other items. The default value is auto, which means that the alignment of the alien-item inherited from the parent element will override alien-item
row-reverse