简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >1223培训记录及作业

1223培训记录及作业

建国
建国原创
2019年12月24日 13:17:39874浏览

flex布局

1. flex是什么

  • flex:弹性布局
  • flex兼容性没问题

2. flex解决了什么问题

  • 块元素的垂直居中
  • 元素在窗口中的自动伸缩，适应容器大小的变化，特别适合移动端布局

3. flex布局的角色有哪些

  • 只有二级：父级和子级
  • 父元素：flex容器(container)
  • 子元素：flex项目或flex元素*(item)

4. flex项目的布局方向

  • flex是一维布局：项目要么水平排列，要么垂直排列，任何时候只能沿一个方向排列
  • flex项目的排列方向称为主轴，排列方式有两种，所以主轴也有两种：水平/行轴、垂直/纵轴
  • 与主轴对应的轴称为交叉轴或副轴、侧轴

5. 可以用在flex容器上的属性有哪些

  • flex-direction:设置容器中的主轴方向，默认为行轴，有两个选项：row和column
  • flex-wrap:设置元素是否允许换行，默认不换行，有两个选项：wrap和nowrap
  • flex-flow:是上面两个属性的简写，第一个参数是主轴方向，第二个参数是否允许换行
  • justify-content:设置容器中的项目在主轴上的对齐方式，有三个选项：flex-start、flex-end和center,默认为flex-start;另外还可以可以分配主轴上的剩余空间，有三个选项：space-between、space-around和space-evenly
  • align-items:项目在单行容器在交叉轴上的排列方式，有三个选项：flex-start、flex-end和center,默认为flex-start
  • align-content:项目在多行容器在交叉轴上的排列方式，参数及意义与justify-content相同

1220作业总结

  1. 没有看老师给的素材就开始做，增加了工作量，效果还不好，很多效果没有做上，比如：logo的鼠标效果；顶部右侧快速入口的鼠标效果
  2. 过多的使用float，就像老师说的：float是魔鬼，能不用就不用，容易造成布局错乱，兼容性差
  3. 学到了两个知识点：
  • +选择相邻元素：input[type='search'] + label表示input相邻的label元素
  • img图片下部分有空白，可以用display:block或者font-size:0去除
  1. 有个问题老师可能没看到：中部菜单右侧的文字部分，宽度都设置25%，使用float:left时，一行能显示4个，两行正好显示8个，而使用display:inline-block时，一行只能显示3个，8个分成了3行，display:inline-block有什么特殊之处？

1223作业

