Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 1223作业Flex布局之弹性容器可以设置的六类属性-第十期PHP线上培训班
Blogger Information
Blog 22
fans 1
comment 0
visits 20324
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
1223作业Flex布局之弹性容器可以设置的六类属性-第十期PHP线上培训班
Dseven
Original
1343 people have browsed it

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 ;

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