집 > 기사 > 웹 프론트엔드 > 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사

세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사

青灯夜游앞으로: 2022-08-30 19:50:172032검색

개발할 때 flex 속성을 사용하여 유연한 상자의 하위 요소에 작동하는 경우가 많습니다(예: flex:1 또는 flex: 1 1 auto). , 이 속성은 요소의 동작을 어떻게 제어합니까? flex:1은 정확히 무엇을 의미하나요? 이 글을 통해 flex 속성을 철저하게 이해해 보세요! [추천 학습: css 동영상 튜토리얼]flex:1或者flex: 1 1 auto，那么这个属性到底控制了元素怎么的行为呢？flex:1又究竟是什么含义呢？让这篇文章带你彻底了解 flex 属性吧！【推荐学习：css视频教程】首先我们需要了解，flex 是三个属性 flex-grow 、flex-shrink 、flex-basis的简写，可以使用一个、两个、或者三个值指定 flex 属性。具体语法可以参考MDN-flex 接下来我们逐一拆解这三个属性对元素的影响

flex-basis

flex-basis 定义了空间分配发生之前初始化 flex 子元素的尺寸，属性默认值 auto； flex 子元素未伸张和收缩之前，它的大小是多少。如果 flex-basis 设置为 auto , 浏览器会先检查 flex 子元素的主尺寸是否设置了 flex 子元素的初始值。比如说你已经给你的 flex 子元素设置了 150px 的宽，则 150px 就是这个 flex 子元素的 flex-basis；如果没有设置，则 auto 会解析为其内容的大小。这个例子中，给第一个元素设置宽度150px，第二、三个元素不设置宽度。

:first-child {
  width: 150px;
}

效果如下：

如果你想 flexbox 完全忽略 flex 子元素的尺寸就设置 flex-basis 为 0。这样就算元素一设置了宽度，它最终的宽度也是内容宽度。 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사

正负自由空间

在介绍剩下两个属性前先看两个概念 positive free space 正向自由空间和 negative free space反向自由空间:

正向自由空间比如说，现在有 500px 宽的 flex 容器，flex-direction 属性值为 row, 三个 100px 宽的 flex 子元素，那么没有被填充的 200px 的就是正向自由空间(positive free space)。

反向自由空间当子元素的宽度总和大于容器宽度时，溢出的尺寸100px就是反向自由空间。

那么用什么属性分配正负自由空间呢？

flex-grow

flex-grow 默认值 0

flex-grow

flex-shrink

flex-basis

MDN-flex를 참조하세요.

다음으로 이 세 가지 속성이 요소에 미치는 영향을 하나씩 분석해 보겠습니다.

flex-basis

flex-based는 공간 할당이 발생하기 전 초기화된 flex 하위 요소의 크기를 정의합니다. 기본값은 auto입니다. 수축한다. 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사

flex-basis가 auto로 설정된 경우 브라우저는 먼저 flex 하위 요소의 기본 크기가 flex 하위 요소의 초기 값으로 설정되어 있는지 확인합니다. 🎜🎜예를 들어 flex 하위 요소에 대해 너비를 150px로 설정한 경우 150px가 이 flex 하위 요소의 flex-basis가 됩니다. 설정하지 않으면 자동이 해당 콘텐츠의 크기로 결정됩니다. 이 예에서는 첫 번째 요소의 너비가 150px로 설정되었으며 두 번째 및 세 번째 요소에는 너비가 없습니다. 🎜

.flex-grow-father {
  width: 500px;
  div:nth-child(1) {
    width: 50px;
  }
  div:nth-child(2) {
    width: 100px;
  }
  div:nth-child(3) {
    width: 150px;
  }
}

🎜효과는 다음과 같습니다: 🎜🎜 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사

🎜🎜flexbox가 flex 하위 요소의 크기를 완전히 무시하도록 하려면 flex-basis를 0으로 설정하세요. 이런 방식으로 요소 1에 너비가 설정되어 있더라도 최종 너비는 콘텐츠 너비가 됩니다. 🎜🎜 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사

🎜

양수 및 음수 여유 공간

🎜나머지 두 속성 양수 여유 공간 양수 여유 공간을 소개하기 전에 두 가지 개념을 살펴보겠습니다. space 및 음수 여유 공간 역 여유 공간:🎜

🎜앞으로 여유 공간🎜🎜예를 들어 500px 너비의 플렉스 컨테이너가 있고 flex-direction 속성 값은 행입니다. 3개의 100px 너비 플렉스 하위 요소가 있는 경우 채워지지 않은 200px은 양수 여유 공간입니다. 🎜🎜🎜🎜🎜
- 🎜역방향 여유 공간🎜🎜하위 요소의 너비의 합이 컨테이너 너비보다 큰 경우 오버플로 크기 100px이 역방향 여유 공간입니다. 🎜🎜🎜🎜🎜 🎜그렇다면 양수 및 음수 여유 공간을 할당하는 데 어떤 속성이 사용됩니까? 🎜
  flex-grow
  - flex-grow 기본값 0, 양의 정수에 할당되면 flex 요소는 flex-basis를 기준으로 주축을 따라 크기가 늘어나고 사용 가능한 공간을 차지합니다. flex-grow는 비례적으로 성장 공간을 할당합니다. 🎜🎜🎜초기 상태: 세 요소 모두에 대한 너비를 설정했으며 그 합은 주축 너비보다 크지 않습니다🎜<pre class="brush:php;toolbar:false">.with-same-flex-grow { * { flex-grow: 1; } }</pre>🎜🎜🎜<p>增加的宽度计算方法：假设元素的 <code>flex-grow 值为 x，正向自由空间宽度为l，则每个元素增加的宽度= $\frac{x}{x的总和}*l$ ，元素最终宽度 = $元素初始宽度 + 增加的宽度$ ；
    - 相同比例增长：当给每个子元素的都设定相同的 flex-grow 值，每个元素就会增长相同的宽度
