前端中关于弹性布局的应用-阿里云开发者社区

前端中关于弹性布局的应用

2023-08-28 121

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端中关于弹性布局的应用

1. flex基础

首先，了解弹性盒子，弹性元素，两条轴的概念

flex容器有两个轴，一个主轴，一个交叉轴（垂直于主轴的轴即为交叉轴），容器内的元素默认会按主轴方向排列。

下面先运行一下这段代码：

<body>
  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item last"></div>
  </div>
</body>
</html>
<style>
  .box {
    width: 50vw;
    margin: 0 auto;
    background-color: mediumturquoise;
    display: flex;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: rgb(249, 27, 223);
    margin:5px;
  }
</style>

这就是flex布局的默认行为：内部元素默认按照默认主轴的方向排列（元素的间距是我自己设定的margin，没有margin他们就会连在一起）

Flexbox 允许使用margin: auto 来填充弹性子元素之间的可用空间。例如，我们可以给元素添加margin: auto

item {
  margin: auto;
}

利用这个特性，我们可以把最后一个item推到最右侧：

.item.last {
  margin-left: auto;
}

2. flex核心

先来一波总结：

flex的核心就是“弹”，弹性元素在盒子的空间剩余时可以放大，溢了可以缩小。一个弹性元素的宽度计算

刚刚我们了解了相关的flex概念，现在我们来了解一个非常重要的属性——flex。flex属性控制弹性子元素在主轴方向上的大小。下面我们新增如下html，并让弹性元素使用flex属性来设置其大小

<!-- html -->
<div class="content">
  <div class="main"></div>
  <div class="sider"></div>
</div>
<!-- css -->
<style>
  /* flex盒子 */
  .content {
    width: 90%;
    margin: 0 auto;
    display: flex;
  }
  .main, .sider {
    height: 50vh;
    background-color: white;
  }
  .main {
    //第一个白色方形宽度所占比例为3/4
    flex: 3;
    margin-right: 10px;
  }
  .sider {
    //第二个白色方形宽度所占比例为1/4
    flex: 1;
  }
</style>

我们设置了其为3:1的大小，弹性元素大小为（内容+ 内边框+内边距 + 外边框 + 外边距）。即若给其中一个弹性元素添加margin, 那么在计算弹性元素大小时，margin也会被计算在其中。

flex-basis属性

flex-basis属性是用来定义弹性元素的宽度的（相当于width属性）。默认值为auto，此时，flex-basis的值为 wdith属性的值，若弹性元素没有设置width属性，那么就默认为弹性元素本身大小。flex-basis属性和width属性同时出现时，会忽略掉width属性。注意： flex-basis的值，为弹性元素大小（包含外边距）。设置了基本大小之后，我们就可以放心的让弹性元素智能缩放，来适应各盒子的大小，即可以“弹”。这时候就需要 flex-grow和 flex-shrink 来决定缩放的规则。

flex-grow属性

flex-grow属性可以用来放大单个弹性元素大小，是一个增长因子。当flex-basis值设置好后，每个弹性元素都会占据一定宽度，加起来的宽度不一定正好填满弹性容器的宽度，可能会有留白。多出来的留白（或剩余宽度）会按照 flex-grow（增长因子）的值分配给每个弹性子元素， flex-grow 的值为非负整数。如果一个弹性子元素的 flex-grow 值为 0，那么它的宽度不会超过 flex-basis 的值。一图胜千言，看图：

flex-shrink属性

与flex-grow相似，只不过felx-shrink属性是用来控制弹性元素缩小的，是一个缩小因子。计算出弹性子元素的初始主尺寸后，它们的累加值可能会超出弹性容器的可用宽度。如果不用 flex-shrink，会导致溢出。

.item {
    flex-basis: 40%;  
    flex-shrink: 0;   //设置为0，则为不进行缩放
    width: 200px;
  }

如果某个子元素为 flex-shrink: 0，则不会收缩；如果值大于 0，则会收缩至不再溢出。按照 flex-shrink 值的比例，值越大的元素收缩得越多。

flex属性

flex属性是一个简写属性，是flex-grow flex-shrink flex-basis属性的简写形式。 flex:1 1 0 相当于 flex-grow 为1， flex-shrink为1， flex-basis为0。如果省略了其他属性，子属性的值并不会被置为初始值， flex 简写属性会给出有用的默认值：flex-grow 为 1、flex-shrink为 1、flex-basis 为 0%。这些默认值正是大多数情况下所需要的值。

所以，平常我们写的flex: 1即设置了flex-grow为1， flex-shrink为1，flex-basis为0。基础值为0（大家初始宽度都一样大，且为0），那么剩下的全都是剩余的空间，每个元素都会按照相同的比例调整自己的宽度（基础值 + 分配的剩余宽度）。