search

博客列表 >09 flex box弹性盒的基本用法

09 flex box弹性盒的基本用法

老黑
老黑原创
2020年06月26日 06:17:40935浏览

主要内容：

  1. 快速做三列典型网页（浮动法、定位法）
  2. 内容的多栏/列显示(column-count:n)
  3. flex box（弹性盒）建立(display:flex)
  4. 单行弹性盒的设置(flex-wrap:warp, justify-content,(换轴)flex-direction: column，(简写)flex-flow:column wrap)

  5. 多行弹性盒（wrap后即为多行，align-content:stretch(先stretch之后很多命令跟上面一样)）

  6. 交叉轴弹性盒排列（align-items，同样也先需要stretch之后再展开）

  7. item的order顺序控制
    看似很牛X，但貌似后面绝大多数功能也有可能被Grid代替掉。就当学html、css历史了。

再强调几点：

  • 多行的位置：三步①wrap，②align-content:stretch，③align-content:具体属性参数。
  • 交叉轴上的位置：两步①align-itemt:stretch，②align-items:具体属性参数。
  • 实战的时候还会遇到这样的问题：flex box中套flex box。这个时候需要：
    — ① 区分清楚谁是flex box，谁是items。
    — ② 有可能根据需要要做row、column的相互切换。
    — ③ items在不同box中的放置。有些item可以跟其他合并。
    — ④ 当然最关键是脑子里面需要先清楚都有一些什么items，以及怎么去划分它们到合适的box中。

内容汇总：

  1. <style>
  2.       .container {
  3.         width: 300px;
  4.         height: 100px;
  5.         /* 声明flexbox容器 */
  6.         display: flex;
  7.         /* 主轴方向: 行方向  */
  8.         flex-direction: row;
  9.         /* 主轴上的项目是否换行 */
  10.         flex-wrap: nowrap;
  11.         /* flex-flow: flex-direction flex-wrap; */
  12.         flex-flow: row nowrap;
  13.         /* 当主轴上存在剩余空间时，控制空间在项目上的分配方案 */
  14.         justify-content: flex-start;
  15.         /* 仅适用于多行容器，控制项目的对齐方式 */
  16.         align-content: flex-start;
  17.         /* 控制所有项目在交叉轴上的对齐方式 */
  18.         align-items: stretch;
  19.       }
  20. </style>

1、典型三列操作的注意点

  • 浮动法：中间的两列的处理。设置好上上级盒子的大小、margin、塌陷问题等。

    1.     .wrap {
    2.       width: 1000px;
    3.       border: 1px solid #000;
    5.       overflow: hidden;
    6.       margin: 10px auto;
    7.     }

    然后计算好中间盒子的大小、高度等。然后一个左浮动，一个右浮动即可。

    1.     aside {
    2.       width: 200px;
    3.       float: left;
    4.     }
    5.     main {
    6.       width: 790px;
    7.       float: right;
    8.     }

  • 定位法的注意事项及快捷处理：
    继承。例如aside直接继承了上一级的左上对齐、main因为top对齐是默认值，因此直接删除。

    1.     aside {
    2.       width: 200px;
    3.       min-height: inherit;
    4.       position: absolute;
    5.     }
    6.     main {
    7.       width: 790px;
    9.       min-height: inherit;
    11.       position: absolute;
    12.       right: 0;
    13.     }

2、内容的多栏/列显示

  • 一个小技巧，初始化和默认值。:root是将整个html及所有元素都改成默认的属性设置。

    1.     * {
    2.       padding: 0;
    3.       margin: 0;
    4.       box-sizing: border-box;
    5.     }
    7.     :root {
    8.       font-size: 16px;
    9.       color: #555;
    10.     }
  • rem vs px(px确定了后默认值后，1rem=默认的px大小。例如这里1rem = 16px)
  1.       div {
  2.         border: 1px solid #000;
  3.         padding: 1rem;
  4.         width: 60rem;
  5.         margin: 30px auto;
  6.       }
  • 文本类内容的分列显示（看起来还是挺精致的）
    1.     div {
    2.       column-count: 3;
    3.       /* column-rule-style: solid;(中间加分割线)
    4.       column-rule-width: 1px;
    5.       column-rule-color: red; */
    6.       column-rule: 1px solid red;
    7.     }
    分列自然好，但不要用这个方法去建设网站中的栏目分块等。因为中间有很多不好操作，或者逻辑上较难走通的地方 - 见老师demo4.html。

