search

博客列表 >1223作业Flex布局之弹性容器可以设置的六类属性-第十期PHP线上培训班

1223作业Flex布局之弹性容器可以设置的六类属性-第十期PHP线上培训班

Dseven
Dseven原创
2019年12月24日 00:45:281345浏览

1.当容器display为flex时，可设置的6种属性

1.1flex-direction

用来设置主轴方向

  1.  /*!*flex-direction是用来设置主轴的方向*/
  2.         /*row代表inline方向，column代表block方向。默认值为row*/
  3.         .container-1{
  4.             flex-direction: column;/*将主轴从inline方向调整为block方向*!*/
  5.         }

1.2flex-wrap

容器内项目是否换行

  1. /*flex-wrap是用来设置项目是否换行*/
  2.         /*nowrap是默认值代表不换行，wrap代表换行*/
  3.         .container-2{
  4.             flex-wrap: wrap;/*设置项目换行*/
  5.         }

1.3flex-flow

设置方向和是否换行的合体简写版

  1.  /*flex-flow是flex-direction和flex-wrap两个的简写方式*/
  2.         /*flex-flow接受两个值，第一个值代表主轴方向，第二个值代表是否换行*/
  3.         .container-3{
  4.             flex-flow: column wrap;
  5.         }

1.4justify-content

设置主轴方向上项目的空间排布

  1. /*justify-content用来设置在只有一条主轴的情况下项目的空间分布情况*/
  2.         /*flex-start紧贴主轴起始点*/
  3.         /*flex-end紧贴主轴结束点*/
  4.         /*center居中*/
  5.         /*space-between两端对齐*/
  6.         /*space-around分散对齐，两端的空隙为中间空隙的一半*/
  7.         /*space-evenly分散对齐，两端的空隙和中间一样*/
  8.         .container-4{
  9.             justify-content: space-evenly;
  10.         }

1.5align-items

设置交叉轴上项目的空间排布

  1. /*align-items用来设置项目在交叉轴上的对齐方式*/
  2.             /*flex-start紧贴交叉轴起始点*/
  3.             /*flex-end紧贴交叉轴结束点*/
  4.             /*center在交叉轴方向居中*/
  5.             /*space-between在交叉轴方向两端对齐*/
  6.             /*space-around在交叉轴方向分散对齐，两端的空隙为中间空隙的一半*/
  7.             /*space-evenly在交叉轴方向分散对齐，两端的空隙和中间一样*/
  8.         .container-5{
  9.             align-items: flex-end;
  10.         }

1.6align-content

设置项目换行后空间排布

  1. /*align-content用来设置有多条主轴时的空间排布*/
  2.         .container-6{
  3.             flex-wrap: wrap;
  4.            align-content: space-around; /*每行元素离上下两边的距离为中间间隔的一半*/
  5.             justify-content: space-between;
  6.         }

