Home > Developer > Web Develop
Tag: Ora body ret PAC blank style end implementation definition
Today I learned the flex layout and found it to be truly powerful, so it must be recorded.
The following simple layout requirements are difficult or impossible to implement conveniently and flexibly with such tools:
Let's start with an example:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <style> Section{Height:100px;background:Purple;Display:Flex;Align-items:Center;justify-content:Space-around; }Div{Color: White;background:Orange;Flex:1;Margin-right:10px; }Div:last-child{Margin-right:0; }Section , Div{padding:10px; } </style> </Head> <Body> < Section> <Div>This is a box</Div> <Div>This is a box</Div> <Div>This is a box</Div> </ Section> </Body>
</HTML >
Paste the result map (the yellow div block in any width purple container can be adapted to the width yo):
One more Flex model illustration
display: flex parent element set (<section> in the example above) is called the Flex container (Flex container). The following is a description of the 6 properties of the Flex container :
1.flex-direction -determines the direction of the spindle (that is, the direction in which the flex item is arranged). The value has the following four:
row(default): The spindle is in the horizontal direction, starting at the left.
row-reverse: The spindle is in the horizontal direction, starting at the right end.
column: The spindle is in the vertical direction and the starting point is in the upper edge.
column-reverse: The spindle is in the vertical direction and the starting point is in the lower edge.
2,flex-wrap --By default, the project is on a line (also known as the "axis"). flex-wrap Property definition, how to wrap a line if one of the axes does not fit. The value has the following three:
nowrap(default): No Line break.
wrap: Line break, the first line is above.
wrap-reverse: Line break, the first line is below.
3,flex-flow -- flex-flow attributes are flex-direction shorthand for flex-wrap row nowrap attributes and attributes, and default values are.
4,justify-content - justify-content attribute defines the alignment of the item on the spindle. The value has the following five:
flex-start(default value): Left-justified.
flex-end: Right-aligned.
centerCenter
space-between: Justified, the interval between items is equal.
space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders.
5,align-items justify-content -The attribute defines how the item is aligned on the intersection axis. The value has the following five:
flex-start: The starting point of the intersection axis is aligned.
flex-end: The end alignment of the intersection axis.
center: The midpoint of the intersection axis is aligned.
baseline: The baseline alignment of the first line of text for the item.
stretch(default): If the item is not set to height or set to auto, the height of the entire container will be filled.
6,align-content align-content -attribute defines the alignment of multiple axes. If the item has only one axis, this property does not work. The value has the following six:
flex-start: Aligns with the start point of the intersection axis.
flex-end: Aligns with the end point of the intersection axis.
center: Aligns with the midpoint of the intersection axis.
space-between: aligned with the intersection axis, evenly spaced between axes.
space-around: The intervals between each axis are equal. Therefore, the spacing between the axes is one times larger than the interval between the axes and the border.
stretch(default): The axis fills the entire cross axis.
Then there are 6 properties of the Flex item (Flex items):
order: order Property defines the order in which items are arranged. The smaller the number, the higher the alignment, and the default is 0.
flex-grow: flex-grow Property defines the magnification of the item, by default, that is 0 , if there is space left, do not zoom in.
flex-shrink: flex-shrink Property defines the scale of the project, which defaults to 1, which means the project shrinks if there is not enough space.
flex-basis: flex-basis property defines the spindle space (main size) that the item occupies before allocating extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is the auto original size of the project.
flex: flex the attribute flex-grow is flex-shrink , and flex-basis the shorthand for 0 1 auto , the default value is. The latter two properties are optional.
align-self: align-self property allows an individual item to have a different alignment than other items, overriding align-items the property. The default value auto , which represents the property that align-items inherits the parent element, is equivalent to stretch if there is no parent element.
The above information is from: Https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox and http://www.ruanyifeng.com/blog/ 2015/07/flex-grammar.html?utm_source=tuicool.
Flexbox Learning of CSS Layout
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
