Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月23日 学号：478291 弹性布局
Blogger Information
Blog 24
fans 4
comment 0
visits 20121
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日 学号：478291 弹性布局
Lin__
Original
787 people have browsed it

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>
    运行结果：
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这个固定写死, 要区分什么场景下, 有一些元素位置是必须固定的, 毕竟你是在写PC端的网站, 不是移动端.... 移动端又会有另一套规则
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