Home Web Front-end CSS Tutorial Implementation and analysis of CSS3 Flexbox dice layout

Implementation and analysis of CSS3 Flexbox dice layout

Jun 14, 2018 pm 05:32 PM
css3 flexbox

This article mainly introduces the implementation and analysis of the Flexbox dice layout of CSS3. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

As the name suggests, the dice layout is like Up to 9 points can be placed on one side of the dice, and the number of points placed on each side is exactly the model diagram of a layout. Here we will bring the implementation and problem explanation of CSS3 Flexbox dice layout:

This article is just Familiarize yourself with the usage of basic attributes and complete the production of each side of a set of dice. In the following content, I will not cover some of the more difficult issues with flexbox, such as old version syntax, vendor prefixes, browser quirks, etc.:

1. First Face
We know , the dice has six faces, and the number of points on each face represents the value of that face. The first face consists of a horizontally and vertically centered dot. Let’s look at the specific implementation:

 <section name="01" class="face-01">   
  <span class="dot"></span>   
 </section>   
face-01 {   
display: flex;   
justify-content: center;   
align-items: center;
Copy after login

For the usage of justify-content and align-items, please refer to here justify-content, align-items. Using flexbox, you can do it by vertically centering two rows of attributes. It’s very easy!

2. Second Face

.face-02 {   
 display: flex;   
 justify-content: space-between;   
}   
.face-02 .dot:nth-of-type(2) {   
 align-self: flex-end;   
}   
  <section name="02" class="face-02">   
   <span class="dot"></span>   
   <span class="dot"></span>   
  </section>
Copy after login

We can’t use the align-items attribute here, use it both All points will be affected. Flexbox provides an align-self attribute, which allows us to more conveniently control the flex items to set different layouts along the cross axias direction. For the usage of align-self, please refer to align-self here.

3. 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="03" class="face-03">   
 <span class="dot"></span>   
 <span class="dot"></span>   
 <span class="dot"></span>   
</section>
Copy after login

This face uses the same attributes as the second face and will not be explained again.

4. Fourth Face

.face-04 {   
 display: flex;   
 justify-content: space-between;   
 flex-direction: column;   
}   
.face-04 .column {   
 display: flex;   
 justify-content: space-between;   
}   
<section name="04" 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>
Copy after login

In this example, flex-direction is used. From the literal meaning, it can be seen that it is used to control the direction of flex, that is, by column Or layout by row. For more detailed usage of this attribute, please refer to the Fifth Face and Sixth Face behind flex-direction

. According to the previous layout ideas, it is very easy and I won’t go into details!

Writing this, it should be easy to write a small game of playing dice with JS.

5. Implement 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>   
<section 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">One 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">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">One Twelve</p>   
  <p class="column">One Twelve</p>   
</section>  [object Object]
Copy after login

In this example, flex-grow, flex-shrink, flex are used -basis three attributes.
1. flex-grow: Used to define the expansion capabilities of flex items as needed. It accepts a value without units as a ratio. It is mainly used to determine how much space should be expanded proportionally to the remaining space of the scalable container.
If the "flex-grow" of all flex items is set to "1", then each flex item will be set to an equal-sized remaining space. If you set the "flex-grow" value to "2" for one of the flex items, then the remaining space occupied by this flex item is twice the remaining space occupied by the other flex items. Negative values ​​are invalid.
2. flex-shrink: Used to define the ability to shrink flex items as needed. Negative values ​​are also invalid.
3. flex-basis: Used to set the scaling baseline value. The remaining space is scaled according to the ratio. Negative values ​​are not supported. If set to 0, additional space around the content is not taken into account. If set to auto, additional space is allocated based on the flex-grow value.

6. Implement 2-3-7 layout

.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>
Copy after login

There should be a formula (to be solved) for calculating the values ​​of flex-basis here. If With this formula, it will be very convenient to implement multi-column adaptive layout with pre-processing languages ​​such as sass and less.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to implement CSS to control the display and hiding of DIV layers

Use icon fonts to assist CSS in processing images

About css flex Flexible layout

The above is the detailed content of Implementation and analysis of CSS3 Flexbox dice layout. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to achieve wave effect with pure CSS3? (code example) How to achieve wave effect with pure CSS3? (code example) Jun 28, 2022 pm 01:39 PM

How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!

Use CSS skillfully to realize various strange-shaped buttons (with code) Use CSS skillfully to realize various strange-shaped buttons (with code) Jul 19, 2022 am 11:28 AM

This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!

How to hide elements in css without taking up space How to hide elements in css without taking up space Jun 01, 2022 pm 07:15 PM

Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.

How to implement lace borders in css3 How to implement lace borders in css3 Sep 16, 2022 pm 07:11 PM

In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".

It turns out that text carousel and image carousel can also be realized using pure CSS! It turns out that text carousel and image carousel can also be realized using pure CSS! Jun 10, 2022 pm 01:00 PM

How to create text carousel and image carousel? The first thing everyone thinks of is whether to use js. In fact, text carousel and image carousel can also be realized using pure CSS. Let’s take a look at the implementation method. I hope it will be helpful to everyone!

How to set animation rotation speed in css3 How to set animation rotation speed in css3 Apr 28, 2022 pm 04:32 PM

In CSS3, you can use the "animation-timing-function" attribute to set the animation rotation speed. This attribute is used to specify how the animation will complete a cycle and set the speed curve of the animation. The syntax is "element {animation-timing-function: speed attribute value;}".

CSS layout property optimization tips: position sticky and flexbox CSS layout property optimization tips: position sticky and flexbox Oct 20, 2023 pm 03:15 PM

CSS layout attribute optimization tips: positionsticky and flexbox In web development, layout is a very important aspect. A good layout structure can improve the user experience and make the page more beautiful and easy to navigate. CSS layout properties are the key to achieving this goal. In this article, I will introduce two commonly used CSS layout property optimization techniques: positionsticky and flexbox, and provide specific code examples. 1. positions

Flexible application skills of position attribute in H5 Flexible application skills of position attribute in H5 Dec 27, 2023 pm 01:05 PM

How to flexibly use the position attribute in H5. In H5 development, the positioning and layout of elements are often involved. At this time, the CSS position property will come into play. The position attribute can control the positioning of elements on the page, including relative positioning, absolute positioning, fixed positioning and sticky positioning. This article will introduce in detail how to flexibly use the position attribute in H5 development.

See all articles