深刻了解 Flex 属性

时间  2020-09-23 标签 深刻 了解 flex 属性
做者：Ahmad shaded
译者：前端小智
来源：sitepoint
移动端阅读： https://mp.weixin.qq.com/s/Tw...
点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。css

你有没有想过 CSS 中的 flex属性如何工做？ 它是 flex-grow，flex-shrink和flex-basis的简写。 开发中最多见的写法是flex：1，它表示 flex 项目扩展并填充可用空间。前端

接下来，咱们来详细看看它表示是什么意思。git

flex-grow 属性

flex-grow属性定义项目的放大比例，默认为0，即若是存在剩余空间，也不放大。flex-grow的值只接受一个整数。考虑下面代码：github

<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 项目会平均剩余可用的空间。浏览器

clipboard.png

你可能想知道，flex 项目之间的空间是如何分配的?嗯，这是个好问题，稍后会回答。微信

在下面的图中，是没有使用flex-grow状况。换句话说，这是它们的天然大小。app

clipboard.png

要了解 flex 项目宽度的计算方式，能够参考下面的公式。工具

咱们来计算一下文本是 CSS 的项目宽度。布局

clipboard.png

项目宽度 = (( flex-grow / flex-grow 总个数) * 可用空间）+ 初始项目宽度flex

多个 flex-grow 值

在前面的示例中，全部flex项目的flex-grow值都相同。 如今咱们把第一项的flex-grow值改成2。 这们它又是如何计算？ 请注意，本示例的可用空间为498px。

clipboard.png

上图已经解释的很清楚，这里就不在啰嗦了，还不懂的，能够多看几回。

能够用0做为flex-grow的值吗？

固然能够！由于flex-grow属性接受整数值，因此可使用0,能够防止 flex 项目占用可用空间的一种方式。

clipboard.png

这在边界状况下很是有用，咱们但愿使 flex 项目保持其初始宽度。

flex-grow 不能让 flex 项目相等

有一个常见的误解，使用flex-grow会使项目的宽度相等。这是不正确的，flex-grow的做用是分配可用空间。正如在公式中看到的，每 flex 项目的宽度是基于其初始宽度计算的(应用flex-grow以前的宽度)。

若是你想让项目的宽度相等，可使用flex-basis，这个在接下来的部分会对此进行讲解。

flex-shrink 属性

flex-shrink属性定义了项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。

考虑下面的例子：中间的项目宽度为300px，flex-shrink的值为`。若是没有足够的空间来容纳全部的项目，则容许项目缩小宽度。

clipboard.png

.item-2 {
    width: 300px;
    flex-shrink: 1;
}

在下列条件下，浏览器会保持项目宽度为300px:

  • 全部项目宽度的总和小于包装器宽度
  • 视窗宽度等于或小于项目

下面是项目在不一样视口大小下的行为。

clipboard.png

如图所示，在视口宽度大于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%;
}

clipboard.png

在上面的例子中，第一项的宽度为50%。这里须要将flex-grow重置为0，以防止项目宽度超过50%。

若是将 flex-basis 设置为 100%，会怎么样？该项目单独占一行，其余项目将换行。

clipboard.png

flex 属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。这也说 flex 项目会根据其内容大小增加

flex 项目相对大小

.item {
    /* 默认值，至关于 flex：1 1 auto */
    flex: auto;
}

flex 项目的大小取决于内容。所以，内容越多的flex项目就会越大。

clipboard.png

flex 项目绝对大小

相反，当flex-basis属性设置为0时，全部flex项目大小会保持一致。

.item {
    /* 至关于  flex: 1 1 0% */
    flex: 1;
}

clipboard.png

我喜欢 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 用例

用户头像

clipboard.png

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;
}

你们都说简历没项目写，我就帮你们找了一个项目，还附赠【搭建教程】。

头部

clipboard.png

若是想让一个标题填满全部可用的空间，使用flex: 1很是适合这种状况。

.page-header {
    display: flex;
    flex-wrap: wrap;    
}

.page-header__title {
    flex: 1;
}

输入框

clipboard.png

form {
    display: flex;
    flex-wrap: wrap;    
}

input {
    flex: 1;
    /* Other styles */
}

在两张卡片上对齐最后一项

clipboard.png

假设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

clipboard.png

像上面这样的布局， 咱们能够这样写：

.actions {
    display: flex;
    flex-wrap: wrap;
}

.actions__item {
    flex: 2;
}

.actions__item.user {
    flex: 1;
}

扩展动画

clipboard.png

咱们能够作的一件有趣的事情是在悬停时为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...

当内容大于其包装器时

clipboard.png

不久前，我收到一个读者的问题，他的问题以下。 如图所示，两个图像应保留在其包装的边界内。

.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。

联系我们 沪ICP备13005482号-10