CSS3 's Flexbox dice layout implementation and problem example explanation

Source: Internet
Author: User
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>


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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.