前端面试题 | flex布局的可伸缩可拓展（Flexibility）

最新推荐文章于 2024-05-14 05:05:23 发布

学无止境呀小徐

最新推荐文章于 2024-05-14 05:05:23 发布

阅读量411

点赞数 2

文章标签：面试前端 css3

本文链接：https://blog.csdn.net/weixin_48491416/article/details/123266588

版权

Flexibility

Flex伸缩布局决定性的特征是让伸缩项目可伸缩，也就是让伸缩项目的宽度和高度自动填充剩余的空间。这可以以flex属性完成。一个伸缩容器会等比地按照各伸缩项目的扩展比率分配剩余空间，也会按照收缩比率缩小各项目以避免溢出。

Flex属性

Flex属性可以用来指定可伸缩长度的部件：扩展比率、收缩比率、伸缩基准线。当有一个元素是伸项目时，flex属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目，则flex不生效。

flex-grow设置的是这个子盒子所占有父盒子宽度或者溢出的比例；flex-grow的值是一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是0。如果子盒子有宽度，那么flex-grow属性会将父盒子剩余的宽度进行按照比例划分。（根据子盒子flex-grow的总和来规定对父盒子宽度或者父盒子剩余的宽度进行划分多少份，然后给每个盒子分配几份）
- flex-grow:(父盒子的宽度/所有子盒子的flex-grow的值 * 当前子盒子flex的值)
flex-shrink溢出部分按照比例进行划分（比原来小了）；默认值是0代表不压缩；加上属性之后可以进行合理压缩
- flex-shrink计算
- 压缩值：当前盒子的宽度
- 压缩率
- 加权总和：每个元素的宽度 * flex-shrink的值的和
- 压缩率：每个元素的加权值（flex-shrink *width）/加权总和
- 压缩值 * 压缩率就是当前元素压缩的值
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间,浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小,它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间，如果值为0%,那么此盒子即时有宽度也不占据宽度，是相对于父盒子的0%
flex属性是flex-grow、flex-shrink、felx-basis的缩写

<div class="box">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
 </div>
<style>
    .box {
  display: flex;
  width: 800px;
}
.box > div {
  height: 200px;
}
.item-1 {
  width: 160px;
  flex: 2 1 0%;
  background: #2ecc71;
}
.item-2 {
  width: 100px;
  flex: 2 1 auto;
  background: #3498db;
}
.item-3 {
  flex: 1 1 200px;
  background: #9b59b6;
}
</style>