热搜：前端 vuedraggable 插件 vue

flex 布局有什么好处

lxf2023-04-25 22:30:01

持续创作，加速成长！这是我参与「AdminJS · 6 月更文挑战」的第28天，点击查看活动详情

核心描述

在我看来，flex 布局的好处，就两个字，“简单”，如果要用一句话，就是用最简单的语法实现最常见的样式布局。

  • flex 布局：Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

  • flex 常见用途：如果说概念太复杂，那不如直接列出来 flex 能解决的场景问题，更符合实际应用

    • 一行多列，等分布局
    • 一行内，文字和图片垂直居中对齐：登录框的 icon 、input、label 垂直居中布局
    • 子元素在父元素中水平垂直居中对齐

  • flex 的属性值说明

     <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>
    • flex 布局中父元素可以设置的属性值及说明：
    <style>
.parent {
    display: flex; // 应用 flex 布局
    flex-direction: row; // 子元素的布局排列方向，row-横向正向；row-reverse-横向反方向；column-竖向正向，column-reverse-竖向反方向
    flex-wrap:nowrap; //表示是否换行
    flex-flow: row norwap； // 表示 flex-direction 和 flex-wrap 的缩写
    justify-content: center; // 表示水平方向的对齐方式，如果默认 flex-direction:row，则可以用来做水平居中布局
    align-items: center; // 表示垂直方向的对齐方式，如果默认flex-direction:row，则可以用来做垂直居中布局
    align-content: center; // 该属性，对单行弹性布局无效，一般应用场景较少。作用是指明垂直方向每一行 flex 元素的对齐和分布方式
}

</style>
    • flex 布局中直接子元素可以设置的属性值及说明：
    <style>
.child {
    flex: 1; // 该属性是 flex-grow、flex-shrink、flex-basis 的缩写
    order:1; // 改变某一个 flex 直接子元素的排序位置
    align-self:1; // 控制单独某一个 flex 子项的垂直对齐方式，与父元素的 align-items 区别是，在父元素中 align-items  表示所有子元素的垂直排列方式，而 align-self 表示当前子元素的垂直排列方式，仅影响一个元素
    flex-grow: 1; // 拓展当前 flex 直接子元素所占据的宽度，拓展所占用的空间就是父元素除去所有子元素之外的空白间隙，不支持负数，默认是0
    flex-shrink:1; // 收缩当前 flex 直接子元素所占的宽度，当 flex 父元素空间不足时，收缩单个元素比例，不支持负数，默认是1
    flex-basis:1; // 当前 flex 直接子元素在分配父元素剩余空间之前元素的默认大小，默认值是 auto
    
    
}
</style>

  • flex:1 表示什么意思：等同于 flex: 1 1 0，等同于 flex-grow:1;flex-shrink:1;flex-basis:0，元素可以在flex-basis为 0 的基础上伸缩。

    • flex:initial：flex 默认值，相当于 flex:0 1 auto
      • flex-grow:0; flex-shrink:1; flex-basis:auto
      • 在这里 flex-grow 的值为 0，所以 flex 元素不会超过它们 flex-basis 的尺寸。flex-shrink 的值为 1, 所以可以缩小 flex 元素来防止它们溢出。flex-basis 的值为 auto. Flex 元素尺寸可以是在主维度上设置的，也可以是根据内容自动得到的。
    • flex:auto： 相当于 flex: 1 1 auto;
      • flex-grow:1; flex-shrink:1; flex-basis:auto
      • 和上面的 flex:initial 基本相同，但是这种情况下，flex 元素在需要的时候既可以拉伸也可以收缩。
    • flex:none：相当于 flex:0 0 auto
      • flex-grow:1; flex-shrink:1; flex-basis:auto
      • 元素既不能拉伸或者收缩，但是元素会按具有 flex-basis: auto 属性的 flexbox 进行布局。

  • 常见示例-实现水平垂直居中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .parent {
        display: flex; 
        /* 水平居中 */
        justify-content: center; 
        /* 垂直居中 */
        align-items: center;
        width: 200px;
        height: 80px;
        border: 1px dotted #333;
        background: green;
    }
    .child {
        background-color: antiquewhite;
        border: 1px solid #000;
        width: 50px;
        height: 30px;
    }
</style>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
</body>
</html>

知识拓展

  • 个人理解：
    • 有了 flex 布局之后，以往的很多 margin 、 float、 position:absolute 等等用于子元素在父元素的各种位置设置，都可以不用再深入研究了，基本能覆盖 80% 以上的场景
    • flex 对浏览器的兼容性基本包括了 ie11 及以上，尤其是微软官方宣布不再维护 IE 之后，更没有理由不应用 flex 布局了
    • flex 布局可以嵌套使用
    • 如果你开发小程序，也可以直接使用 flex 布局

参考资料

  • MDN-flex 布局的基本概念：developer.mozilla.org/zh-CN/docs/…
  • Can I use：caniuse.com/flexbox
  • 写给自己看的display: flex布局教程：www.zhangxinxu.com/wordpress/2…

浏览知识共享许可协议

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

相关专题