2.代码演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Flex容器属性功能演示1223</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.             font-size: 20px;
  11.         }
  12.         /*初始化6个容器框*/
  13.         body>div{
  14.             display: flex;
  15.             width: 500px;
  16.             height: 500px;
  17.             background-color: lightgreen;
  18.             margin: 10px auto;
  19.         }
  20.         /*初始化容器框中的项目*/
  21.         .item{
  22.             width: 80px;
  23.             height: 80px;
  24.             background-color: lightcoral;
  25.             border: 1px solid lightblue;
  26.             box-sizing: border-box;
  27.         }
  29.         /*!*flex-direction是用来设置主轴的方向*/
  30.         /*row代表inline方向，column代表block方向。默认值为row*/
  31.         .container-1{
  32.             flex-direction: column;/*将主轴从inline方向调整为block方向*!*/
  33.         }
  35.         /*flex-wrap是用来设置项目是否换行*/
  36.         /*nowrap是默认值代表不换行，wrap代表换行*/
  37.         .container-2{
  38.             flex-wrap: wrap;/*设置项目换行*/
  39.         }
  41.         /*flex-flow是flex-direction和flex-wrap两个的简写方式*/
  42.         /*flex-flow接受两个值，第一个值代表主轴方向，第二个值代表是否换行*/
  43.         .container-3{
  44.             flex-flow: column wrap;
  45.         }
  47.         /*justify-content用来设置在只有一条主轴的情况下项目的空间分布情况*/
  48.         /*flex-start紧贴主轴起始点*/
  49.         /*flex-end紧贴主轴结束点*/
  50.         /*center居中*/
  51.         /*space-between两端对齐*/
  52.         /*space-around分散对齐，两端的空隙为中间空隙的一半*/
  53.         /*space-evenly分散对齐，两端的空隙和中间一样*/
  54.         .container-4{
  55.             justify-content: space-evenly;
  56.         }
  58.         /*align-items用来设置项目在交叉轴上的对齐方式*/
  59.             /*flex-start紧贴交叉轴起始点*/
  60.             /*flex-end紧贴交叉轴结束点*/
  61.             /*center在交叉轴方向居中*/
  62.             /*space-between在交叉轴方向两端对齐*/
  63.             /*space-around在交叉轴方向分散对齐，两端的空隙为中间空隙的一半*/
  64.             /*space-evenly在交叉轴方向分散对齐，两端的空隙和中间一样*/
  65.         .container-5{
  66.             align-items: flex-end;
  67.         }
  69.         /*align-content用来设置有多条主轴时每行的空间排布*/
  70.         .container-6{
  71.             flex-wrap: wrap;
  72.            align-content: space-around; /*每行元素离上下两边的距离为中间间隔的一半*/
  73.             justify-content: space-between;
  74.         }
  75.     </style>
  76. </head>
  78. <body>
  79. <div class="container-1">
  80.     <div class="item">1</div>
  81.     <div class="item">2</div>
  82.     <div class="item">3</div>
  83.     <div class="item">4</div>
  84.     <div class="item">5</div>
  85.     <div class="item">6</div>
  86.     <div class="item">7</div>
  87. </div>
  88. <hr>
  89. <div class="container-2">
  90.     <div class="item">1</div>
  91.     <div class="item">2</div>
  92.     <div class="item">3</div>
  93.     <div class="item">4</div>
  94.     <div class="item">5</div>
  95.     <div class="item">6</div>
  96.     <div class="item">7</div>
  97. </div>
  98. <hr>
  99. <div class="container-3">
  100.     <div class="item">1</div>
  101.     <div class="item">2</div>
  102.     <div class="item">3</div>
  103.     <div class="item">4</div>
  104.     <div class="item">5</div>
  105.     <div class="item">6</div>
  106.     <div class="item">7</div>
  107. </div>
  108. <hr>
  109. <div class="container-4">
  110.     <div class="item">1</div>
  111.     <div class="item">2</div>
  112.     <div class="item">3</div>
  113. <!--    <div class="item">4</div>-->
  114. <!--    <div class="item">5</div>-->
  115. <!--    <div class="item">6</div>-->
  116. <!--    <div class="item">7</div>-->
  117. </div>
  118. <hr>
  119. <div class="container-5">
  120.     <div class="item">1</div>
  121.     <div class="item">2</div>
  122.     <div class="item">3</div>
  123.     <div class="item">4</div>
  124.     <div class="item">5</div>
  125.     <div class="item">6</div>
  126.     <div class="item">7</div>
  127. </div>
  128. <hr>
  129. <div class="container-6">
  130.     <div class="item">1</div>
  131.     <div class="item">2</div>
  132.     <div class="item">3</div>
  133.     <div class="item">4</div>
  134.     <div class="item">5</div>
  135.     <div class="item">6</div>
  136.     <div class="item">7</div>
  137.     <div class="item">8</div>
  139. </div>
  140. </body>
  141. </html>

3.手写笔记

4.1220大作业小结

4.1用传统方式进行网页布局常用的方法有两种，一种是table布局，一种是float+position布局。table布局工作繁琐，后期调整难度大。float+position布局相较table来说更加的方便简洁。
4.2在完成作业的过程中耗时较长的地方就是元素选择和盒子边距的控制。
4.3需要重点注意的是在使用了border之后要加上box-sizing控制盒子尺寸。
4.4在使用float时要克制，尽可能少用。
4.5margin可以设置负值来调整元素位置。
4.6图片元素存在白边，需要将其转化为block。
4.7同一标签可以定义多个class 用空格隔开就行了，如果属性不重复则样式叠加，如果属性重复则以最后面的class为准。
4.8在绝对定位时可以利用四个点来设置垂直居中，即left:0;right:0;top:0;margin:auto ;

上一条：1223作业下一条：学号:572616 -12月20日简单首页-头部显示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多