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

This article mainly introduces "how to realize the css elastic box model". In the daily operation, I believe many people have doubts about how to realize the css elastic box model. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to realize the css elastic box model". Next, please follow the editor to study!

Elastic Box Model of css

An elastic box (Flexible Box/filebox) is a layout that ensures that elements behave appropriately when the page needs to adapt to different screen sizes and device types. The purpose of introducing the elastic box layout model is to provide a more efficient way to arrange, align and allocate blank space to the child elements in a container.

An elastic box consists of an elastic container (parent element) and an elastic child element (which can be one or more). An elastic container is defined as an elastic container by setting the value of the display property to flex or inline-flex.

1. Display:flex

Function: let the current element form a box and control the child elements.

Features: the sub-elements in the elastic box are arranged along the principal axis, which is the X axis by default. The child elements in the elastic box can directly add width and height (regardless of whether it is a block element or an inline element). Just center a child element in the elastic box left and right, and add margin:auto; directly to the child element.

Document section {display: flex;} span {width: 100px; height: 100px; background-color: green; margin: auto;}

Second, it has the following attributes:

1. Flex-direction changes the arrangement direction of the spindle.

Attribute value:

Row X as the main axis

Column Y is the principal axis

The row-reverse is arranged in the opposite direction on the spindle.

2. Justify-content spindle alignment

Attribute value:

Flex-start default, top alignment

Flex-end end alignment

Center Center alignment

Space-between is aligned at both ends and automatically assigned in the middle

Space-around automatically assigns distances

3. Align-items side axis alignment

Attribute value:

Flex-start default, top alignment

Flex-end end alignment

Center Center alignment

Baseline is equivalent to flex-start.

4. Flex-wrap line feeds

Attribute value:

Wrap line feeds

Nowrap does not break lines.

Wrap-reverse reverse line wrapping

5. Alignment between allign-content lines and lines

Attribute value:

Flex-start default, top alignment

Flex-end end alignment

Center Center alignment

Space-between is aligned at both ends and automatically assigned in the middle

Space-around automatically assigns distances

6. Align-self controls the alignment of a child element (flexible element) on the side axis

Attribute value:

Auto default value. Element inherits the align-items attribute of its parent container, or "stretch" if there is no parent container

The stretch element is stretched to fit the container

The content element is located in the center of the container

The flex-start element is at the beginning of the container

The flex-end element is at the end of the container

7. Order sorting (controls the order of child elements, the larger the value, the more backward. Can be negative)

8. Flex:1 allocates all the remaining space to the current element (of course, it refers to the allocation of space on the spindle)

Flex is a compound property that sets or retrieves how the child elements of the elastic box model object allocate space

New box model

Introduction to the three attributes of flex: flex-grow: a number that specifies the amount by which the project can be extended relative to other flexible projects

Flex-shrink: a number that specifies the amount by which a project will shrink relative to other flexible projects

Flex-basis: project length

Document * {padding:0; margin:0; box-sizing: border-box;} # section1 {width: 600px; height: 500px; background-color: aliceblue; margin: auto; display: flex; flex-direction: column; / * flex-direction: row-reverse; * / flex-direction: row / * attribute 1 attribute / justify-content: center; justify-content: space-around; / * attribute 2 attribute / align-items: baseline; align-items: flex-start; align-items: center; / * attribute 3 attribute / flex-wrap: wrap / * attribute 4 percent / align-content: flex-end; align-content: center; / * attribute 5 percent /} span {width: 100px; height:100px; background: orange; border-radius: 50%; font-size: 20px; color:white; text-align: center } # section2 {width: 600px; height: 400px; background-color: aliceblue; margin: 0 auto; display: flex; align-items: center;} div {width: 100px; height: 100px; background-color: antiquewhite; font-size: 20px; color:white; text-align: center;} div:nth-child (1) {background-color: red Order: 3; / * attribute 7 * / flex:1; / * attribute 8 * /} div:nth-child (2) {background-color: blue; / * align-self: flex-end; attribute 6 * / flex:1; border:10px solid green } div:nth-child (3) {flex:1;} 1 2 3 4 5 6 7

Div1 div2 div3

Case 1: dice

Document * {padding: 0; margin: 0; box-sizing: border-box;} html, body {height: 100%;} body {display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap } div {width: 100px; height: 100px; background-color: # e7e7e7; padding: 4; border-radius: 10px; box-shadow: inset 0 5px white, inset 0-5px # bbb, inset 5px 0 # d7d7d7, inset-5px 0 # d7d7d7;} span {display: block Width: 24px; height: 24px; background-color: black; border-radius: 12px; margin: 4px; box-shadow: inset 0 3px # 111, inset 0-3px # 555;} div:nth-child (1) {display: flex; justify-content: center; align-items: center } div:nth-child (2) {display: flex; justify-content: space-between;} div:nth-child (2) span:nth-child (2) {align-self: flex-end;} div:nth-child (3) {display: flex; flex-direction: column } div:nth-child (3) span:nth-child (2) {align-self: center;} div:nth-child (3) span:nth-child (3) {align-self: flex-end;} div:nth-child (4) {display: flex; justify-content: space-between } div:nth-child (4) p {display: flex; flex-direction: column; justify-content: space-between;} div:nth-child (5) {display: flex; justify-content: space-between;} div:nth-child (5) p {display: flex Flex-direction: column; justify-content: space-between;} div:nth-child (5) p:nth-child (2) {align-self: center;} div:nth-child (6) {display: flex; justify-content: space-between } div:nth-child (6) p {display: flex; flex-direction: column; justify-content: space-between;}

At this point, the study on "how to implement the css elastic box model" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.