In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
How to quickly start CSS3 elastic box model flex box, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.
Using the syntax of flex on css
Display: flex; / * add prefixes to browsers as required * /
Flex-direction
(for parent container elements)
Flex-direction:row
A
B
C
Flex-direction:row-reverse
A
B
C
Flex-direction:column
A
B
C
Flex-direction:column-reverse
A
B
C
Flex-wrap
(for parent container elements)
Sets or retrieves whether the child elements of the telescopic box object wrap when they exceed the parent container.
Flex-wrap: nowrap | wrap | wrap-reverse
Flex-wrap:nowrap
A
B
C
Flex-wrap:wrap
A
B
C
Flex-wrap:wrap-reverse
A
B
C
Flex-flow
(for parent container elements)
Equivalent to a collection of direction and wrap
Flex-flow: row nowrap;/* is arranged sequentially without line wrapping * /
Flex-flow:row-reverse wrap;/* arranges in reverse order and wraps lines automatically * /
Justify-content
(for parent container elements)
Sets or retrieves the alignment of elastic box elements in the direction of the principal axis (horizontal axis).
Justifu-content: flex-start | flex-end | center | space-between | space-around
Justify-content:flex-start
A
B
C
Justify-content:flex-end
A
B
C
Justify-content:center
A
B
C
Justify-content:space-between
Space-between: elastic box elements are evenly distributed across lines. If the leftmost remaining space is negative, or if the row has only one child element, the value is equivalent to 'flex-start'. In other cases, the boundary of the first element is aligned with the boundary of the main start position of the row, while the boundary of the last element is aligned with the margin of the main end position of the row, while the remaining expansion box items are evenly distributed. and make sure that the white space between the two is equal.
A
B
C
Justify-content:space-around
Space-around: elastic box elements are evenly distributed in the rows, leaving half of the spacing between child elements and child elements at both ends. If the leftmost remaining space is negative, or if the row has only one telescopic box item, this value is equivalent to 'center'. In other cases, the expansion box items are evenly distributed and ensure that the white space between the two pairs is equal, while the space in front of the first element and after the last element is half that of the other white space.
A
B
C
Align-items
(for parent container elements)
Sets or retrieves the alignment of elastic box elements in the direction of the side axis (vertical axis).
Align-items: flex-start | flex-end | center | baseline | stretch
Align-items:flex-start
A
B
C
Align-items:flex-end
A
B
C
Align-items:center
A
B
C
Align-items:baseline
Baseline: if the inline axis of the elastic box element is the same as the side axis, this value is equivalent to 'flex-start'. In other cases, this value participates in baseline alignment.
A
B
C
Align-items:strecth
Stretch: if the property value of the specified side axis size is' auto', its value will make the size of the project's margin box as close as possible to the size of the row, but will also comply with the limit of the 'min/max-width/height' property.
A
B
C
Align-content
(for parent container elements)
Sets or retrieves the alignment of elastic box stack stretch rows.
Align-content: flex-start | flex-end | center | space-between | space-around | stretch
Align-content:flex-start
A
B
C
D
E
F
Align-content:flex-end
A
B
C
D
E
F
Align-content:center
A
B
C
D
E
F
Align-content:space-between
A
B
C
D
E
F
Align-content:space-around
A
B
C
D
E
F
Align-content:strecth
A
B
C
D
E
F
Flex-grow
(applies to child elements)
Sets or retrieves the expansion ratio of the elastic box. The remaining space is allocated according to the expansion factor set by the elastic box element as a ratio. The default value of flex-grow is 0, and if the attribute is not defined, you will not have the right to allocate the remaining space. In this example, flex-grow is explicitly defined in both items of b and c. You can see that the remaining space is divided into 4 parts, of which b is 1 and c is 3, that is, 1:3
Flex-grow: (default 0)
A
B
Flex-grow:1
C
Flex-grow:2
D
E
Flex-shrink
(applies to child elements)
Sets or retrieves the shrinkage ratio of the elastic box (shrinks the space according to the shrinkage factor set by the elastic box element.
Flex-shrink: (default 1)
Flex-basis
(applies to child elements)
Sets or retrieves the flex base value of the elastic box. If the sum of the base values of all child elements is greater than the remaining space, the remaining space will be scaled according to the base value set by each item.
Flex-basis: (percentage can be expressed) | auto (default auto)
A
B
C
Flex-basis:600px
D
E
Flex (compound attribute)
(applies to child elements)
Flex:none | [flex-grow] | | [flex-shrink] | | [flex-basis]
The calculated value of the none:none keyword is: 0 auto
[flex-grow]: defines the expansion ratio of the elastic box element.
[flex-shrink]: defines the shrinkage ratio of elastic box elements.
[flex-basis]: defines the default datum value of the elastic box element.
Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 281
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.