search

博客列表 >12月23日 学号：478291 弹性布局

12月23日 学号：478291 弹性布局

Lin__
Lin__原创
2019年12月25日 00:47:21784浏览

12月20日作业分析总结：

  • 总结：在进行页面编写时，首先要根据最终的效果图对页面元素进行区域的划分。分析页面包含的元素，再考虑每个区域应当使用什么HTML标签。填入网页的内容，然后根据最终效果图进行样式的编写（先调整位置，再编写具体的样式）。注意：尽量使用类选择器而非id选择器，同时注意尽可能少使用浮动来进行页面的布局。样式一致的元素尽可能使用统一样式
  • 存在的问题：元素的间隔和大小固定写死，页面适应不够好。头部图标大小不完全一致。代码缺少必要的注释

2.Flex弹性布局

  • 布局的传统解决方案，基于盒子模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，如垂直居中。 Flex能够较好的解决这些问题。

  • 使用：设置display属性为flex。注意， 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

  • 使用flex布局的元素称为容器（container），所包含的子元素为项目（item）。
  • 容器的属性
序号 属性 属性值 描述
1 flex-direction row（水平方向，从左往右）、row-reverse（水平方向，从右往左）、column（垂直方向，从上往下）、column-reverse（垂直方向，从下往上） 设置项目的排列方向
2 flex-wrap nowrap（不换行）、wrap（第一行在上方）、wrap-reverse（第一行在下方） 设置换行的方式
3 flex-flow row（项目的排列方向） nowrap（换行的方式） flex-direction属性和flex-wrap属性的简写形式
4 justify-content flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐，项目之间的间隔都相等）、space-around（每个项目两侧的间隔相等） 在主轴上的对齐方式
5 align-items flex-start（交叉轴的起点对齐）、flex-end（交叉轴的终点对齐）、center（交叉轴的中点对齐）、baseline（项目的第一行文字的基线对齐）、stretch（如果项目未设置高度或设为auto，将占满整个容器的高度） 在交叉轴上的对齐方式
6 align-content flex-start（与交叉轴的起点对齐）、flex-end（与交叉轴的终点对齐）、center（与交叉轴的中点对齐）、space-between（与交叉轴两端对齐，轴线之间的间隔平均分布）、space-around（每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍）、stretch（轴线占满整个交叉轴） 多根轴线的对齐方式

示例代码：

HTML代码：

  1. <div class="container-1">
  2.     <span class="item">1</span>
  3.     <span class="item">2</span>
  4.     <span class="item">3</span>
  5.     <span class="item">4</span>
  6.     <span class="item">5</span>
  7.     <span class="item">6</span>
  8.     <span class="item">7</span>
  9.     <span class="item">8</span>
  10.     <span class="item">9</span>
  11.     <span class="item">10</span>
  12. </div>

CSS代码：

1.flex-direction属性

  1. <style>
  2.     /*容器*/
  3.     .container-1{
  4.         width:500px;
  5.         display:flex;
  6.         border:1px solid red;
  7.         /*项目的排列方向*/
  8.         flex-direction:row;/*水平方向，从左往右*/
  9.     }
  10.     /*项目*/
  11.     .item{
  12.         background-color:pink;
  13.         width:50px;
  14.     }
  15. </style>

运行效果：

  1. <style>
  2.     /*容器*/
  3.     .container-1{
  4.         width:500px;
  5.         display:flex;
  6.         border:1px solid red;
  7.         /*项目的排列方向*/
  8.         flex-direction:row-reverse;/*水平方向，从右往左*/
  9.     }
  10.     /*项目*/
  11.     .item{
  12.         background-color:pink;
  13.         width:50px;
  14.     }
  15. </style>

