Shulou(Shulou.com)06/01 Report--

This article focuses on "what layout attributes does css3 have". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what layout attributes css3 has.

Css3 layout properties are: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, order, flex-grow, flex-shrink, and so on.

The operating environment of this tutorial: windows7 system, CSS3 version, Dell G3 computer.

1. Elastic box model (Flexible Box or Flexbox)

The most important feature of the elastic box model is that it can dynamically modify the width and height of the child elements to meet the appropriate layout under different screen sizes.

(1) Elastic container attributes

Flex-direction: sets the direction of the spindle and determines the arrangement of elastic subelements

Flex-wrap: whether to wrap lines when elastic child elements are outside the scope of the elastic container

Shortcuts to flex-flow:flex-direction and flex-wrap properties, composite properties

Justify-content: alignment on the spindle

Align-items: alignment on the side axi

Align-content: the alignment of the side axis when there is a blank on the side axis

(2) Elastic element attribute

Order: controls the order of child elements in an elastic container

Flex-grow: sets the expansion ratio of elastic child elements

Flex-shrink: sets the contraction ratio of elastic elements,

Flex-basis: specifies the default size of elastic child elements before scaling, which is equivalent to the width and height attributes

Compound properties of flex:flex-grow,flex-shrink and flex-basis attributes

Align-self: allows independent elastic subelements to override the default alignment settings for elastic containers

Flexbox menu project actual combat

Flexbox HTML CSS JavaScript Sass Ruby Mongo .menu {list-style-type: none; padding: 0; margin: 0; display: flex; flex-flow: row wrap;} .menu li {height: 40px; text-align: center; line-height: 40px Flex: 11 100%;} .menu li:nth-child (1) {background-color: # 39ADD1;} .menu li:nth-child (2) {background-color: # 3079AB;} .menu li:nth-child (3) {background-color: # 982551;} .menu li:nth-child (4) {background-color: # E15258 } .menu li:nth-child (5) {background-color: # CC6699;} .menu li:nth-child (6) {background-color: # 52AC43;} @ media (min-width:480px) {.menu li {flex: 1150%;}} @ media (min-width:768px) {.menu {flex-flow: row nowrap;}}

2. Multi-column detailed explanation

List of attributes:

Columns: compound properties (column-width and column-count), setting width and number of columns

Column-width: sets the width of each column

Column-count: setting the number of columns

Column-gap: setting the gap between columns

Column-rule: compound properties (column-rule-width, column-rule-style, column-rule-color) to set the border style between columns

Column-fill: sets whether the height of the column is uniform

Column-span: sets whether to span all columns

3. Media inquiry

Best practices:

/ * very small screen (mobile phone, smaller than 768px) * / / * there is no code related to media query. Mobile devices prefer * / / * small screen (tablet, size equal to 768) * / @ media (min-width: 768px) {} / * medium screen (desktop display) Greater than or equal to 992px) * / @ media (min-width: 992px) {} / * large screen (large desktop display, greater than or equal to 1200px) * / @ media (min-width: 1200px) {} so far, I believe you have a deeper understanding of "what layout properties css3 has". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.