3、父子一同弹性盒

类似下面这样一些盒子，通过display:flex后就会全部转为弹性盒。

  • 注意点：这块的测试用firefox更好一些，元素检查中的flex标识那块就可以看到。
    1.   <div class="container">
    2.     <div class="item">1</div>
    3.     <span class="item">2</span>
    4.     <a class="item">3</a>
    5.     <a class="item">4</a>
    6.     <a class="item">5</a>
    7.     <a class="item">6</a>
    8.   </div>
    1.       <style>
    2.     .container {
    3.       width: 300px;
    4.       /* 如果这个容器中的内容要使用flexBox布局， 第一步就是必须将这个容器转为弹性盒子 */
    5.       /* 弹性容器 */
    6.       display: flex;
    7.     }
    8.     .container > .item {
    9.       /* 一旦将父元素转为弹性容器，内部的“子元素”就会自动成为： 弹性项目 */
    10.       /* 不管这个项目标签之前是什么类型，统统转为“行内块” */
    11.       /* 行内：全部在一排显示 */
    12.       /* 块：　可以设置宽和高 */
    13.       /* flex: auto; */
    14.       /*自动情况下会将一行全部均分占满。
    15.       自定义超过情况下总宽度情况下会被自动均分*/ 
    16.       /* 不够的情况下则会留下剩余空间 */
    17.       flex: auto;
    18.       /* width: 30px; */
    19.       /* height: 100px; */
    20.     }
    21.   </style>

4、单行（单列）盒子的格式设置

① 换行显示（多行容器）：wrap，默认为nowrap。在父级box中来设置。

  1.       .container {
  2.         flex-wrap: wrap;
  3.       }

wrap后上一行，下一行都有可能出现剩余空间。

② 项目对齐方式：justify-content。

这个后面的参数挺多的，理解下即可。

  • justify-content: 控制所有项目在主轴上的对齐方式。本质是：设置容器中的剩余空间在所有 “项目之间”的分配方案
  • 容器剩余空间在所有项目“二边”的如何分配 ，将全部项目视为一个整体（前三个）。
    1.       justify-content: flex-start;
    2.       justify-content: flex-end;
    3.       justify-content: center;
  • 容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体（第四个）。
    justify-content: space-between;

  • 分散对齐: 剩余空间在所有项目二侧平均分配（第五、六个）

    1.       justify-content: space-around;
    2.       justify-content: space-evenly;

    ③ 单列情况下同样，只不过从一开始就需要切换下“轴”，从row切换到column。然后其他的都跟上面一样了。

    flex-direction: column；

④ 主轴上项目排列可以简写。例如：

  1.     <style>
  2.       .container {
  3.         width: 300px;
  4.         height: 50px;
  5.         display: flex;
  6.         /* 默认值就不用写出来 */
  7.         /* flex-direction: row;
  8.         flex-wrap: nowrap; */
  10.         /* flex-flow: row nowrap; */
  11.         flex-flow: column wrap;
  12.       }

5、多行盒子（容器）的格式设置

多行情况下先align-content:stretch后，然后用的一些方法跟单行情况下有类似之处。

  1.     <style>
  2.       .container {
  3.         width: 300px;
  4.         display: flex;
  5.         /* 多行容器 */
  6.         flex-wrap: wrap;
  7.         height: 150px;
  8.         /* align-content: 设置多行容器中的项目排列; */
  9.         /* 1. 容器剩余空间在所有项目“二边”的如何分配 ，将全部项目视为一个整体*/
  10.         align-content: stretch;
  11.         align-content: flex-start;
  12.         align-content: flex-end;
  13.         align-content: center;
  14.         /* 2. 容器剩余空间在所有项目“之间”的如何分配 ，将项目视为一个个独立的个体*/
  15.         align-content: space-between;
  16.         align-content: space-around;
  17.         align-content: space-evenly;
  18.       }
  19.       .container > .item {
  20.         width: 60px;
  21.       }

6、项目（item）在交叉轴上的排列

  • 重点：align-items。先stretch，然后设置其他属性，items在主轴外的另一轴上就可以居中，向上向下及其他方式显示了。

    1.   <div class="container">
    2.     <div class="item">1</div>
    3.     <div class="item">2</div>
    4.     <div class="item">3</div>
    5.   </div>
    1.   <style>
    2.     .container {
    3.       width: 300px;
    4.       height: 200px;
    5.       display: flex;
    6.       /* 项目在交叉轴上默认是自动伸缩的 */
    7.       align-items: stretch;
    9.       align-items: flex-start;
    10.       align-items: flex-end;
    11.       align-items: center;
    12.     }
    13.     .container > .item {
    14.       width: 60px;
    15.     }
    16.   </style>

