简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
Home > List of blog posts > 自己整一个练习flex做骰子做熟慢慢就理解flex布局
Blogger Information
Blog 5
fans 0
comment 1
visits 2734
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
自己整一个练习flex做骰子做熟慢慢就理解flex布局
收银系统数据化的博客
Original
646 people have browsed it

废话不多说,直接整代码,注释很详细方便复习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex布局</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       body {
  14.         display: flex;
  15.       }
  16.       [class$="face"] {
  17.         display: flex;
  18.         margin: 16px;
  19.         padding: 4px;
  20.         background-color: #e7e7e7;
  21.         width: 104px;
  22.         height: 104px;
  23.         box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7,
  24.           inset -5px 0 #d7d7d7;
  25.         border-radius: 10%;
  26.         object-fit: contain;
  27.       }
  28.       .pip {
  29.         width: 24px;
  30.         height: 24px;
  31.         /* 设置圆角 */
  32.         border-radius: 50%;
  33.         /* 设置阴影 */
  34.         box-shadow: inset 0 3px #111, inset 0 -3px #555;
  35.         background-color: #333;
  36.         color: white;
  37.         text-align: center;
  38.       }
  39.       /* 处理第一个让他中部居中 */
  41.       .first-face {
  42.         display: flex;
  43.         /* 设置在主轴上居中对齐 */
  44.         justify-content: center;
  45.         /* 在交叉轴上居中对齐,这样就形成了中部居中 */
  46.         align-items: center;
  47.       }
  48.       /*  第二个让两个项目一个角一个*/
  49.       .second-face {
  50.         display: flex;
  51.         /* 首先让项目在主轴上两端对齐 */
  52.         justify-content: space-between;
  53.       }
  54.       /* 再让第二个项目出现在交叉轴结束处 */
  55.       .second-face > .pip:nth-of-type(2) {
  56.         /* 允许该项目跟别的项目有不一样的对齐方式 */
  57.         align-self: flex-end;
  58.       }
  59.       /* 现在处理第三个 */
  60.       .third-face {
  61.         display: flex;
  62.         /* 先让所有项目两端对齐 */
  63.         justify-content: space-between;
  64.       }
  65.       /* 再把第二个拉到居中位置 */
  66.       .third-face > .pip:nth-of-type(2) {
  67.         /* 再次使用让第二个与其它有不一样的对齐方式 */
  68.         align-self: center;
  69.       }
  70.       /* 让第三个也使用不一样的对齐方式,仍然使用align-self */
  71.       .third-face > .pip:nth-of-type(3) {
  72.         /* 这次是放在交叉轴的结束位置 */
  73.         align-self: flex-end;
  74.       }
  75.       /* 现在处理第四个时出现了列的概念每个列是单独盒子 */
  76.       .fourth-face {
  77.         display: flex;
  78.         /* 让fourth-face做个一个大盒子两端对齐 */
  79.         justify-content: space-between;
  80.       }
  81.       .fourth-face > .column {
  82.         display: flex;
  83.         /* 把列的小盒子中方向改为列显示 */
  84.         flex-direction: column;
  85.         /* 再来一次两端对齐这样四个项目就分部在大项目的角上了 */
  86.         justify-content: space-between;
  87.       }
  88.       /* 第五个用的是三列了 */
  89.       .fivth-face {
  90.         display: flex;
  91.         justify-content: space-between;
  92.       }
  93.       .fivth-face > .column {
  94.         display: flex;
  95.         /* 让这三个列统一主轴方向变列 */
  96.         flex-direction: column;
  97.         /* 让这三个列统一两端对齐 */
  98.         justify-content: space-between;
  99.       }
  100.       .fivth-face > .column:nth-of-type(2) {
  101.         /* 让第二列在主轴居中 */
  102.         justify-content: center;
  103.       }
  104.       /* 第六个用两列就可以了 */
  105.       .sixth-face {
  106.         display: flex;
  107.         justify-content: space-between;
  108.       }
  109.       .sixth-face > .column {
  110.         display: flex;
  111.         justify-content: space-between;
  112.         /* 主轴方向调整成列,根上面第五个一样 */
  113.         flex-direction: column;
  114.       }
  115.     </style>
  116.   </head>
  117.   <body>
  118.     <div class="first-face">
  119.       <div class="pip">1</div>
  120.     </div>
  121.     <div class="second-face">
  122.       <div class="pip">1</div>
  123.       <div class="pip">2</div>
  124.     </div>
  125.     <div class="third-face">
  126.       <div class="pip">1</div>
  127.       <div class="pip">2</div>
  128.       <div class="pip">3</div>
  129.     </div>
  130.     <div class="fourth-face">
  131.       <div class="column">
  132.         <div class="pip">1</div>
  133.         <div class="pip">2</div>
  134.       </div>
  135.       <div class="column">
  136.         <div class="pip">3</div>
  137.         <div class="pip">4</div>
  138.       </div>
  139.     </div>
  140.     <div class="fivth-face">
  141.       <div class="column">
  142.         <div class="pip">1</div>
  143.         <div class="pip">2</div>
  144.       </div>
  145.       <div class="column">
  146.         <div class="pip">3</div>
  147.       </div>
  148.       <div class="column">
  149.         <div class="pip">4</div>
  150.         <div class="pip">5</div>
  151.       </div>
  152.     </div>
  153.     <div class="sixth-face">
  154.       <div class="column">
  155.         <div class="pip">1</div>
  156.         <div class="pip">2</div>
  157.         <div class="pip">3</div>
  158.       </div>
  159.       <div class="column">
  160.         <div class="pip">4</div>
  161.         <div class="pip">5</div>
  162.         <div class="pip">6</div>
  163.       </div>
  164.     </div>
  165.   </body>
  166. </html>

上个运行效果看看

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！

  • Back top