The realization and problem explanation of Flexbox dice layout in CSS3

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 ">     <div class=" column "> <span class=       " dot "></span >       <span class= "dot" ></span>     </div>     <div class= "column" >       <span class= "dot" ></span>       <span class= "dot" ></span>     </div>   </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" > <div class= "column" >One</div> </section> <section class= "Row" > <div class= "column" >one half</div> <div class= "column" >one half</div> </section&   Gt <section class= "Row" > <div class= "column" >one third</div> <div class= "column" >one third&lt  ;/div> <div class= "column" >one third</div> </section> <section class= "Row" > <div class= "column" >one fourth</div> <div class= "column" >one fourth</div> <div class= "column" & Gt;one fourth</div> <div class= "column" >one fourth</div> </section> <section class= "row "> <div class=" column ">one sixth</div> <div class=" column "&Gt;one sixth</div> <div class= "column" >one sixth</div> <div class= "column" >one Sixth</d iv> <div class= "column" >one sixth</div> <div class= "column" >one sixth</div> </sect ion> <section class= "Row" > <div class= "column" >one twelve</div> <div class= "column" >O NE twelve</div> <div class= "column" >one twelve</div> <div class= "column" >one Twelve</di v> <div class= "column" >one twelve</div> <div class= "column" >one twelve</div> <di V class= "column" >one twelve</div> <div class= "column" >one twelve</div> <div class= "column" >one twelve</div> <div class= "column" >one twelve</div> <div class= "column" >One TWELVE&L t;/div> <div class= "column" >one twelve</div> </section>

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" >     <div class= "column" >one half</div> <div     class= "column" >one third</div>     <div class= "column" >one seventh</div>   </section>

The value of the various flex-basis here should have a formula (to be solved), if there is this formula, with sass,less and other preprocessing language implementation of multi-column adaptive layout will be very convenient.