深入理解Flex属性

时间：2023-04-02 12:35:26 HTML

作者：Ahmadshaded译者：前端小智来源：sitepoint手机阅读：https://mp.weixin.qq.com/s/Tw...点赞关注吧,微信搜索【走向世界的大招】关注这个没有大厂背景，但态度积极向上的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。你有没有想过CSS中的flex属性是如何工作的？它是flex-grow、flex-shrink和flex-basis的简写。开发中最常见的写法是flex:1，表示flex项扩展填充可用空间。接下来，让我们仔细看看它是什么意思。flex-grow属性flex-grow属性定义了item的放大比例，默认为0，即如果有剩余空间，则不放大。flex-grow的值只接受整数。考虑以下代码：

.wrapper{显示：flex;flex-wrap:wrap;}.item{flex-grow:1;}注意：flex-grow影响宽度或高度，具体取决于flex-direction属性。对于以下示例，默认的flex-direction值为row。如果没有flex-grow，弹性项目的宽度将默认为其初始宽度。然而，使用flex-grow:1，弹性项目将平均剩余的可用空间。你可能想知道，弹性项目之间的空间是如何分配的？嗯，这是一个很好的问题，我稍后会回答。在下图中，没有使用flex-grow。换句话说，这是它们的自然大小。要了解弹性项目宽度是如何计算的，您可以参考下面的公式。让我们用CSS计算文本的项目宽度。item-width=((flex-grow/flex-growtotalcount)*availablespace)+initialitem-widthmultipleflex-growvalues在前面的例子中，所有的flex项目都有相同的flex-grow值。现在我们把第一项的flex-grow值改为2，它们是怎么计算的呢？请注意，此示例的可用空间为498px。上图已经解释的很清楚了，这里不再赘述。如果还是不明白，可以多看几遍。flex-grow的值可以用0吗？当然！由于flex-grow属性接受一个整数值，因此可以使用0，这是一种防止flex项目占用可用空间的方法。这在我们希望将flex项目保持在其初始宽度的边缘情况下很有用。flex-grow不会使flexitems相等有一个常见的误解，认为使用flex-grow会使items的宽度相等。这是不正确的，flex-grow所做的是分配可用空间。正如您在公式中看到的，每个flex项目的宽度是根据其初始宽度（应用flex-grow之前的宽度）计算的。如果您希望项目具有相同的宽度，您可以使用flex-basis，这将在下一节中解释。flex-shrink属性flex-shrink属性定义了item的缩小比例，默认为1，即空间不足时，item会收缩。考虑以下示例：中间项的宽度为300px，弹性收缩值为`。如果没有足够的空间容纳所有物品，则允许缩小物品的宽度。.item-2{宽度：300px；flex-shrink:1;}在以下条件下，浏览器会将项目宽度保持在300px：所有项目宽度的总和小于wrapper宽度viewport宽度等于或小于itemBehavioratviewportsize。如图，当viewport的宽度大于300px时，宽度为300px，小于300px时，item的宽度会被压缩到与viewport一样的宽度。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。flex-basis属性flex-basis属性定义项目在分配多余空间之前占据的主轴空间（主要尺寸）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。flex-basis可以设置为与width或height属性相同的值（比如350px，默认值为auto），那么item会占据固定的空间。.item-1{flex-grow:0;伸缩收缩：0；flex-basis:50%;}在上面的例子中，第一项的宽度是50%。这里需要将flex-grow重置为0，防止item宽度超过50%。如果我将flex-basis设置为100%会怎样？此项目单独一行，其他项目包装。flex属性flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。这也说明了flexitem会根据它的内容大小增长flexitemrelativesize.item{/*default,相当于flex:11auto*/flex:auto;弹性项目的大小取决于内容。因此，内容越多的flexitems就会越大。与弹性项目的绝对大小相反，当flex-basis属性设置为0时，所有弹性项目将保持相同的大小。.item{/*等同于flex:110%*/flex:1;}有几点我喜欢flex属性！顾名思义，此属性允许灵活使用其值。请看下面的例子。如果是一个value.item{flex:1;}上面的默认值为110，即flex-grow:1,flex-shrink:1,flex-basic:0。两个值的情况下.item{flex:11;}上面对应的值为110，即flex-grow:1,flex-shrink:1,flex-basic:0一个长度值如果flex值为一个长度值，这适用于flex-basis。flex-grow和flex-shrink默认为1..item{flex:100px;/*flex:11100px*/}Useunitless0有时候，你想将felx-basis设置为0，你可能会这样写：.item{flex:0;}不推荐这样做，因为它会让开发者和浏览器。您是将flex-grow或flex-shirnk设置为0，还是将flex-basis设置为0。因此，您应该添加一个单位，如px或%。.item{弹性：0%；/*flex:110%*/}建议使用flex简写属性当需要设置grow,shrink和basis时，最好使用flex属性。根据CSS规范：建议开发者使用`flex`简写来控制灵活性，而不是直接使用它的普通属性，因为简写会正确地重置任何未指定的组件以适应常见的场景。flex用例用户头像flexbox的一个常见用例是用户组件，其中头像和文本内容应在同一行。

AhmadShadeed

DebuggingCSS作者

.user{显示：flex;弹性包装：包装；对齐项目：中心；}.user__avatar{flex：0070px；宽度：70px；height:70px;}上面是头像添加了flex:0070px。如果此处未设置，在某些较旧的浏览器中，图像看起来会被压缩。除此之外，flex优先于width(flex-direction:row)或height(flex-direction:column)。如果我们只是通过调整flex属性来调整头像的大小，浏览器会忽略宽度。.user__avatar{/*宽度是100px，不是70px*/flex:00100px;宽度：70px；height:70px;}大家都说简历里没有项目可写，所以给大家找了个项目，还给了个【搭建教程】。标题如果你想要一个标题来填充所有可用空间，使用flex:1非常适合这种情况。.page-header{显示：flex;弹性包装：包装；}.page-header__title{flex:1;}输入框表单{display:flex;弹性包装：包装；}输入{弹性：1;/*其他样式*/}假设CSS网格具有两列布局，则对齐两张卡片上的最后一项。这里的问题是日期没有对齐，它们应该在同一行（红色的）。我们可以使用flexbox来做到这一点。标题短通过设置flex-direction:column，我们可以在标题上使用flex-grow来填充可用空间，从而即使标题很短也能将日期保留在末尾。.card{显示：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。在本节中，我们探讨了一些可以合并的想法。对于像上面这样的页脚布局，我们可以这样写：.actions{display:flex;flex-wrap:wrap;}.actions__item{flex:2;}.??actions__item.user{flex:1;}我们可以做扩展动画一件有趣的事情是在悬停时为弹性项目设置动画。这行得通，这是一个简单的例子：.palette{display:flex;flex-wrap:wrap;}.palette__item{flex:1;transition:flex0.3sease-out;}.palette__item:hover{flex:4;}增加用户体验源代码：https://codepen.io/shshaw/pen...当内容大于它的wrapper时不长前段时间，收到一位读者的提问，他的问题是这样的。如图所示，两张图片都应保持在其环绕范围内。.wrapper{display:flex;}.wrapperimg{flex:1;}在这里，即使使用flex:1，图像仍然会溢出。根据CSS规范：默认情况下，弹性项目不会收缩到其最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置min-width或min-height属性。上面这种情况，因为图片太大，flexbox不会缩小图片。要更改此行为，我们需要设置以下内容：.wrapperimg{flex:1;min-width:0;}部署代码后，无法实时知道可能存在的bug，后期解决这些bug需要花费大量时间log??debugging，顺便推荐一个有用的BUG监控工具Fundebug。原文：https://ishadeed.com/article/...每周更新交流文章。微信搜索【大千世界】即可第一时间阅读，回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录，欢迎Star。

上一篇：ServiceWorkers（PWA初体验）

下一篇：【回顾九月份第一周】为什么你的前端工作经验不值钱

深入理解Flex属性相关文章