作者：Ahmad shaded
译者：前端小智
起源：sitepoint
挪动端浏览：https://mp.weixin.qq.com/s/Tw...
点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
你有没有想过 CSS 中的 flex属性如何工作？ 它是 flex-grow，flex-shrink和flex-basis的简写。 开发中最常见的写法是flex：1，它示意 flex 我的项目扩大并填充可用空间。
接下来，咱们来具体看看它示意是什么意思。
flex-grow 属性
flex-grow属性定义我的项目的放大比例，默认为0，即如果存在残余空间，也不放大。flex-grow的值只承受一个整数。思考上面代码：
<div class="wrapper"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div></div>.wrapper { display: flex; flex-wrap: wrap;}.item { flex-grow: 1;}留神：flex-grow会影响宽度或高度，具体取决于flex-direction属性。 对于以下示例，默认的flex-direction的值都是row。
在不应用flex-grow的状况下，flex 我的项目的宽度将默认为其初始宽度。 然而，应用flex-grow: 1时，flex 我的项目会均匀残余可用的空间。
你可能想晓得，flex 我的项目之间的空间是如何调配的?嗯，这是个好问题，稍后会答复。
在上面的图中，是没有应用flex-grow状况。换句话说，这是它们的天然大小。
要理解 flex 我的项目宽度的计算形式，能够参考上面的公式。
咱们来计算一下文本是 CSS 的我的项目宽度。
我的项目宽度 = (( flex-grow / flex-grow 总个数) * 可用空间）+ 初始我的项目宽度
多个 flex-grow 值
在后面的示例中，所有flex我的项目的flex-grow值都雷同。 当初咱们把第一项的flex-grow值改为2。 这们它又是如何计算？ 请留神，本示例的可用空间为498px。
上图曾经解释的很分明，这里就不在啰嗦了，还不懂的，能够多看几次。
能够用0作为flex-grow的值吗？
当然能够！因为flex-grow属性承受整数值，所以能够应用0,能够避免 flex 我的项目占用可用空间的一种形式。
这在边界状况下十分有用，咱们心愿使 flex 我的项目放弃其初始宽度。
flex-grow 不能让 flex 我的项目相等
有一个常见的误会，应用flex-grow会使我的项目的宽度相等。这是不正确的，flex-grow的作用是调配可用空间。正如在公式中看到的，每 flex 我的项目的宽度是基于其初始宽度计算的(利用flex-grow之前的宽度)。
如果你想让我的项目的宽度相等，能够应用flex-basis，这个在接下来的局部会对此进行解说。
flex-shrink 属性
flex-shrink属性定义了我的项目的放大比例，默认为1，即如果空间有余，该我的项目将放大。
思考上面的例子：两头的我的项目宽度为300px，flex-shrink的值为`。如果没有足够的空间来包容所有的我的项目，则容许我的项目放大宽度。
.item-2 { width: 300px; flex-shrink: 1;}在下列条件下，浏览器会放弃我的项目宽度为300px:
- 所有我的项目宽度的总和小于包装器宽度
- 视窗宽度等于或小于我的项目
上面是我的项目在不同视口大小下的行为。
如图所示，在视口宽度大于300px时，宽度为300px，少于 300px，该项目标宽度就被压缩成跟视口一样的宽度。
大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
flex-basis 属性
flex-basis属性定义了在调配多余空间之前，我的项目占据的主轴空间（main size）。浏览器依据这个属性，计算主轴是否有多余空间。它的默认值为auto，即我的项目的原本大小。
flex-basis能够设为跟width或height属性一样的值（比方350px，默认值为 auto），则我的项目将占据固定空间。
.item-1 { flex-grow: 0; flex-shrink: 0; flex-basis: 50%;}在下面的例子中，第一项的宽度为50%。这里须要将flex-grow重置为0，以避免我的项目宽度超过50%。
如果将 flex-basis 设置为 100%，会怎么样？该我的项目独自占一行，其余我的项目将换行。
flex 属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。这也说 flex 我的项目会依据其内容大小增长
flex 我的项目绝对大小
.item { /* 默认值，相当于 flex：1 1 auto */ flex: auto;}flex 我的项目的大小取决于内容。因而，内容越多的flex我的项目就会越大。
flex 我的项目相对大小
相同，当flex-basis属性设置为0时，所有flex我的项目大小会保持一致。
.item { /* 相当于 flex: 1 1 0% */ flex: 1;}我喜爱 flex 属性的几个点！
顾名思义，此属性能够灵便应用其值。 请看上面的例子。
一个值的状况
.item { flex: 1;}下面默认对应的值是 1 1 0，也就是 flex-grow: 1，flex-shrink:1, flex-basic: 0。
两个值的状况
.item { flex: 1 1;}下面对应的值是 1 1 0，也就是 flex-grow: 1，flex-shrink:1, flex-basic: 0。
一个长度值
如果 flex 值是一个长度值，这会作用于flex-basis。 flex-grow和flex-shrink默认为1。
.item { flex: 100px; /* flex: 1 1 100px */}应用无单位0
有时，你想把 felx-basis 设置为 0，你可能会这样写：
.item { flex: 0;}不倡议这样做，因为让开发人员和浏览器感到困惑。 你到底是要把 flex-grow 或者 flex-shirnk 设置为 0，还是将 flex-basis 设置为 0。
所以，你应该增加一个单位，如px或%。
.item { flex: 0%; /* flex: 1 1 0% */}倡议应用 flex 简写属性
当你须要设置grow、shrink和basis时，最好应用flex属性来实现这个目标。
依据 CSS 标准：
倡议开发者应用 `flex` 简写来管制灵活性，而不是间接应用它的一般属性，因为简写的能够正确地重置任何未指定的组件以适应常见情景。flex 用例
用户头像
flexbox 的一个常见用例是用户组件，头像和文本内容应该在同一行。
<div class="user"> <img class="user__avatar" src="shadeed.jpg" alt="" /> <div> <h3>Ahmad Shadeed</h3> <p>Author of Debugging CSS</p> </div></div>.user { display: flex; flex-wrap: wrap; align-items: center;}.user__avatar { flex: 0 0 70px; width: 70px; height: 70px;}下面为 头像 增加了 flex：0 0 70px。 如果这里不这样设置，在某些旧版浏览器，图像看起来像被压缩的一样。 除此之外，flex 的优先级高于width属性（flex-direction: row）或height（flex-direction: column）。
如果咱们仅通过调整flex属性来扭转头像的大小，那么width将被浏览器疏忽。
.user__avatar { /* width 是 100px, 不是 70px */ flex: 0 0 100px; width: 70px; height: 70px;}大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
头部
如果想让一个题目填满所有可用的空间，应用flex: 1非常适合这种状况。
.page-header { display: flex; flex-wrap: wrap; }.page-header__title { flex: 1;}输入框
form { display: flex; flex-wrap: wrap; }input { flex: 1; /* Other styles */}在两张卡片上对齐最初一项
假如CSS grid具备两列布局。这里的问题是日期没有对齐，它们应该在同一条线上(红色那条)。
咱们能够应用flexbox做到这一点。
<div class="card"> <img src="thumb.jpg" alt=""> <h3 class="card__title">Title short</h3> <time class="card__date"></time></div>通过设置flex-direction: column，咱们能够在题目上应用flex-grow使其填充可用空间，这样，即便题目很短也将日期保留在开端。
.card { display: flex; flex-direction: column;}/* 第一个解决方案 */.card__title { flex-grow: 1;}同样，无需应用flex-grow也可实现，咱们应用margin-top: auto
/* 第二个解决方案*/.card__date { margin-top: auto;}用例 - 多个 flex 属性
这里的意思是应用flex-grow或flex-shrink，但值不为1。在本节中，咱们会探讨一些能够将其合并的想法。
footer
像下面这样的布局， 咱们能够这样写：
.actions { display: flex; flex-wrap: wrap;}.actions__item { flex: 2;}.actions__item.user { flex: 1;}扩大动画
咱们能够做的一件乏味的事件是在悬停时为flex我的项目设置动画。 这很有用的，上面是一个简略的例子：
.palette { display: flex; flex-wrap: wrap;}.palette__item { flex: 1; transition: flex 0.3s ease-out;}.palette__item:hover { flex: 4;}减少的用户体验
源码：https://codepen.io/shshaw/pen...
当内容大于其包装器时
不久前，我收到一个读者的问题，他的问题如下。 如图所示，两个图像应保留在其包装的边界内。
.wrapper { display: flex;}.wrapper img { flex: 1;}这里，即便 应用了 flex: 1，图像依然会溢出。 依据CSS标准：
默认状况下，flex 我的项目不会放大到其最小内容大小（最长的单词或固定大小的元素的长度）以下。 要更改此设置，请设置min-width或min-height属性。
下面状况，是因为图片太大，flexbox不会放大图片。 要更改此行为，咱们须要设置以下内容：
.wrapper img { flex: 1; min-width: 0;}代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
原文：https://ishadeed.com/article/...
交换
文章每周继续更新，能够微信搜寻【大迁世界 】第一工夫浏览，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送Star。