Flex 레이아웃의 세 가지 속성인 flex-grow, flex-shrink, flex-basis를 살펴보세요.

이 기사는 CSS Flex 레이아웃의 세 가지 속성인 flex-grow, flex-shrink 및 flex-basis에 대한 심층적인 이해를 제공합니다. 도움이 되기를 바랍니다.

【추천 학습: css 비디오 튜토리얼, 웹 프론트엔드】

우리 일상적인 개발에서 플렉스 레이아웃은 우리 중 많은 사람들에게 흔한 일이라고 할 수 있습니다. 아마도 우리가 더 자주 사용하는 것은 수직 센터링인데, 다음과 같은 코드입니다:

.flex-box{
  display: flex;
  justify-content: center;
  align-items: center;
}

아주 잘 작성되었습니다(^_^)! 그렇다면 우리 모두는 이것이 상위 요소에 정의되어 있고 레이아웃 효과가 하위 요소에 적용된다는 것을 알고 있습니다 ! 오른쪽! 그런데 우리는 이 질문에 대해 생각해 본 적이 있나요?

• 모든 하위 요소의 너비의 합이 상위 요소의 너비보다 크다면 이때 하위 요소는 어떻게 변경되나요?
• 모든 하위 요소의 너비의 합이 상위 요소의 너비보다 작다면 이때 하위 요소는 어떻게 변경되나요?

이 두 가지 문제와 해결 방법에 대해 걱정하지 마세요! 먼저 flex-grow, flex-shrink, flex-basis 세 가지 요소가 무엇인지, 어떻게 사용하는지 함께 알아볼까요?

1 flex-grow

• flex-grow: 성장의 중국어 의미는 expand이며, 상위 요소의 남은 공간의 상대적 비율을 할당하는 데 사용됩니다. 기본값은 0입니다. 먼저 예를 살펴보겠습니다. 扩大，用来分配父元素剩余空间的相对比例。默认值为0。我们先看一个例子：

/* 父元素 */
.flex-box{
    display: flex;
    width: 300px;
    height: 300px;
    margin:0 auto;
    background-color: #000;
}

/* 子元素left */
.left{
    flex-grow: 1;
    width: 100px;
    background-color: orange;
}
/* 子元素right */
.right{
    flex-grow: 0;
    width:100px;
    background-color: cyan;
}

上面我们可以看出子元素left和right的宽度之和为200px，而父元素宽度为300px，也就是说父元素还有空余空间，而真正的效果如图所示。

我们会发现子元素left的宽度会变成200px，这就是flex-grow的作用了，flex-grow为0不做处理，而left盒子的flex-grow为1。也就是剩余宽度空间全部分配给了left盒子，假如flex-grow属性变成这样呢？

/* 子元素left */
.left{
    ...
    flex-grow: 3;
    ...
}
/* 子元素right */
.right{
    ...
    flex-grow: 1;
    ...
}

这样处理的话也就是剩余空间按照left:right为3:1处理，多出来的空间：300px-(100px+100px)=100px；left的宽度：100px+100px*(100px*3/(100*3+100*1)) = 175px;right的宽度：100px+100px*(100px*1/(100*3+100*1)) = 125px；这就解析了当所有子元素宽度之和小于父元素宽度之和时，子元素如何处理？这个问题了。

注意地，如果所有子元素的flex-grow的值是一样的话，那么剩余空间就按照平均分配。

2 flex-shrink

• flex-shrink：shrink的中文意思是收缩，用来指定flex元素的收缩规则。默认值为1。我们先看一个例子：

/* 父元素 */
.flex-box{
    display: flex;
    width: 300px;
    height: 300px;
    ...
}
/* 子元素left */
.left{
    flex-shrink: 3;
    width: 200px;
    background-color: orange;
}
/* 子元素right */
.right{
    flex-shrink: 1;
    width:200px;
    background-color: cyan;
}

首先，所有子元素宽度之和大于父元素宽度（200px+200px>300px）。由于父元素的宽高都是固定的，所以不能撑大父元素，只能缩小子元素。子元素flex-shrink的比为3:1，所以子元素left的宽度为：200px-100px*(200px*3/(200px*3+200px*1)) = 125px；子元素right的宽度为：200px-100px*(200px*1/(200px*3+200px*1)) = 175px；这样也就解析了当所有子元素的宽度和大于父元素宽度和的时候，子元素是如何处理的这个问题的了。

3 flex-basis

• flex-basis：basis的中文意思是基准

    .flex-box{
        display: flex;
        width: 300px;
        height: 300px;
        margin:0 auto;
        background-color: #000;
    }

    .left{
        width: 200px;
        flex-basis: 100px;
        background-color: orange;
    }
    .right{
        width:100px;
        background-color: cyan;
    }

위에서 왼쪽과 오른쪽 하위 요소의 너비 합은 200px인 반면 상위 요소의 너비는 300px입니다. 이는 상위 요소가 여전히 무료임을 의미합니다. 공간, 그리고 실제 효과는 표시된 그림과 같습니다.

우리는 찾을 것입니다 왼쪽 하위 요소의 너비는 200px이 됩니다. 이는 flex-grow가 0이고 처리되지 않는 반면 왼쪽 상자의 flex-grow는 1입니다. 즉, 남은 너비 공간은 모두 왼쪽 상자에 할당됩니다. flex-grow 속성이 이렇게 되면 어떻게 될까요?

flex:flex-grow flex-shrink flex-basis;
/*记忆法：g（拱）s（？）b（？）后面两个字懂了吧^_^*/