7、项目item的order顺序控制

这个比较简单，其实就类似赋值。

  • 不过要注意：是所有的默认都是0，而非从0开始向上排。

    1.   <style>
    2.     .container {
    3.       width: 300px;
    5.       display: flex;
    6.     }
    7.     .container > .item {
    8.       width: 60px;
    9.     }
    11.     .container > .item:first-of-type {
    12.       /* order: 默认是0 */
    13.       order: 3;
    14.     }
    15.     .container > .item:last-of-type {
    16.       /* order: 默认是0 */
    17.       order: 5;
    18.     }
    19.     .container > .item:nth-of-type(2) {
    20.       /* order: 默认是0 */
    21.       order: 50;
    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>

8、实战1：快速建立一个菜单

  • 直接改成flex box。
  • 用padding来调节之间的间距。
  • 用hover来修饰点击前状态。
  • 用last-of-type左对齐来固定登陆按钮。
  • 当然通过下节的内容还可以看到通过first-of-type的margin来将logo或“首页”、“注册”等跟其他items适当分开。例如：用最后以一个元素的margin-left: auto来实现靠左展示。auto的意思应该是最大化了。
  • 在做hover时通过not来将logo这块排除在外。

  • 用line-height和nav height的高度一样直接来实现按钮文本的上下对齐。

    1. <body>
    2.   <header>
    3.     <nav>
    4.       <a href="">首页</a>
    5.       <a href="">教学视频</a>
    6.       <a href="">社区问答</a>
    7.       <a href="">资源下载</a>
    8.       <a href="">登录/注册</a>
    9.     </nav>
    10.   </header>
    11. </body>
    12. ```css
    13.  <style>
    14.     /* 初始化 */
    15.     * {
    16.       padding: 0;
    17.       margin: 0;
    18.       box-sizing: border-box;
    19.     }
    20.     a {
    21.       text-decoration: none;
    22.       color: #ccc;
    23.     }
    24.     nav {
    25.       height: 40px;
    26.       background-color: #333;
    27.       padding: 0 50px;
    28.       /* 转为弹性盒布局 */
    29.       display: flex;
    30.     }
    31.     nav a {
    32.       height: inherit;
    33.       line-height: 40px;
    34.       padding: 0 15px;
    35.     }
    36.     nav a:hover {
    37.       background-color: seagreen;
    38.       color: white;
    39.     }
    41.     /* 登录/注册放在最右边 */
    42.     nav a:last-of-type {
    43.       margin-left: auto;
    44.     }
    45.   </style>

9、实战2：通过order调整元素顺序

例如相册、产品展示等可能都会用到。

先模拟三个图片。然后旁边加上up、down按钮。

  1.   <body>
  2.     <div class="container">
  3.       <div class="item">
  4.         images-1.jpg
  5.         <div>
  6.           <button onclick="up(this)">Up</button
  7.           ><button onclick="down(this)">Down</button>
  8.         </div>
  9.       </div>
  10.       <div class="item">
  11.         images-2.jpg
  12.         <div>
  13.           <button onclick="up(this)">Up</button
  14.           ><button onclick="down(this)">Down</button>
  15.         </div>
  16.       </div>
  17.       <div class="item">
  18.         images-3.jpg
  19.         <div>
  20.           <button onclick="up(this)">Up</button
  21.           ><button onclick="down(this)">Down</button>
  22.         </div>
  23.       </div>
  24.     </div>
  1.     <style>
  2.       .container {
  3.         width: 300px;
  5.         display: flex;
  6.         flex-direction: column;
  7.       }
  8.       .container > .item {
  9.         border: 1px solid #000;
  10.         padding: 10px;
  11.         display: flex;
  13.         position: relative;
  14.       }
  15.       .container > .item > div {
  16.         display: flex;
  17.       }
  18.     </style>

up、down两个button的定义。

  1. <script>
  2.   let up = (ele) => (ele.offsetParent.style.order -= 1);
  3.   let down = (ele) => (ele.offsetParent.style.order += 1);
  4. </script>
上一条：简单演示背景控制的常用属性，精灵图和阿里图标（0619）下一条：pc端布局通用模板和移动端布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多