运行结果：

  1. <style>
  2.     /*容器*/
  3.     .container-1{
  4.         width:500px;
  5.         display:flex;
  6.         border:1px solid red;
  7.         /*项目的排列方向*/
  8.         flex-direction:column;/*垂直方向，从上往下*/
  9.     }
  10.     /*项目*/
  11.     .item{
  12.         background-color:pink;
  13.         width:50px;
  14.     }
  15. </style>

运行结果：

  1. <style>
  2.     /*容器*/
  3.     .container-1{
  4.         width:500px;
  5.         display:flex;
  6.         border:1px solid red;
  7.         /*项目的排列方向*/
  8.         flex-direction:column-reverse;/*垂直方向，从下往上*/
  9.     }
  10.     /*项目*/
  11.     .item{
  12.         background-color:pink;
  13.         width:50px;
  14.     }
  15. </style>

运行结果：

  • flex-wrap属性
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*项目的排列方向*/
    8.       flex-direction:row;/*垂直方向，从下往上*/
    9.       /*2.flex-wrap:是否允许多行以及换行的方式*/
    10.       flex-wrap:nowrap;/*不换行*/
    11.   }
    12.   /*项目*/
    13.   .item{
    14.       background-color:pink;
    15.       width:50px;
    16.   }
    17. </style>
    运行结果：
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*项目的排列方向*/
    8.       flex-direction:row;/*垂直方向，从下往上*/
    9.       /*2.flex-wrap:是否允许多行以及换行的方式*/
    10.       flex-wrap:wrap;/*第一行在上方*/
    11.   }
    12.   /*项目*/
    13.   .item{
    14.       background-color:pink;
    15.       width:50px;
    16.   }
    17. </style>
    运行结果：
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*项目的排列方向*/
    8.       flex-direction:row;/*垂直方向，从下往上*/
    9.       /*2.flex-wrap:是否允许多行以及换行的方式*/
    10.       flex-wrap:wrap-reverse;/*第一行在下方*/
    11.   }
    12.   /*项目*/
    13.   .item{
    14.       background-color:pink;
    15.       width:50px;
    16.   }
    17. </style>
    运行结果：
  • flex-flow属性
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*3.flex-flow:flex-direction与flex-wrap:nowrap的简写*/
    8.       flex-flow:row nowrap;/*第一个值为flex-direction的属性值，第二个值为flex-wrap的属性值*/
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
  • justify-content属性
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*4.justify-content:在主轴上的对齐方式*/
    8.       justify-content:flex-start;/*左对齐*/
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*4.justify-content:在主轴上的对齐方式*/
    8.       justify-content:flex-end;/*右对齐*/
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*4.justify-content:在主轴上的对齐方式*/
    8.       justify-content:center;/*居中*/
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*4.justify-content:在主轴上的对齐方式*/
    8.       justify-content:space-around;/*每个项目两侧的间隔相等*/
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
  • align-items属性
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*5.align-items:在交叉轴上的对齐方式*/
    8.       align-items:flex-start;/*交叉轴的起点对齐*/
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*5.align-items:在交叉轴上的对齐方式*/
    8.       align-items:flex-end;/*交叉轴的终点对齐*/
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*5.align-items:在交叉轴上的对齐方式*/
    8.       align-items:center;/*交叉轴的中点对齐*/
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
  • lign-content属性
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*6.align-content:多根轴线的对齐方式*/
    8.       align-content:space-between;/*与交叉轴两端对齐，轴线之间的间隔平均分布*/
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*6.align-content:多根轴线的对齐方式*/
    8.       align-content:space-around;/*根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍*/
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
    1. <style>
    2.   /*容器*/
    3.   .container-1{
    4.       width:500px;
    5.       display:flex;
    6.       border:1px solid red;
    7.       /*6.align-content:多根轴线的对齐方式*/
    8.       align-content:space-evenly;
    9.   }
    10.   /*项目*/
    11.   .item{
    12.       background-color:pink;
    13.       width:50px;
    14.   }
    15. </style>
    运行结果：
上一条：2020作业下一条：position的简单布局（12.20作业）--PHP培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多