🎜이렇게 처리하면 남은 공간은 왼쪽:오른쪽 비율 3:1에 따라 처리됩니다. 추가 공간: 🎜300px-(100px+100px)=100px🎜; code>100px+100px*(100px *3/(100*3+100*1)) = 175px; 오른쪽 너비: 100px+100px*(100px*1/(100*3+100*) 1)) = 125px code>;모든 하위 요소의 너비 합이 상위 요소 너비의 합보다 작은 경우 하위 요소를 처리하는 방법을 설명합니다. 이것이 문제입니다. 🎜<blockquote>🎜모든 하위 요소의 flex-grow 값이 동일하면 남은 공간이 균등하게 분배됩니다. 🎜</blockquote>🎜<img src="https://img.php.cn/upload/article/000/000/024/ab1d62b0ef8deb245bfd0d839384b58e-1.png" alt="Flex 레이아웃의 세 가지 속성인 flex-grow, flex-shrink, flex-basis를 살펴보세요." loading="lazy">🎜<h2 data-id="heading-1">2 flex-shrink🎜🎜🎜🎜flex-shrink🎜: 축소의 중국어 의미는 <code>shrink이며 축소 규칙을 지정하는 데 사용됩니다. 플렉스 요소의 기본값은 1입니다. 먼저 예를 살펴보겠습니다. 🎜🎜

/*父元素*/
.flex{
    display: flex;
    width: 200px;
    height: 100px;
    margin:0 auto;
    background-color: #000;
}

/*子元素*/
.left{
    flex:3 2 50px;
    background-color: orange;
}

/*子元素*/
.right{
    flex:2 1 200px;
    background-color: cyan;
}

🎜첫째, 모든 하위 요소 너비의 합이 상위 요소 너비보다 큽니다(🎜200px+200px>300px🎜). 상위 요소의 너비와 높이는 고정되어 있으므로 상위 요소는 확대할 수 없고 하위 요소는 축소만 가능합니다. 하위 요소의 유연한 축소 비율은 3:1이므로 왼쪽 하위 요소의 너비는 200px-100px*(200px*3/(200px*3+200px*1)) = 125px입니다. code>; 오른쪽 요소의 너비는 <code>200px-100px*(200px*1/(200px*3+200px*1)) = 175px입니다. 모든 하위 요소가 상위 요소보다 큽니다. 너비와 너비가 서로 같을 때 하위 요소는 이 문제를 어떻게 처리합니까? 🎜

3 flex-basis🎜🎜🎜🎜flex-basis🎜: 기저의 중국어 의미는 기저로, 크기를 지정하는 데 사용됩니다. 하위 요소 콘텐츠 상자. 기본값은 자동입니다. 먼저 다음 예를 살펴보겠습니다. 🎜🎜rrreee🎜🎜주의 깊게 살펴보니 왼쪽의 너비가 좀 이상한 것 같죠? 위의 왼쪽은 너비: 200px를 정의하지 않습니다. 효과가 100px인 이유는 무엇입니까? 실제로 flex-basis가 벤치마크라는 것은 모두 알고 있습니다. 실제로 flex 레이아웃에서는 이 속성이 width보다 우선순위가 높습니다. flex-basis와 width가 모두 존재하는 경우 이전 값이 우선합니다. 좋아요, 좋아요, 우리는 세 가지 요소를 모두 배웠습니다. 요약해 보겠습니다. 🎜

• flex-grow：值大于0，主要是解决父元素宽度大于所有子元素宽度之和时，子元素合理分配父元素剩余空间。值为0时，子元素盒子空间不做扩大处理。
• flex-shrink：值大于0，主要是解决父元素宽度小于所有子元素宽度之和时，子元素缩小宽度以适应父元素宽度，值为0时，子元素盒子空间不做缩小处理。
• flex-basis：其实也可以理解为在flex布局下，一个高优先级的宽度。

4 结合flex属性使用

除了上面各自分开使用这三个属性，还可以盒子一起使用也就是：

flex:flex-grow flex-shrink flex-basis;
/*记忆法：g（拱）s（？）b（？）后面两个字懂了吧^_^*/

flex属性可以灵活处理这三个属性，可以单值、双值处理，这样的话，flex属性分别代表什么？

• 当flex为单值时，可代表一个无单位数（默认为flex:number 1 0;）、一个有效宽度值（flex:100px，即是flex-basis）、或者特殊值（none、auto、initial）

none：元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为flex: 0 0 auto。

auto：会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 flex: 1 1 auto。

initial：它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。

• 当flex为双值时，第一个数必须为无单位数（代表flex-grow）、第二个数为一个无单位数（flex-shrink）或一个有效宽度（flex-basis）

5 一道笔试题

• 以下布局在页面上的宽度比是？

/*父元素*/
.flex{
    display: flex;
    width: 200px;
    height: 100px;
    margin:0 auto;
    background-color: #000;
}

/*子元素*/
.left{
    flex:3 2 50px;
    background-color: orange;
}

/*子元素*/
.right{
    flex:2 1 200px;
    background-color: cyan;
}

从上面我们可以看到子元素的flex值太复杂，其实我们可以先不看前面两值，先看最后一值（flex-basis）。如果所有子元素的flex-basis之和大于父元素之和考虑第一个值，如果所有子元素的flex-basis之和小于父元素之和考虑第二个值。上面所有子元素宽度50px+200px=250px大于父元素宽度200px，所以考虑第二个值也就是子元素left和子元素right的flex-shrink属性比2:1，超出部分50px这样处理left的宽度缩小为：50px-50px*(50px*2/(50px*2+200px*1)) = 33.34;right的宽度为：200px-50px*(200px*2/(50px*2+200px*1)) = 166.66。 所以上面题目答案为33.34:166.66 = 1:5

【推荐学习：web前端开发】

위 내용은 Flex 레이아웃의 세 가지 속성인 flex-grow, flex-shrink, flex-basis를 살펴보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!