简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 《Flex入门体验》2019-12-23作业笔记
Blogger Information
Blog 26
fans 1
comment 1
visits 19461
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入门体验》2019-12-23作业笔记
杨凡的博客
Original
565 people have browsed it

通过老师对20号作业的讲解，针对自己的作业对比，自己使用的浮动过多，页面如果出现大小变化可能效果会错乱，书写方式不够规范，老师案例中对定位使用比较多，之前对定位理解比较模糊，通过案例加深了对定位的理解，对选择的使用也有加深，

Flex体验

传统方式布局

传统通过定位方式让盒子水平垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex初体验</title>
  6.     <style>
  7.         /*公共样式*/
  8.         .container {
  9.             width: 300px;
  10.             height: 200px;
  11.             outline: 2px dashed red;
  12.         }
  13.         .item {
  14.             width: 150px;
  15.             height: 100px;
  16.             outline: 2px dashed green;
  18.             /*文字水平居中*/
  19.             text-align: center;
  20.             /*设置行高与盒子一样后，文字可以垂直居中*/
  21.             line-height: 100px;
  22.         }
  23.         .container.traditon {
  24.             position: relative;
  25.         }
  26.         .item.traditon {
  27.             position: absolute;
  28.             top: 0;
  29.             left: 0;
  30.             bottom: 0;
  31.             right: 0;
  33.             margin: auto;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <div class="container traditon">
  39.         <div class="item traditon">传统布局</div>
  40.     </div>
  41. </body>
  42. </html>
使用flex弹性盒子布局

通过几句代码即可让盒子可以快速的水平垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex初体验</title>
  6.     <style>
  7.         /*公共样式*/
  8.         .container {
  9.             width: 300px;
  10.             height: 200px;
  11.             outline: 2px dashed red;
  12.         }
  13.         .item {
  14.             width: 150px;
  15.             height: 100px;
  16.             outline: 2px dashed green;
  18.             /*文字水平居中*/
  19.             text-align: center;
  20.             /*设置行高与盒子一样后，文字可以垂直居中*/
  21.             line-height: 100px;
  22.         }
  23.         .container.traditon {
  24.             /*转为弹性盒子*/
  25.             display: flex;
  26.             /*设置弹性盒子在水平和垂直方向上的对其方式*/
  27.             justify-content: center;
  28.             align-items: center;
  29.         }
  30.         .item.traditon {
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class="container traditon">
  37.         <div class="item traditon">传统布局</div>
  38.     </div>
  39. </body>
  40. </html>


以上案例效果一样，但是可以看出flex的代码效率更加高效，也更加方便

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：flex刚刚诞生的时候, 是布局界的大事, 颠覆了许多之前的经验
Statement of this Website
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！