Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 弹性布局flex知识点-PHP第十期上线班
Blogger Information
Blog 22
fans 0
comment 0
visits 11783
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
弹性布局flex知识点-PHP第十期上线班
迫
Original
582 people have browsed it

flex是网页布局方法中最实用的方法，简单，比较适合移动端网页布局，它只有父级/flex容器和子级/flex项目两个元素。它是一维布局，主轴只有一个，要么横向要么纵向，代表着排列方式只有一个。

flex容器的6个属性和功能如下


6个属性和功能实例如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex</title>
  6.     <style>
  7.         .container{
  8.             border: 1px dashed;
  9.             box-sizing: border-box;
  10.             background-color: lightskyblue;
  11.         }
  12.         .item{
  13.             width: 100px;
  14.             height: 50px;
  15.             border: 1px dashed;
  16.             background-color: wheat;
  17.             margin:  1px;
  19.         }
  20.         .container{
  21.             /*转为flex容器*/
  22.             display: flex;
  23.         }
  24.         .container{
  25.             flex-direction: column;
  26.             /*flex-wrap: ;*/
  27.             /*flex-flow: ;*/
  28.             /*justify-content: ;*/
  29.             align-items: center;
  30.             /*align-content: ;*/
  31.         }
  33.     </style>
  34. </head>
  35. <body>
  36. <div class="container">
  37.     <div class="item">1</div>
  38.     <div class="item">2</div>
  39.     <div class="item">3</div>
  40.     <div class="item">4</div>
  41.     <div class="item">5</div>
  42.     <div class="item">6</div>
  43.     <div class="item">7</div>
  44.     <div class="item">8</div>
  45. </div>
  46. </body>
  47. </html>

实现了居中垂直布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex</title>
  6.     <style>
  7.         .container{
  8.             border: 1px dashed;
  9.             box-sizing: border-box;
  10.             background-color: lightskyblue;
  11.             width: 300px;
  12.             height: 800px;
  13.         }
  14.         .item{
  15.             width: 100px;
  16.             height: 50px;
  17.             border: 1px dashed;
  18.             background-color: wheat;
  19.             margin:  1px;
  21.         }
  22.         .container{
  23.             /*转为flex容器*/
  24.             display: flex;
  25.         }
  26.         .container{
  27.             /*flex-direction: column;*/
  28.             /*flex-wrap: ;*/
  29.             flex-flow: row wrap;
  30.             justify-content: center;
  31.             /*align-items: center;*/
  32.             align-content:space-between ;
  33.         }
  35.     </style>
  36. </head>
  37. <body>
  38. <div class="container">
  39.     <div class="item">1</div>
  40.     <div class="item">2</div>
  41.     <div class="item">3</div>
  42.     <div class="item">4</div>
  43.     <div class="item">5</div>
  44.     <div class="item">6</div>
  45.     <div class="item">7</div>
  46.     <div class="item">8</div>
  47. </div>
  48. </body>
  49. </html>


实现了多行居中水平排列上下平均布局

flex的6个属性包分为设置主轴，交叉轴和换行三类
row代表为横向，column代表纵向，reverse代表反向
wrap为分行，nowrap代表不分行，当使用nowrap时，如果容器大小不够，项目会相对缩小

对齐方式有：center、left、right、space-between、space-evently、space-around等
12.20作业心得
这次作业由于种种原因，可以说是老师手把手带着写的，对于float的概念比较差，即使是课后也是看回放才对float的使用有了一个认识，学会了如何在html中调用css，对于我自己而言，现阶段是处于一个听得懂看得懂但是不会用的情况，这需要在平常多挤出时间来进行实际操作，BETTER TO GO THEN CURSE THE ROAD

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