The realization and analysis of CSS3 's Flexbox dice layout

This article mainly introduces the CSS3 of the Flexbox dice layout of the implementation and analysis, has a certain reference value, now share to everyone, there is a need for friends can refer to

The dice layout as the name implies, is like the side of the dice can be placed up to 9 points, and each face placed in exactly the number of points is a layout of the model diagram, here we bring CSS3 flexbox dice layout Implementation and problems explained:

This article is only familiar with the use of basic attributes, and complete a set of dice each side of the production. In the following I will not involve flexbox some of the more difficult issues, such as the old version of the syntax, vendor prefix, browser quirks, etc.:

First face
We know that the dice have six faces, the number of points per polygon represents the value of that polygon, and the first polygon consists of a point horizontally vertically centered. Here's a look at the specific implementation:

<section name= "class=" face-01 ">     <span class=" dot "></span>    </section>   face-01 {   Display:flex;   Justify-content:center;   Align-items:center;

For justify-content and Align-items usage please refer here justify-content,align-items. Using Flexbox, vertical centering of two lines of properties can be done, very easy!

Second, Second face

. face-02 {    Display:flex;    Justify-content:space-between;   }   . face-02. Dot:nth-of-type (2) {    align-self:flex-end;   }     <section name= "class=" face-02 ">      <span class=" dot "></span> <span class=      " dot "> </span>     </section>

Here we cannot use the Align-items property, both points will be affected, Flexbox provides a align-self property that allows us to control the Flex items ' various layouts along the cross axias direction. Align-self's usage reference here align-self.

Third, third face

. face-03 {    Display:flex;    Justify-content:space-between;   }   . face-03. Dot:nth-of-type (2) {    align-self:center;   }   . face-03. Dot:nth-of-type (3) {    align-self:flex-end;   }   <section name= "class=" face-03 "> <span class=    " dot "></span>    <span class=" dot "> </span>    <span class= "dot" ></span>   </section>

The face is the same property used by second face and is no longer explained.

Iv. Fourth face

. face-04 {    Display:flex;    Justify-content:space-between;    Flex-direction:column;   }   . face-04. column {    display:flex;    Justify-content:space-between;   }   <section name= "class=" face-04 ">     <p class=" column ">       <span class=" dot "></span>       <span class= "dot" ></span>     </p>     <p class= "column" >       <span class= " Dot "></span>       <span class=" dot "></span>     </p>   </section>

In this example, Flex-direction is used in the literal sense, which is used to control the direction of Flex, that is, by column or row layout, this property more detailed use can refer to here flex-direction

Behind fifth face and sixth face, according to the layout of the idea, it is easy to not repeat!

Write this, think of with JS write a play dice game should be very easy bar.

V. Realization of 1,2,3,4,6,12 equal parts

. row {Display:flex;   Box-sizing:border-box;     }. column {margin:10px;     Flex-grow:1;     Flex-shrink:1;     flex-basis:0;   Box-sizing:border-box;      } <section class= "row" > <p class= "column" >One</p> </section> <section class= "Row" > <p class= "column" >one half</p> <p class= "column" >one half</p> </section> <se     ction class= "Row" > <p class= "column" >one third</p> <p class= "column" >one third</p> <p class= "column" >one third</p> </section> <section class= "Row" > <p class= "column" >o     NE fourth</p> <p class= "column" >one fourth</p> <p class= "column" >one fourth</p> <p class= "column" >one fourth</p> </section> <section class= "Row" > <p class= "column" > One sixth</p> <p class= "column" >one sixth</p> <p class= "column" &Gt;one sixth</p> <p class= "column" >one sixth</p> <p class= "column" >one sixth</p> <p class= "column" >one sixth</p> </section> <section class= "Row" > <p class= "column" >     One twelve</p> <p class= "column" >one twelve</p> <p class= "column" >one twelve</p> <p class= "column" >one twelve</p> <p class= "column" >one twelve</p> <p class= "column"     ; one twelve</p> <p class= "column" >one twelve</p> <p class= "column" >one twelve</p> <p class= "column" >one twelve</p> <p class= "column" >one twelve</p> <p class= "column" &G T;one twelve</p> <p class= "column" >one twelve</p> </section> [Object Object]

In this example, the Flex-grow,flex-shrink,flex-basis three properties are used.
1. Flex-grow: Use to define scaling capabilities for scaled projects as needed. It accepts a value that does not have a unit as a scale. It is mainly used to determine how much space the remaining space of the telescopic container should expand proportionally.
If "Flex-grow" for all scaling projects is set to "1", then each scaling item will be set to an equal amount of space remaining. If you set the "Flex-grow" value to "2" for one of the scaling items, the remaining space for the scaling project is twice times the remaining space of the other scaling items. Negative values are not valid.
2. Flex-shrink: The ability to define scaling project shrinkage as needed. Negative values are also invalid.
3. Flex-basis: Used to set the scaling datum, the remaining space is scaled by the ratio, and the negative value is not supported. If set to 0, additional space around the content is not taken into account. If set to auto, the extra space is based on the Flex-grow value assignment.

VI. implementation of 2-3-7 layouts

. row237. column:first-of-type {     flex-grow:2;     flex-basis:5px;   }   . row237. Column:nth-of-type (2) {     flex-grow:3;     flex-basis:18px;   }   . row237. Column:nth-of-type (3) {     flex-grow:7;     flex-basis:70.5px;   }   <section class= "Row row237" >     <p class= "column" >one half</p> <p     class= "column" >one third</p>     <p class= "column" >one seventh</p>   </section>

Here the calculation of the value of the flex-basis, there should be a formula (to be solved), if there is this formula, with sass,less and other preprocessing languages to implement multi-column adaptive layout will be very convenient.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!