Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS_(12.23)作业_Flex盒模式
Blogger Information
Blog 12
fans 0
comment 0
visits 7915
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
CSS_(12.23)作业_Flex盒模式
ys899
Original
672 people have browsed it

第一种 Flex盒模式 属性

CSS样式表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Flex布局属性</title>
  6.     <style>
  7.         /*公共样式*/
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             font-size: 14px;
  12.             /*添加一个轮廓线*/
  13.             outline: 1px dashed red;
  14.         }
  15.         .container{
  16.             border: 1px dashed;
  17.             /*盒子加了padding，border;必须设置box-sizing，防止盒子变大*/
  18.             box-sizing: border-box;
  19.             background-color: #55a532;
  20.         }
  21.         .item{
  22.             width: 200px;
  23.             height: 50px;
  24.             border: 1px dashed;
  25.             background-color: #795da3;
  26.         }
  27.         .container {
  28.             /*转为flex弹性盒子*/
  29.             display: flex;
  31.             /*1、flex-direaction 容器主轴方向*/
  32.             /*flex-direction: column;*/
  33.             flex-direction: row; //默认
  34.             /*2、flex-wrap 是否可多行显示*/
  35.             /*flex-wrap: wrap;*/
  36.             flex-wrap: nowrap; //默认
  37.             /*3. flex-flow: 主轴和换行的简写*/
  38.             /*flex-flow: row nowrap;*/
  39.             /*4、设置容器中的项目在主轴上的对齐方式*/
  40.             /*justify-content: flex-start;*/
  41.             /*justify-content: flex-end;*/
  42.             /*justify-content: center;*/
  43.             /*可以分配主轴上剩余空间*/
  44.             /*二端对齐*/
  45.             justify-content: space-between;
  46.             /*分散对齐*/
  47.             /*justify-content: space-around;*/
  48.             /*平均对齐*/
  49.             /*justify-content: space-evenly;*/
  51.             /*5. 项目在交叉轴上的排列方式*/
  52.             height: 200px;
  54.             /*align-items: flex-start;*/
  55.             align-items: flex-end;
  56.             /*align-items: center;*/
  58.             /*6. align-content: 设置项目在多行容器交叉轴上的对齐方式*/
  60.             align-content: space-between;
  61.             /*align-content: space-around;*/
  62.             /*align-content: space-evenly;*/
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div class="container">
  68.         <span class="item">A</span>
  69.         <span class="item">B</span>
  70.         <span class="item">C</span>
  71.         <span class="item">D</span>
  72.         <span class="item">E</span>
  73.         <span class="item">F</span>
  74.         <span class="item">G</span>
  75.         <span class="item">H</span>
  76.         <span class="item">I</span>
  77.     </div>
  78. </body>
  79. </html>

12.20作业布局的一点心得体会

css说实话从来没有认真的深入了解过，每次涉及到页面的样式调整，遇到什么问题就百度一堆页面，也没有总结没有思考。比如说左右浮动，就用float，加颜色就是用color，文本框实现圆角显示也是百度。总之没有做到精细化处理，页面效果也只是大致看看，兼容性更不要提。
12月20的作业看似非常简单，就是页头的布局和样式调整，但是却用到浮动+元素的定位。没有认真思考过CSS，一时半会也是难以实现效果。
为难过才思考，思考过才有疑问，昨晚Peter Zhu老师的从无到有的页面实现，看似行云流水，确实历年来的经验积累，冰冻三日非一日之寒。从页面的元素构建、CSS样式实现到PHPStorm的工具软件快捷键的灵活运用，足见其平常的知识积累非常全面。
学习看的不是结果，重点是结果之前的努力过程，外行看笑话，内行看门道，愿以后的学习也能将页面元素作为音符，phpstorm作为钢琴，css作业音谱，弹奏出悦耳的琴声。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：过奖了... 能写这么顺, 原因很简单, 写得太多了... 如果想彻底掌握一个知识点, 就得代码写到吐, 当然你们暂时不必这样, 因为这是我的工作.... 任何一门技术, 成为一个行业, 一定有自己的潜规则, 不能小看, 从现在起, 重视css, 还得来.... 作业中没有手写部分, 这并不符合要求, 本来是要退回的, 考虑到总结写的都是肺腑之言, 就放你一马, 下次一定要看清要求, 补上手写部分...
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