search

博客列表 >12月23，关于FLEX弹性盒子的初识及基本的运用方式

12月23，关于FLEX弹性盒子的初识及基本的运用方式

曾
曾原创
2019年12月24日 20:44:38835浏览

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的内容，背下了一些属性单词以及用法，学习的好方法（笨方法）就是多写，多看，多读，只要做得多了，最后总有收获！

上一条：2019年12月20日课后作业下一条：jquery属性选择器及表单对象选择-第九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多