深入了解Flex属性

时间：2023-03-17 17:46:31 科技观察

你有没有想过CSS中的flex属性是如何工作的？它是flex-grow、flex-shrink和flex-basis的缩写。开发中最常见的写法是flex:1，表示flex项扩展填充可用空间。接下来，让我们仔细看看它是什么意思。flex-grow属性flex-grow属性定义了item的放大比例，默认为0，即如果有剩余空间，则不放大。flex-grow的值只接受整数。考虑以下代码：

.wrapper{display: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/totalnumberofflex-grows)*availablespace)+initialitem-widthmultipleflex-growvalues在前面的例子中，所有的弹性项目都有相同的flex-grow值。现在我们把第一项的flex-grow值改为2，它是怎么计算的呢？请注意，此示例的可用空间为498px。上图已经解释的很清楚了，这里不再赘述。如果还是不明白，可以多看几遍。是否可以使用0作为flex-grow值？当然可以！因为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{width:300px;flex-shrink:1;}浏览器会在以下条件下保持项目宽度为300px：所有项目宽度的总和小于包装宽度视口宽度等于或小于比下面的项目是在视口大小的不同行为中的项目。如图，当viewport的宽度大于300px时，宽度为300px，小于300px时，item的宽度会被压缩到与viewport一样的宽度。flex-basis属性flex-basis属性定义项目在分配多余空间之前在主轴（主要尺寸）上占据多少空间。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。flex-basis可以设置为与width或height属性相同的值（比如350px，默认值为auto），那么item会占据固定的空间。.item-1{flex-grow:0;flex-shrink:0;flex-basis:50%;}在上面的例子中，第一个项目的宽度是50%。这里需要将flex-grow重置为0，防止item宽度超过50%。如果我将flex-basis设置为100%会怎样？该项目单独一行，其他项目换行。flex属性flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。这也说明了一个flexitem是根据它的contentsize增长的（1）flexitemrelativesize.item{/*default,equivalenttoflex:11auto*/flex:auto;}flexitem的大小取决于内容。因此，内容越多的flexitems就会越大。(2)flexitem的绝对大小正好相反。当flex-basis属性设置为0时，所有弹性项目的大小将保持不变。.item{/*等同于flex:110%*/flex:1;}flex属性有几点我喜欢！顾名思义，此属性允许其值具有灵活性。请看下面的例子。(1)在一个值的情况下：上面的.item{flex:1;}对应默认值110，即flex-grow:1,flex-shrink:1,flex-basic:0。(2)两个值：.item{flex:11;}对应110，即flex-grow:1,flex-shrink:1,flex-basic:0。(3)一个长度值：如果flex值是一个长度值，这适用于flex-basis。flex-grow和flex-shrink默认为1。.item{flex:100px;/*flex:11100px*/}(4)使用unitless0有时，你想将felx-basis设置为0，你可以这样写：.item{flex:0;}不推荐这样做，因为它会使开发人员和浏览器感到困惑。您是将flex-grow或flex-shirnk设置为0，还是将flex-basis设置为0。因此，您应该添加一个单位，如px或%。.item{flex:0%;/*flex:110%*/}推荐使用flex简写属性当需要设置grow,shrink和basis时，最好使用flex属性。根据CSS规范：建议开发者使用`flex`简写来控制灵活性，而不是直接使用它的普通属性，因为简写会正确地重置任何未指定的组件以适应常见的场景。flex用例（一）用户头像flexbox的一个常见用例是用户组件，头像和文字内容要在同一行。

AhmadShadeed

AuthorofDebuggingCSS

.user{display:flex;flex-wrap:wrap;align-items:center;}.user__avatar{flex:0070px;width:70px;height:70px;}为上面的头像添加了flex:0070px。如果此处未设置，在某些较旧的浏览器中，图像看起来会被压缩。除此之外，flex优先于width(flex-direction:row)或height(flex-direction:column)。如果我们只是通过调整flex属性来调整头像的大小，浏览器会忽略宽度。.user__avatar{/*widthis100px,not70px*/flex:00100px;width:70px;height:70px;}(2)如果你想让一个标题填满所有可用空间，使用flex:1很适合这个情况。.page-header{display:flex;flex-wrap:wrap;}.page-header__title{flex:1;}(3)输入框表单{display:flex;flex-wrap:wrap;}input{flex:1;/*Otherstyles*/}(4)假设CSS网格具有两列布局，则对齐两张卡片上的最后一项。这里的问题是日期没有对齐，它们应该在同一行（红色的）。我们可以使用flexbox来做到这一点。Titleshort通过设置flex-direction:column，我们可以在header上使用flex-grow让它填满可用空间，这样即使header很短，日期也能保持在最后。.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。在本节中，我们探索一些想法，可以被纳入。(1)footerlayout如上，我们可以这样写：.actions{display:flex;flex-wrap:wrap;}.actions__item{flex:2;}.actions__item.user{flex:1;}(2)Extended动画我们可以做的一件有趣的事情是在悬停时为弹性项目设置动画。这有效，这是一个简单的例子：.palette{display:flex;flex-wrap:wrap;}.palette__item{flex:1;transition:flex0.3sease-out;}.palette__item:hover{flex:4;}(3）添加用户体验源码：https://codepen.io/shshaw/pen/EbjvbQ（4）Whenthecontentisbiggerthanitswrapper前不久，收到一个读者的提问，他的提问如下.如图所示，两张图片都应保持在其环绕范围内。.wrapper{display:flex;}.wrapperimg{flex:1;}在这里，即使使用flex:1，图像仍然会溢出。根据CSS规范：默认情况下，弹性项目不会收缩到其最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置min-width或min-height属性。上面这种情况，因为图片太大，flexbox不会缩小图片。要改变这个行为，我们需要设置如下：.wrapperimg{flex:1;min-width:0;}本文转载自微信公众号「大运世界」，您可以通过以下二维码关注。转载请联系****公众号。

上一篇：程序员过关--领导说我班的职责不单一

下一篇：昔日的HTC、三星，今日的苹果：寒冬过后，手机厂商会明白的潜规则

深入了解Flex属性相关文章