```
.with-same-flex-grow {
  * {
    flex-grow: 1;
  }
}
```
    效果如下：
    
    이 예에서 첫 번째 요소의 너비 계산 $frac{1}{1+1+1}*200 + 50 = 116.67px$
    第二个元素宽度宽度计算 $\frac{1}{1+1+1}*200 + 100 = 166.67px$ ；
    
    第三个同理为 $216.67px$
    - 不同比例增长：给每个子元素的都设定不同的 flex-grow 值
```
.with-different-flex-grow {
  div:nth-child(1) {
    flex-grow: 2;
  }
  div:nth-child(2) {
    flex-grow: 1;
  }
  div:nth-child(3) {
    flex-grow: 1;
  }
}
```
    效果如下：
    
    이 예에서 첫 번째 요소의 너비 계산 $frac{2}{2+1+1}*200 + 50 = 150px$
    第二个元素宽度的计算 $\frac{1}{2+1+1}*200 + 100 = 150px$ ；
    
    第三个同理是 $200px$
    - 如果想让开始时尺寸不同的元素内容宽度相等（平分容器宽度），可以将 flex-basis 设置为 0（完全忽略 flex 子元素的尺寸） flex-grow 为 1（等比例分配）
```
.average {
  * {
    /* flex: 1 1 0; */
    flex-basis: 0;
    flex-grow: 1;
  }
}
```
    效果如下：
    
    flex-shrink
    
    flex-shrink 属性指定了 flex 元素的缩小值,默认值为 1；它确定在分配 negative free space 时，flex 子元素相对于 flex 容器中其余 flex 子元素收缩的程度。默认值 1。用于减少盒子空间使盒子适应容器而不溢出(为了避免 border 干扰去掉边框)
    
    我们给三个元素都设定宽度，并且总和大于主轴宽度；这里我们将元素的flex-shrink值设置为 0 (元素宽度不变，不需要吸收溢出的宽度)，目的是观察一下反向自由空间。
```
.flex-shrink-wrapper {
  display: flex;
  div:nth-child(1) {
    width: 100px;
    background: gold;
  }
  div:nth-child(2) {
    width: 200px;
    background: tan;
  }
  div:nth-child(3) {
    width: 300px;
    background: gold;
  }
}
.zero {
  * {
    flex-shrink: 0;
  }
}
```
    흡수 폭 계산: 각 flex-shrink의 값이 $x_n$ , 요소의 초기 너비는 $l_n$ auto $n x$ + $x. \frac{n_{✽} l n_{auto}}{L}$
    - 给子元素相同的 flex-shrink 值，这里以默认值 1 为例
```
.with-same-flex-shrink {
  * {
    flex-shrink: 1;
  }
}
```
    이 때, 첫 번째 요소의 흡수 폭은 $* ㅋㅋㅋ 분수{1*100}{1*100+1 *200 +1*300}*100 = 16.67px \frac{}{1 ✽ 100 +} auto 200 + 1 ✽ 3$ p $1$
    - 给子元素不同的 flex-shrink 值
```
.with-different-flex-shrink {
  div:nth-child(1) {
    flex-shrink: 1;
  }
  div:nth-child(2) {
    flex-shrink: 2;
  }
  div:nth-child(3) {
    flex-shrink: 0;
  }
}
```
    이 때, 첫 번째 요소의 흡수 폭은 $* 200 \frac{auto 100 =}{20 p x frac{1*100}{1*100+2*200}*100 = 20px ㅋㅋㅋ *} 2 0 0 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ$
    이때 두 번째 원소의 흡수폭은 $frac{2*200}{1*100+2*200}*100 = 80px$ $1 2 0 p x 지금 이 시간에는 세 번째 요소 flex-shrink 값은 0이며 최종 요소 너비는 요소 자체의 너비입니다. 3$
    flex 的简写值
    
    一般我们很少见上述属性单独使用，都是用flex这一个简写属性来表述元素的伸缩。
    
    Flex 简写形式允许你把三个数值按这个顺序书写 flex-grow，flex-shrink，flex-basis。以下是常见的几种取值：
    - flex: initial 的扩展为 0 1 auto (不可放大、可缩小、大小与容器元素大小一致)
    - flex: auto 的扩展为 1 1 auto (可放大、可缩小、大小与容器元素大小一致)
    - flex: none 的扩展为 0 0 auto (不可放大、不可缩小、大小与容器元素大小一致)
    - flex: <positive-number></positive-number>的扩展为 <positive-number> 1 0</positive-number>
    flex: <positive-number></positive-number>的应用：
    
    两栏布局
```
.two-grid-wrapper {
  display: flex;
  margin-top: 20px;
  height: 200px;
  .left {
    width: 200px;
    background-color: gold;
  }
  .right {
    flex: 1;
    background-color: tan;
  }
}
```
    效果如下：左侧宽度不变，右侧自适应
    
    三栏布局
```
.three-grid-wrapper {
  display: flex;
  margin-top: 20px;
  height: 200px;
  .left {
    width: 200px;
    background-color: gold;
  }
  .right {
    width: 200px;
    background-color: gold;
  }
  .center {
    flex: 1;
    background-color: tan;
  }
}
```
    效果如下：左右宽度不变，中间自适应
    
    PS.flex 子元素没有 positive free space 就不会增长；没有 negative free space 就不会缩小。
    
    结束语
    
    学习八股文的时候发现自己对flex布局很不熟悉，基本概念都说不上来，只会无脑用，于是去学习，然后就诞生了这篇文章。欢迎指正。
    
    （学习视频分享：web前端）