Elastic box

Flexbox layout features are as follows:

1: The layout can be flexibly adjusted when the screen and browser window sizes change; 2: you can specify the expansion project along the main axis or side axis in proportion to allocate extra space (expansion container extra space), so as to adjust the size of the expansion project; 3: you can specify the expansion project along the main axis or side axis will expand the container extra space, allocated to the expansion project before, after or between; 4. You can specify how to distribute extra space perpendicular to the element's layout axis around that element. 5: can control the layout direction of elements on the page; 6: Elements on the screen can be reordered in a way different from that specified by the Document Object Model (DOM). This means that scaling items can be reordered in browser rendering without the document flow order.Copy the code

Create a Flex container:

The first step is to set the parent box to display:flex; Flex container Note: With flex layout, the float, clear, and vertical-align attributes of child elements are invalidatedCopy the code

Iii. Basic Concepts:

Elements with a Flex layout are called Flex containers, or "containers" for short. All of its child elements automatically become container members and are called Flex items, or "items." The container has two axes by default: a horizontal main axis and a vertical cross axis. The starting position of the spindle (where it intersects with the border) is called main start and the ending position is called main end; The starting position of the intersecting axis is called cross start and the ending position is called cross end. By default, items are arranged along the main axis. The main axis space occupied by a single project is called main size, and the cross axis space occupied is called cross size.Copy the code

Iv. Container Properties:

The following six properties are set on the container. Flex-flow is a short form of the flex-direction and flex-wrap properties. The default value is row nowrap. Align-content defines how items are aligned on the main axis. Align-items define how items are aligned on the vertical axis. If the project has only one axis, This property does not work 1-1, flex-direction Sets the alignment direction of items row (default) Horizontal start on the left row-reverse horizontal start on the right column vertical start on the top column-reverse vertical Nowrap (default) nowrap wrap wrap (default) The first line is below 3-1. Flex-flow is a short form of the flex-direction and flex-wrap attributes. The default value is row nowrap. 4-1, justify-content Defines the alignment of items on the main axis flex-start (default) left flex-end right center center space-between Equal spacing between items Align -items define how items align on the vertical axis with "Stretch" (default). If the item is not set to height or is set to Auto, it will take up the height of the entire container. Flex -start aligns the start of the vertical axis. Flex -end aligns the end of the vertical axis. Center aligns the midpoint of the vertical axis. Baseline alignment of the first line of text of the baseline project. 6-1. Align-content defines the alignment of multiple axes. This property does not work if the project has only one axis, flex-start is aligned with the start of the vertical axis. Flex-end is aligned with the end of the vertical axis. Center is aligned with the midpoint of the vertical axis. Space-between is aligned with both ends of the vertical axis, and the spacing between axes is evenly distributed. Space-around Both sides of each axis are equally spaced. Therefore, the spacing between axes is twice as large as the spacing between axes and borders. Stretch (default) Axis takes up the entire cross axis.Copy the code

5. Project attributes

The following six properties are set on the project. 1. Order defines the order of items. 2. Flex-grow defines the scale of the project. The default is 0, that is, if there is free space, it does not scale. 4. Flex -basis is used to set the base size of flex items in the main axis direction to auto. Can set the width of the concrete numerical value 5, flex flex is the flex - turns up | | flex - shink | | flex - the basis of the short 6, align - self can align - self covered flex container Align-items 1-1 and order define the order of items. The smaller the value, the higher the order, the default is 0, 2-1. Flex-grow defines the scale of the project, default is 0, that is, if there is free space, does not scale. If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items. 3-1. Flex-shrink defines the shrink scale of a project. The default is 1, that is, if the space is insufficient, the project will shrink by the same scale if the space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient. Negative values have no effect on this property.Copy the code

A quick review of flex’s properties and usage