search

博客列表 >文字的自动分列 flex 弹性盒子的一些使用方法

文字的自动分列 flex 弹性盒子的一些使用方法

刹那永恒个人博客
刹那永恒个人博客原创
2020年06月26日 10:02:001346浏览

一.文字的自动分列 column属性

1.自动分列

  • column-width 列的宽度。
  • column-count 列数。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <style>
  7.       * {
  8.         margin: 0;
  9.         padding: 0;
  10.         box-sizing: border-box;
  11.       }
  12.       .box {
  13.         width: 100%;
  14.         padding: 150px;
  15.         min-height: 800px;
  16.         column-count: 5;
  17.         border: 1px dashed blue;
  18.       }
  19.     </style>
  20.     <title>文字的自动分列</title>
  21.   </head>
  22.   <body>
  23.     <div class="box">
  24.       二愣子睁大着双眼，直直望着茅草和烂泥糊成的黑屋顶，身上盖着的旧棉被，已呈深黄色，看不出原来的本来面目，还若有若无的散发着淡淡的霉味。
  25.               在他身边紧挨着的另一人，是二哥韩铸，酣睡的十分香甜，从他身上不时传来轻重不一的阵阵打呼声。
  26.               离床大约半丈远的地方，是一堵黄泥糊成的土墙，因为时间过久，墙壁上裂开了几丝不起眼的细长口子，从这些裂纹中，隐隐约约的传来韩母唠唠叨叨的埋怨声，偶尔还掺杂着韩父，抽旱烟杆的“啪嗒”“啪嗒”吸允声。
  27.               二愣子缓缓的闭上已有些发涩的双目，迫使自己尽早进入深深的睡梦中。他心里非常清楚，再不老实入睡的话，明天就无法早起些了，也就无法和其他约好的同伴一起进山拣干柴。
  28.               二愣子姓韩名立，这么像模像样的名字,他父母可起不出来，这是他父亲用两个粗粮制成的窝头，求村里老张叔给起的名字。
  29.               老张叔年轻时，曾经跟城里的有钱人当过几年的伴读书童，是村里唯一认识几个字的读书人，村里小孩子的名字，倒有一多半是他给起的。
  30.               韩立被村里人叫作“二愣子”，可人并不是真愣真傻，反而是村中首屈一指的聪明孩子，但就像其他村中的孩子一样，除了家里人外，他就很少听到有人正式叫他名字“韩立”，倒是“二愣子”“二愣子”的称呼一直伴随至今。
  31.               而之所以被人起了个“二愣子”的绰号，也只不过是因为村里已有一个叫“愣子”的孩子了。
  32.               这也没啥，村里的其他孩子也是“狗娃”“二蛋”之类的被人一直称呼着，这些名字也不见得比“二愣子”好听了哪里去。
  33.               因此，韩立虽然并不喜欢这个称呼，但也只能这样一直的自我安慰着。
  34.               韩立外表长得很不起眼，皮肤黑黑的，就是一个普通的农家小孩模样。但他的内心深处，却比同龄人早熟了许多，他从小就向往外面世界的富饶繁华，梦想有一天，他能走出这个巴掌大的村子，去看看老张叔经常所说的外面世界。
  35.               当韩立的这个想法，一直没敢和其他人说起过。否则，一定会使村里人感到愕然，一个乳臭未干的小屁孩，竟然会有这么一个大人也不敢轻易想的念头。要知道，其他同韩立差不多大的小孩，都还只会满村的追鸡摸狗，更别说会有离开故土，这么一个古怪的念头。
  36.               韩立一家七口人，有两个兄长，一个姐姐，还有一个小妹，他在家里排行老四，今年刚十岁，家里的生活很清苦，一年也吃不上几顿带荤腥的饭菜，全家人一直在温饱线上徘徊着。
  37.               此时的韩立，正处于迷迷糊糊，似睡未睡之间，恼中还一直残留着这样的念头：上山时，一定要帮他最疼爱的妹妹，多拣些她最喜欢吃的红浆果。
  38.               第二天中午时分，当韩立顶着火辣辣的太阳，背着半人高的木柴堆，怀里还揣着满满一布袋浆果，从山里往家里赶的时侯，并不知道家中已来了一位，会改变他一生命运的客人。
  39.               这位贵客，是跟他血缘很近的一位至亲，他的亲三叔。
  40.     </div>
  41.   </body>
  42. </html>
  • 效果如下

    二.flex 弹性盒子的一些使用方法

    1. 弹性盒子的平均分布

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .container {
  9.         width: 300px;
  10.         min-height: 50px;
  11.         border: 1px dashed green;
  12.         /* 设置成为弹性盒子 */
  13.         display: flex;
  14.       }
  16.       .container > .item {
  17.         /* 平局分布 */
  19.         flex: auto;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="container">
  25.       <div class="item">1</div>
  26.       <div class="item">2</div>
  27.       <div class="item">3</div>
  28.     </div>
  29.   </body>
  30. </html>
  • 未设置平均分布之前
  • 设置平均分布之后
  • 一旦将父元素设置为弹性盒子,子元素自动转换为弹性项目,不管子元素以前是什么类型的元素,统统转换为行内块元素.

  • 增加项目后依然会自动分布

    2. 弹性盒子的自动换行

  • 自动换行命令 flex-wrap: wrap;

  • 不自动换行命令 flex-wrap: nowrap;

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8" />
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. <title>弹性盒子的自动换行</title>
    7. <style>
    8.   .container {
    9.     width: 300px;
    10.     min-height: 50px;
    11.     border: 1px dashed green;
    12.     /* 设置成为弹性盒子 */
    13.     display: flex;
    14.   }
    16.   .container > .item {
    17.     width: 110px;
    18.     /* 平局分布 */
    19.     /* flex: auto; */
    20.   }
    21.   .container {
    22.     /* 自动换行 */
    23.     flex-wrap: wrap;
    24.     /* 不自动换行 */
    25.     /* flex-wrap: nowrap; */
    26.   }
    27. </style>
    28. </head>
    29. <body>
    30. <div class="container">
    31.   <div class="item">1</div>
    32.   <div class="item">2</div>
    33.   <div class="item">3</div>
    34.   <div class="item">1</div>
    35.   <div class="item">2</div>
    36.   <div class="item">3</div>
    37. </div>
    38. </body>
    39. </html>

3.弹性盒子的自动对齐(将所有项目视为一个整体)-左面-右面-居中

  • 居中对齐 justify-content: center;
  • 靠左对齐 justify-content: flex-start;

  • 靠右对齐 justify-content: flex-end;

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>单行容器的居中对齐(两边空着)</title>
    7.  <style>
    8.    .container {
    9.      width: 300px;
    10.      min-height: 50px;
    11.      /* 设置成为弹性盒子 */
    12.      display: flex;
    13.      /* 居中对齐 */
    14.      justify-content: center;
    15.      /* 靠左对齐 */
    16.      /* justify-content: flex-start; */
    17.      /* 靠右对齐 */
    18.      /* justify-content: flex-end; */
    19.    }
    20.    .container > .item {
    21.      width: 80px;
    22.    }
    23.  </style>
    24. </head>
    25. <body>
    26.  <div class="container">
    27.    <div class="item">1</div>
    28.    <div class="item">2</div>
    29.    <div class="item">3</div>
    30.  </div>
    31. </body>
    32. </html>

    4.弹性盒子的自动对齐(将所有项目视为独立的个体)

    1.      /* 所有项目平均分布 两边的靠边*/
    2.      justify-content: space-between;

    1.      /* 分散分布 1和2之间的句里是1左边的2倍 */
    2.      justify-content: space-around;

  1.         /* 平均分配剩余空间 每个项目两边的空间都相等 */
  2.         justify-content: space-evenly;

5.弹性盒子的自动对齐(行于行的对齐)

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>6.多行容器的分布排列</title>
  8.     <style>
  9.       .container {
  10.         width: 300px;
  11.         min-height: 200px;
  12.         /* 设置成为弹性盒子 */
  13.         display: flex;
  14.         /* 允许多行排列 */
  15.         flex-wrap: wrap;
  16.       }
  17.       .container > .item {
  18.         width: 80px;
  19.         min-height: 30px;
  20.       }
  21.       .container {
  22.         /* 行中居中 */
  23.         align-content: center;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item">1</div>
  30.       <div class="item">2</div>
  31.       <div class="item">3</div>
  32.       <div class="item">4</div>
  33.       <div class="item">5</div>
  34.       <div class="item">6</div>
  35.       <div class="item">7</div>
  36.       <div class="item">8</div>
  37.       <div class="item">9</div>
  38.       <div class="item">10</div>
  39.       <div class="item">11</div>
  40.       <div class="item">12</div>
  41.     </div>
  42.   </body>
  43. </html>

  • align-content: center; 居中

  • align-content: flex-start;靠上

  • align-content: flex-end;靠下
  • align-content: stretch; 默认值(原始状态)
  • align-content: space-around; 分散对齐 两边有空位

  • align-content: space-between; 分散对齐两边无空位

    6.主轴的方向

    1.       /* 主轴方向默认为行 */
    2.       flex-direction: row;
    3.       /* 主轴方向为列 手机端基本都是这种布局*/
    4.       flex-direction: column;

    三.flex简单编写一个导航

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex编写一个导航栏</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #ccc;
  16.         padding: 0 25px;
  17.         /* 设置行高 */
  18.         line-height: 40px;
  19.       }
  20.       nav {
  21.         height: 40px;
  22.         background-color: #333;
  23.         padding: 0 50px;
  24.         /* 转为弹性盒子 */
  25.         display: flex;
  26.         /* justify-content: center; */
  27.       }
  28.       header nav a:first-of-type {
  29.         /* 第一个a标签靠左 */
  30.         margin-right: auto;
  31.         padding-left: 30px;
  32.       }
  33.       nav a:last-of-type {
  34.         /* 最后一个a标签靠右 */
  35.         margin-left: auto;
  36.       }
  37.       nav a:hover {
  38.         color: rgb(255, 0, 0);
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <header>
  44.       <nav>
  45.         <a href=""><img src="logo.png" alt="" height="40" /></a>
  46.         <a href="">首页</a>
  47.         <a href="">视频教程</a>
  48.         <a href="">入门教程</a>
  49.         <a href="">社区问答</a>
  50.         <a href="">注册/登陆</a>
  51.       </nav>
  52.     </header>
  53.   </body>
  54. </html>

总结

1.文字的自动分列 column属性

  • column-width 列的宽度。
  • column-count 列数。

2.弹性盒子的使用方法

  • display:flex;设置成为弹性盒子
  • flex: auto;

3.自动换行命令 flex-wrap: wrap; 不自动换行命令 flex-wrap: nowrap;

4.弹性盒子的自动对齐(将所有项目视为一个整体)-左面-右面-居中

  • 居中对齐 justify-content: center;
  • 靠左对齐 justify-content: flex-start;
  • 靠右对齐 justify-content: flex-end;

5.弹性盒子的自动对齐(将所有项目视为独立的个体)

  • justify-content: space-between;所有项目平均分布 两边的靠边
  • justify-content: space-around;分散分布 1和2之间的句里是1左边的2倍
  • justify-content: space-evenly;平均分配剩余空间 每个项目两边的空间都相等

6.弹性盒子的自动对齐(行于行的对齐)

  • align-content: center; 居中
  • align-content: flex-start;靠上
  • align-content: flex-end;靠下
  • align-content: stretch; 默认值(原始状态)
  • align-content: space-around; 分散对齐 两边有空位
  • align-content: space-between; 分散对齐两边无空位

7.主轴方向

  • flex-direction: row;水平
  • flex-direction: column;垂直
上一条：laravel实战-通用后台管理系统-菜单管理和角色管理下一条：浮动元素高度塌陷产生的原因与解决方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多