代码练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex练习</title>
  6.     <style>
  7.         .container{
  8.             display: flex;
  9.             width: 620px;
  10.             /*border:2px dashed lightblue;*/
  11.             background-color: gray;
  12.             box-sizing: border-box;
  13.         }
  14.         .item{
  15.             width: 100px;
  16.             height: 50px;
  17.             border:1px dashed red;
  18.             background-color: lightgreen;
  19.             box-sizing: border-box;
  20.             text-align: center;
  21.             line-height: 50px;
  22.         }
  23.         .container.demo2{ /**允许换行**/
  24.             height: 200px;
  25.             flex-wrap: wrap;
  26.         }
  27.         .container.demo3{ /**纵轴换行**/
  28.             height: 200px;
  29.             flex-flow:column wrap;
  30.         }
  31.         .container.demo4{ /**居中对齐方式**/
  32.             height: 200px;
  33.             flex-flow:row wrap;
  34.             justify-content: center;
  35.         }
  36.         .container.demo5{ /**右对齐方式**/
  37.             height: 200px;
  38.             flex-flow:row wrap;
  39.             justify-content: flex-end;
  40.         }
  41.         .container.demo6{ /**间距**/
  42.             height: 200px;
  43.             flex-flow:row wrap;
  44.             justify-content: space-around;
  45.         }
  46.         .container.demo7{ /**间距**/
  47.             height: 200px;
  48.             flex-flow:row wrap;
  49.             justify-content: space-between;
  50.         }
  51.         .container.demo8{ /**纵轴间距**/
  52.             height: 200px;
  53.             flex-flow:column wrap;
  54.             justify-content: space-evenly;
  55.         }
  56.         .container.demo9{ /**副轴多行**/
  57.             height: 200px;
  58.             flex-flow:row wrap;
  59.             justify-content: space-between;
  60.             align-content: space-evenly;
  61.         }
  62.         .container.demo10{ /**副轴单行**/
  63.             height: 200px;
  64.             flex-flow:row wrap;
  65.             justify-content: space-between;
  66.             align-items: center;
  67.         }
  68.     </style>
  69. </head>
  70. <body>
  71.     <h1>demo1:行轴不换行</h1>
  72.     <div class="container demo1">
  73.         <span class="item">1</span>
  74.         <span class="item">2</span>
  75.         <span class="item">3</span>
  76.         <span class="item">4</span>
  77.         <span class="item">5</span>
  78.         <span class="item">6</span>
  79.         <span class="item">7</span>
  80.         <span class="item">8</span>
  81.     </div>
  82.     <hr>
  83.     <h1>demo2:行轴换行</h1>
  84.     <div class="container demo2">
  85.         <span class="item">1</span>
  86.         <span class="item">2</span>
  87.         <span class="item">3</span>
  88.         <span class="item">4</span>
  89.         <span class="item">5</span>
  90.         <span class="item">6</span>
  91.         <span class="item">7</span>
  92.         <span class="item">8</span>
  93.     </div>
  94.     <hr>
  95.     <h1>demo3:flex-flow方式</h1>
  96.     <div class="container demo3">
  97.         <span class="item">1</span>
  98.         <span class="item">2</span>
  99.         <span class="item">3</span>
  100.         <span class="item">4</span>
  101.         <span class="item">5</span>
  102.         <span class="item">6</span>
  103.         <span class="item">7</span>
  104.         <span class="item">8</span>
  105.     </div>
  106.     <hr>
  107.     <h1>demo4:对齐方式</h1>
  108.     <div class="container demo4">
  109.         <span class="item">1</span>
  110.         <span class="item">2</span>
  111.         <span class="item">3</span>
  112.         <span class="item">4</span>
  113.         <span class="item">5</span>
  114.         <span class="item">6</span>
  115.         <span class="item">7</span>
  116.         <span class="item">8</span>
  117.     </div>
  118.     <hr>
  119.     <h1>demo5:右对齐方式</h1>
  120.     <div class="container demo5">
  121.         <span class="item">1</span>
  122.         <span class="item">2</span>
  123.         <span class="item">3</span>
  124.         <span class="item">4</span>
  125.         <span class="item">5</span>
  126.         <span class="item">6</span>
  127.         <span class="item">7</span>
  128.         <span class="item">8</span>
  129.     </div>
  130.     <hr>
  131.     <h1>demo6:间距</h1>
  132.     <div class="container demo6">
  133.         <span class="item">1</span>
  134.         <span class="item">2</span>
  135.         <span class="item">3</span>
  136.         <span class="item">4</span>
  137.         <span class="item">5</span>
  138.         <span class="item">6</span>
  139.         <span class="item">7</span>
  140.         <span class="item">8</span>
  141.     </div>
  142.     <hr>
  143.     <h1>demo7:间距</h1>
  144.     <div class="container demo7">
  145.         <span class="item">1</span>
  146.         <span class="item">2</span>
  147.         <span class="item">3</span>
  148.         <span class="item">4</span>
  149.         <span class="item">5</span>
  150.         <span class="item">6</span>
  151.         <span class="item">7</span>
  152.         <span class="item">8</span>
  153.     </div>
  154.     <hr>
  155.     <h1>demo8:纵轴间距</h1>
  156.     <div class="container demo8">
  157.         <span class="item">1</span>
  158.         <span class="item">2</span>
  159.         <span class="item">3</span>
  160.         <span class="item">4</span>
  161.         <span class="item">5</span>
  162.         <span class="item">6</span>
  163.         <span class="item">7</span>
  164.         <span class="item">8</span>
  165.     </div>
  166.     <hr>
  167.     <h1>demo9：行轴主轴，副轴多行排列方式</h1>
  168.     <div class="container demo9">
  169.         <span class="item">1</span>
  170.         <span class="item">2</span>
  171.         <span class="item">3</span>
  172.         <span class="item">4</span>
  173.         <span class="item">5</span>
  174.         <span class="item">6</span>
  175.         <span class="item">7</span>
  176.         <span class="item">8</span>
  177.     </div>
  178.     <hr>
  179.     <h1>demo10：行轴主轴，副轴单行排列方式</h1>
  180.     <div class="container demo9">
  181.         <span class="item">1</span>
  182.         <span class="item">2</span>
  183.         <span class="item">3</span>
  184.         <span class="item">4</span>
  185.         <span class="item">5</span>
  186.     </div>
  187. </body>
  188. </html>

属性复习

上一条：git太大无法下载的问题解决下一条：flex布局——子元素定位篇--12-23作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多