简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1223培训记录及作业
Blogger Information
Blog 7
fans 0
comment 0
visits 4281
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培训记录及作业
建国
Original
868 people have browsed it

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>

属性复习

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！