关于flex取值0、1、auto、none的区别和场景

flex:1 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; flex:0 flex-grow: 0; flex-shrink: 1; flex-basis: 0%; flex:auto flex-grow: 1; flex-shrink: 1; flex-basis: auto; flex:none flex-grow: 0; flex-shrink: 0; flex-basis: auto; 详细参考flex属性-flex:1到底是什么 ...

Flex 布局教程：语法篇 - 阮一峰的网络日志

定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。空间不足时缩小的比例是 flex-shrink 为 1 的 n 倍。， 等分剩余空间（自动放大占位）， 占据的空间（放大的比例）是。，即使存在剩余空间，也不会放大。，如果空间不足，该项目将缩小。空间不足时，该项目不会缩小。定义项目的的放大比例。

flex:0,1,auto,none

正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。HTML 元素完全按照源码中出现的先后次序显示出现在另一个元素下面的元素被描述为元素，出现在另一个元素旁边被描述为二、display属性display决定了元素在布局流中的，比如它是像段落、块级容器那样独占一行，还是像文字一样内联排布，或者干脆不显示。：一个块级元素会在其前后自动生成换行（与其兄弟块分行），默认情况下它不会与其他元素并排；：能够设置widthheightmarginpadding。

（块级元素的flex-container）

在了解Flex布局前我们先了解一下盒模型的分类 盒模型分类 盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式 场景 Flex布局的应用场景 场景： 在小程序开发中，需要考虑各种尺寸终端设备上的适配。 在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现 ...

1.css选择器 https://segmentfault.com/a/1190000013745407 2.清除浮动 浮动：浮动后的元素会脱离文档流不占位置 1.父元素设置高度隔开 2.overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性 3.在父元素中，追加空子元素，并设置其clear属性为both 注：使用clear:both之后margin属性会失效, 所以不常用 4.使用内容生成的方式清除浮动 .clearfix:after { content:"."; //生成内

flex:initial是flex的默认属性，具体表现为，当容器有剩余空间不增长，当容器空间不足是会缩小，尺寸自适应内容

大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群我们在日常使用flex布局的时候，经常会用到 flex 缩写。flex简写设置了项目如何增大或缩小以适应在容器中可用的空间。flex简写属性在下面有三个值的定义 默认值为 0 1 auto;flex-grow :定义项目的放大比例，默认为0flex-shrink :定义项目的缩小比例,默认为 ...

的简写，即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但在尺寸不足时会优先最大化内容尺寸。flex:auto 多用于内容固定，或者内容可控的布局场景，例如导航数量不固定，每个导航文字数量也不固定的导航效果就适合使用 flex:auto 效果来实现。flex 是复合属性，是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选。当希望元素充分利用剩余空间，但是各自的尺寸按照各自内容进行分配的时候，适合使用 flex:auto。

.markdown-body { color: rgba(56, 56, 56, 1); font-size: 15px; line-height: 30px; letter-spacing: 2px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open...

flex: 1 将会根据可用空间**平均分配**剩余空间，而 flex: auto 将会**根据内容大小来分配**剩余空间。

不需要自动撑起宽度时，flex的值可以设置为none；设置为auto或者0都不是理想的效果；

flex：1 ->> flex : 1 1 0%; flex: none ->> flex: 0 0 auto; flex: auto ->> flex: 1 1 auto; flex: 0 auto; 或者 flex: initial -->> flex: 0 1 auto; 即为flex的初始值