Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 12月23，关于FLEX弹性盒子的初识及基本的运用方式
Blogger Information
Blog 30
fans 0
comment 1
visits 24015
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
12月23，关于FLEX弹性盒子的初识及基本的运用方式
曾
Original
833 people have browsed it

12月20日作业用才学的FLEX弹性盒子，重新写了一次

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="font/iconfont.css">
  6.     <title>Title</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             font-size: 14px;
  12.         }
  13.         img{
  14.             display: block;
  15.         }
  16.         a{
  17.             margin-right: 10px;
  18.             text-decoration: none;
  19.             color: black;
  20.         }
  21.         /*A标签鼠标事件*/
  22.         a:hover{
  23.             color: red;
  24.         }
  26.         /*父级元素变为弹性盒子*/
  27.         .box{
  28.             margin: auto;
  29.             width: 1300px;
  30.             flex-direction: row;
  31.             display: flex;
  32.             flex-wrap: wrap;
  33.         }
  34.         div:not(.box){
  35.             margin-top: 10px;
  36.         }
  38.         /*设置LOGO 搜索框 以及快速入口的大小，以方便换行*/
  39.         .box > div:nth-child(-n+3){
  40.             width: 400px;
  41.             /*line-height: 76px;*/
  42.             align-items: center;
  43.         }
  45.         /*设置了快速入口内容的对齐方式*/
  46.         .box>div:nth-child(3){
  47.             text-align: right;
  48.         }
  50.         /*把.box里面的最后一个item项目设置为弹性盒子，以方便图片排版*/
  51.         .box>div:nth-last-child(1){
  52.             display: flex;
  53.         }
  54.         .box>div:nth-last-child(1) img:nth-child(2){
  55.             margin-left: 2px;
  56.         }
  58.         /*引入字库设置*/
  59.         .icon-huiyuan1 {
  60.             margin-left: 10px;
  61.             margin-right: 10px;
  62.         }
  63.         .icon-sousuo2 {
  64.             font-size: 20px;
  65.         }
  66.         .icon-huiyuan1{
  67.             font-size: 35px;
  68.         }
  69.         .icon-DOC{
  70.             font-size: 40px;
  71.             color: red;
  72.         }
  74.         /*搜索框设置*/
  75.         input,button{
  76.             margin-right: 20px;
  77.         }
  78.         input{
  79.             height: 30px;
  80.             width: 300px;
  81.             border: 1px solid ;
  82.             border-radius: 10px;
  83.             outline: none;
  84.         }
  85.         button{
  86.             border: 0;
  87.             background-color: transparent;
  88.             padding: 0;
  89.             margin-left: -45px;
  90.         }
  92.         /*把父级元素下的第四个DIV项目设置为弹性盒子，方便管理里面的内容*/
  93.         .box-4{
  94.             display: flex;
  95.             flex-direction: row;
  96.             flex-wrap: wrap;
  97.             width: inherit;
  98.         }
  100.         /*父级元素下第四个DIV项目的具体设置*/
  101.         .box-4 > span:nth-child(2){
  102.             width: 30px;
  103.             border-right: 1px solid lightgray;
  104.         }
  105.         .box-4 > span:nth-child(3){
  106.             margin-left: 10px;
  107.             width: 180px;
  108.         }
  109.         .box-4 > span:nth-child(5){
  110.             width: 30px;
  111.             border-right: 1px solid lightgray;
  112.         }
  113.         .box-4 > span:nth-child(6){
  114.             margin-left: 10px;
  115.             width: 180px;
  116.         }
  117.         .box-4 > span:nth-child(8){
  118.             width: 30px;
  119.             border-right: 1px solid lightgray;
  120.         }
  121.         .box-4 > span:nth-child(9){
  122.             margin-left: 10px;
  123.             width: 180px;
  124.         }
  125.         .box-4 > span:nth-child(11){
  126.             width: 30px;
  127.             border-right: 1px solid lightgray;
  128.         }
  129.         .box-4 > span:nth-child(12){
  130.             margin-left: 10px;
  131.             width: 180px;
  132.         }
  133.     </style>
  134. </head>
  135. <body>
  136. <div class="box">
  137.     <div>
  138.                 <img src="../预习资料/flex弹性布局复习资料/flex/简介/demo/logo.png" alt="">
  139.     </div>
  140.     <div style="text-align: right;"><input type="search"><button class="iconfont icon-sousuo2"></button></div>
  141.     <div>
  142.         <a href="" class="iconfont icon-huiyuan1"></a>
  143.         <a href="" class="iconfont icon-huiyuan1"></a>
  144.         <a href="" class="iconfont icon-huiyuan1"></a>
  145.         <a href="" class="iconfont icon-huiyuan1"></a>
  146.         <a href="" class="iconfont icon-huiyuan1"></a>
  147.         <a href="" class="iconfont icon-huiyuan1"></a>
  148.     </div>
  150.     <div class="box-4">
  151.         <span class="iconfont icon-DOC"></span>
  152.         <span>咨询学习</span>
  153.         <span>
  154.                 <span><a href="">器材</a></span>
  155.                 <span><a href="">大师</a></span>
  156.                 <span><a href="">学员</a></span>
  157.                 <span><a href="">实战</a></span>
  158.                 <span><a href="">大赛</a></span>
  159.                 <span><a href="">裤子</a></span>
  160.                 <span><a href="">影视</a></span>
  161.                 <span><a href="">其他</a></span>
  162.         </span>
  163.         <span class="iconfont icon-DOC"></span>
  164.         <span>咨询学习</span>
  165.         <span>
  166.                 <span><a href="">器材</a></span>
  167.                 <span><a href="">大师</a></span>
  168.                 <span><a href="">学员</a></span>
  169.                 <span><a href="">实战</a></span>
  170.                 <span><a href="">大赛</a></span>
  171.                 <span><a href="">裤子</a></span>
  172.                 <span><a href="">影视</a></span>
  173.                 <span><a href="">其他</a></span>
  174.         </span>
  175.         <span class="iconfont icon-DOC"></span>
  176.         <span>咨询学习</span>
  177.         <span>
  178.                 <span><a href="">器材</a></span>
  179.                 <span><a href="">大师</a></span>
  180.                 <span><a href="">学员</a></span>
  181.                 <span><a href="">实战</a></span>
  182.                 <span><a href="">大赛</a></span>
  183.                 <span><a href="">裤子</a></span>
  184.                 <span><a href="">影视</a></span>
  185.                 <span><a href="">其他</a></span>
  186.         </span>
  187.         <span class="iconfont icon-DOC"></span>
  188.         <span>咨询学习</span>
  189.         <span>
  190.                 <span><a href="">器材</a></span>
  191.                 <span><a href="">大师</a></span>
  192.                 <span><a href="">学员</a></span>
  193.                 <span><a href="">实战</a></span>
  194.                 <span><a href="">大赛</a></span>
  195.                 <span><a href="">裤子</a></span>
  196.                 <span><a href="">影视</a></span>
  197.                 <span><a href="">其他</a></span>
  198.         </span>
  199.     </div>
  200.     <div>
  201.         <img src="images/1.jpg" alt="">
  203.         <img src="images/banner-right.jpg" height="320" width="295"/>
  204.     </div>
  205. </div>
  206. </body>
  207. </html>

附上代码，学了就自己做了一次，感觉代码还是有点臃肿，一些内容在盒子里面的精准移动与对齐还不太清楚，在目前的一些知识上感觉在内容上的移动，还有点欠缺，比如INPUT标签与搜索图片的移动上尝试了很久，才把搜索图标移动到INPUT框里面。

![![]



![]



以上是今天对于各FLEX属性的一些尝试，感觉有一定了解，但是还需要更多的实战，才能更加明白具体的使用方法




最后还复习了一下FLEX的内容，背下了一些属性单词以及用法，学习的好方法（笨方法）就是多写，多看，多读，只要做得多了，最后总有收获！

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