Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12.23作业
Blogger Information
Blog 18
fans 0
comment 0
visits 10853
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
12.23作业
- 迷舍人
Original
713 people have browsed it

先说一下总结把

12.20的导航作业 一开始觉得挺难的 然后第一次做的时候不知道谁和谁定位，然后自己看了别的同学的代码做参考 定位不准确 然后就是在浏览器审查元素中添加 样式 来看看效果 ， 现在可以用，但是还是欠佳

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex</title>
  6.     <style>
  7.         .container{
  8.             border: 1px dashed;
  9.             /*只要加了padding border 必须要加box-sizing*/
  10.             box-sizing: border-box;
  11.             background-color: #b3d4fc;
  12.         }
  13.         .item{
  14.             width: 100px;
  15.             height: 50px;
  16.             background-color: #63a35c;
  17.             border: 1px red dashed;
  18.         }
  19.         .container{
  20.             /*转为弹性盒子*/
  21.             display: flex;
  22.             /*子元素全部转为行内块元素，水平排列可以设置宽和高*/
  23.         }
  24.         .container{
  25.             /*1设置容器中的主轴方向*   水平  垂直 */
  26.             /*flex-direction: row;*/
  27.             /*flex-direction: column;*/
  29.             /*2是否允许创建多个容器 一行排不下 是否允许换行显示*/
  30.             /*不允许换行*/
  31.             /*flex-wrap: nowrap;*/
  32.             /*允许换行*/
  33.             /*flex-wrap: wrap;*/
  35.             /*3 flex-flow是上面两个的简写  第一个是主轴的方向 第二个是是否换行显示*/
  36.             flex-flow: row wrap;
  38.             /*4设置容器中的项目在主轴上的对齐方式  左对齐 右对齐  居中对齐*/
  39.             /*justify-content: flex-start;*/
  40.             /*justify-content: flex-end;*/
  41.             /*justify-content: center;*/
  43.             /*分配主轴上的剩余空间  两端对齐 分散对齐 平均对齐*/
  44.             /*justify-content: space-between;*/
  45.             /*justify-content: space-around;*/
  46.             justify-content: space-evenly;
  48.             /*5项目在交叉轴上的排列方式*/
  49.             height: 200px;
  50.             /*在上部显示*/
  51.             /*align-items: flex-start;*/
  52.             /*在底部显示*/
  53.             /*align-items: flex-end;*/
  54.             /*在居中显示*/
  55.             /*align-items: center;*/
  57.             /*6设置项目在多行容器交叉轴上的对齐方式*/
  58.             /*两端对齐*/
  59.             /*align-content: space-between;*/
  60.             /*分散对齐*/
  61.             /*align-content: space-around;*/
  62.             /*平均对齐*/
  63.             align-content: space-evenly;
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <div class="container">
  69.         <span class="item">1</span>
  70.         <span class="item">2</span>
  71.         <span class="item">3</span>
  72.         <span class="item">4</span>
  73.         <span class="item">5</span>
  74.         <span class="item">6</span>
  75.         <span class="item">7</span>
  76. <!--        <span class="item">8</span>-->
  77. <!--        <span class="item">9</span>-->
  78. <!--        <span class="item">10</span>-->
  79. <!--        <span class="item">11</span>-->
  80.     </div>
  81. </body>
  82. </html>




Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：才学了几天, 不要着急
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