flex layout is definitely our usual layout in a property with the most, we look at it in a browser support in :( can i use as of 2019/11/16)
Dig lotus, concave Sen! Support could be so much better, good to even ie also supports most of the properties flex layout, then the next we'll look at it in three moves it.
basic concepts
Any element, whether or block elements inline elements, can be set to flex the container, are the following abbreviated as "container", block-level elements disposed display: flex, the elements provided within line display: inline-block.
Once the container has become flex element, the first stage of the downward sub-element will automatically flex project into the next referred to as "item", and forces attach inline-block properties, while items float, vertical-align, clear properties We will all fail.
Default container has two axes, a spindle, a secondary shaft. The default orientation axis is horizontal.
Container Properties
1, Flex-direction . Define the direction of the spindle, the default for the row, i.e., arranged laterally. It can be set column, a longitudinal arrangement;
2, The justify-Content . Defined items on the spindle arrangement, the default value flex-start, can values Flex-Start | End-Flex | Center | Space-BETWEEN | Space-around . There is also a space-evenly, but this property is not recommended, because it is not a high degree of support, particularly a mobile end device;
3, align = left-items . Defined countershaft project alignment, the default value stretch. Possible values Flex-Start | Flex-End | Center | the Stretch | Baseline . Focus on talk about the latter two, if the project does not set a fixed height, then, stretch properties will be stretched to fill the entire height of the sub-project, of course, if you set a fixed height of the project, and that this property does not play any role. The baseline on the powerful, it will pick up the first line of text in each project, regardless of the size of the text, based on the alignment of text at the bottom.
. 4, Flex-wrap . Whether the project is defined in the axis row no less than the time line break. The default value is nowrap. When set to wrap, to give priority to ensuring their width,
Here are some did not, for example, flex-flow properties of such a combination, as well as similar wrap-reverse this popular values, basically flex container understand these four properties already meet most of the layout needs.
Project Properties
1, Flex-Grow . "grow" is meant to grow, flex-grow define the project in the presence of excess space in the container, whether to magnify themselves. The default is 0, indicating no amplification. If several items are provided flex-grow property is greater than 0, they will erode the remaining space in proportion to the flex-grow.
Yo, this is not the year that the so-called Holy Grail Flying wing it? ? Now realize it is really cheap.
2, Flex-Shrink . Whether the project is defined in the narrow container space is insufficient, the default value is 1, which will be reduced, 0 represents refused to shrink. What if it's all meow of flex-shrink are 0, not newline, the addition of content, what happens then, that would be exceeded.
3, Flex-Basis . Defines the initial width of the front project into the container, the default value is auto, i.e. the size of the item itself. Specific pixels may be provided, when the width and flex-basis exist, flex-basis of priority over the width.
But the property is made of cane, read many articles, flex-shrink to do something to do with the width of exactly the same thing, so I think it's considered a redundant property.
. 4, align = left-Self . Represents a separate item engaged in specialization, the attribute value overrides the align-items set value of the parent element, the value of the align-items exactly the same value.
5, a combination of properties Flex : it is "expansion, contraction, beginning wide" short, i.e., flex-grow + flex-shrink + flex-basis. The default value is 0 1 auto. It has two quick values: Auto (Auto. 1. 1) represents a proportional stretch, and none (0 0 auto) represents in any case not retractable.