flex: 1 是哪些属性的缩写?

flex:1是哪些属性的缩写?

flex:1 是 flex-grow: 1, flex-shrink: 1,flex-basis: 0% 的缩写;

解释下flex-grow

flex-grow是将剩余的空间,根据flex-grow的值平分,然后加到flex-basis上

javascript 复制代码
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>flex-grow</title>
  </head>
  <body>
    <p>内容的宽度是500px,flex item的flex-basic是60px。</p>
    <p>A、B 为 flex-grow:1。C和D为 flex-grow:4</p>
    <div id="content">
      <div class="box" style="background-color: red">A</div>
      <div class="box" style="background-color: lightblue">B</div>
      <div class="box1" style="background-color: yellow">C</div>
      <div class="box1" style="background-color: brown">D</div>
    </div>
  </body>
</html>

上述代码 的flex-basis加起来是240px,父容器分完以后剩下260px,ABCD的flex-grow加起来10,那么每一份是26px,最终AB是60px + 26px = 86px,CD是60px + 26px * 4 = 164px。
是不是特别像老爷子突然噶了留下500块钱的遗产,兄弟4个来分,老大和老二说"我要60块钱,如果有多的可以再给我来一份",老三和老四说"我们也要60块钱,如果有多的我们要四份"。最终老大和老二分到86,老三老四分到164,大家还都挺满意

解释下flex-shrink

javascript 复制代码
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>flex-shrink</title>
    <style>
      #content {
        display: flex;
        width: 500px;
      }
      .box {
        flex-shrink: 1;
      }
      .box1 {
        flex-shrink: 4;
      }
    </style>
  </head>
  <body>
    <p>内容的宽度是500px,flex item的flex-basic总和是1000px。</p>
    <div id="content">
      <div class="box" style="background-color: red; flex-basis: 100px">A</div>
      <div class="box" style="background-color: lightblue; flex-basis: 200px">B</div>
      <div class="box1" style="background-color: yellow; flex-basis: 300px">C</div>
      <div class="box1" style="background-color: brown; flex-basis: 400px">D</div>
    </div>
  </body>
</html>

上面例子

A的flex-basis 是100px, flex-shrink 是 1

B的flex-basis 是200px, flex-shrink 是 1

C的flex-basis 是300px, flex-shrink 是 4

D的flex-basis 是500px, flex-shrink 是 4

要平分的容量 NT = 100 + 200 + 300 + 400 - 500 = 500

最终A的宽度 = 100 - 100 * 1 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT =

83.87096774193549

B的宽度 = 200 - 200 * 1 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 167.74193548387098

C的宽度 = 300 - 300 * 4 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 106.45161290322582

D的宽度 = 400 - 400 * 4 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 141.93548387096774

相关推荐
秉承初心4 分钟前
Vue3与ES6+的现代化开发实践(AI)
前端·vue.js·es6
Spirited_Away10 分钟前
脚手架开发之多包管理(npm, yarn, pnpm workspaces)
前端·面试
tiantian_cool20 分钟前
Xcode 导入与使用 SVG 文件矢量图适配全流程
前端
小泥巴呀33 分钟前
手写一个简单的vue——响应系统1
前端·vue.js
ze_juejin36 分钟前
插件化和模块化的对比
前端
前端康师傅37 分钟前
网页为什么会白屏?
前端·http·面试
李剑一37 分钟前
Tauri2.0本地实现导入导出,有坑!
前端·vue.js
执行上下文38 分钟前
Element Plus Upload 添加支持拖拽排序~
前端·javascript·element
forever_Mamba38 分钟前
从重复到优雅:前端筛选逻辑的优化之旅
前端·javascript·性能优化
一个小浪吴呀39 分钟前
生死簿应用
前端