![세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/article/000/000/024/630df94185b42864.jpg)
개발할 때 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;
}
效果如下:
![166185991017227세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/295/461/596/166185991017227%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
如果你想 flexbox 完全忽略 flex 子元素的尺寸就设置 flex-basis 为 0。这样就算元素一设置了宽度,它最终的宽度也是内容宽度。
![166185991518757세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/103/842/240/166185991518757%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
正负自由空间
在介绍剩下两个属性前先看两个概念 positive free space
正向自由空间和 negative free space
反向自由空间:
![166185991929386세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/424/107/876/166185991929386%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
![166185992255173세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/500/461/614/166185992255173%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
那么用什么属性分配正负自由空间呢?
flex-grow
-
flex-grow
默认值 0
먼저 flex를 이해해야 합니다. flex-grow
, flex-shrink
및 flex-basis
세 가지 속성의 약어는 1개, 2개 또는 3개로 지정할 수 있습니다. 값.플렉스 속성. 구체적인 구문은 MDN-flex를 참조하세요.
다음으로 이 세 가지 속성이 요소에 미치는 영향을 하나씩 분석해 보겠습니다.
flex-basis
flex-based는 공간 할당이 발생하기 전 초기화된 flex 하위 요소의 크기를 정의합니다. 기본값은 auto
입니다. 수축한다. ![166185992773274세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/487/374/433/166185992773274%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
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;
}
}
🎜효과는 다음과 같습니다: 🎜🎜
![166185991017227세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/295/461/596/166185991017227%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
🎜🎜flexbox가 flex 하위 요소의 크기를 완전히 무시하도록 하려면 flex-basis를 0으로 설정하세요. 이런 방식으로 요소 1에 너비가 설정되어 있더라도 최종 너비는 콘텐츠 너비가 됩니다. 🎜🎜
![166185991518757세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/103/842/240/166185991518757%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
🎜
양수 및 음수 여유 공간
🎜나머지 두 속성
양수 여유 공간
양수 여유 공간을 소개하기 전에 두 가지 개념을 살펴보겠습니다. 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,则每个元素增加的宽度=x的总和x∗l,元素最终宽度 = 元素初始宽度+增加的宽度;
- 相同比例增长:当给每个子元素的都设定相同的 flex-grow 值,每个元素就会增长相同的宽度
-
.with-same-flex-grow {
* {
flex-grow: 1;
}
}
效果如下:
![166185993194508세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/850/179/690/166185993194508%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
이 예에서 첫 번째 요소의 너비 계산 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 1 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 5 0= 116.67px;第二个元素宽度宽度计算 1+1+11∗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;
}
}
效果如下:
![166185993682688세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/537/537/137/166185993682688%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
이 예에서 첫 번째 요소의 너비 계산 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 2 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 5 0= 1 50px;第二个元素宽度的计算2+1+11∗200+100=150px;
第三个同理是200px
- 如果想让开始时尺寸不同的元素内容宽度相等(平分容器宽度),可以将 flex-basis 设置为 0(完全忽略 flex 子元素的尺寸) flex-grow 为 1(等比例分配)
.average {
* {
/* flex: 1 1 0; */
flex-basis: 0;
flex-grow: 1;
}
}
效果如下:
![166185994167293세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/190/946/905/166185994167293%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
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;
}
}
![166185994634267세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/738/751/335/166185994634267%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
흡수 폭 계산: 각 flex-shrink의 값이 이라고 가정합니다. x n, 요소의 초기 너비는 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 역방향 여유공간은 L LL 그러면 각 요소가 흡수하는 너비는 다음과 같습니다. nauto l1l1+ +x 1 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ ...+x ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ n ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ nauto ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ ∗L
- 给子元素相同的 flex-shrink 值,这里以默认值 1 为例
.with-same-flex-shrink {
* {
flex-shrink: 1;
}
}
![166185995162288세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사](https://img.php.cn/upload/image/548/837/130/166185995162288%EC%84%B8%20%EA%B0%80%EC%A7%80%20%ED%94%8C%EB%A0%89%EC%8A%A4%20%EC%86%8D%EC%84%B1%EC%9D%B4%20%EC%9A%94%EC%86%8C%EC%97%90%20%EB%AF%B8%EC%B9%98%EB%8A%94%20%EC%98%81%ED%96%A5%EC%9D%84%20%EC%9E%90%EC%84%B8%ED%9E%88%20%EC%84%A4%EB%AA%85%ED%95%98%EB%8A%94%20%EA%B8%B0%EC%82%AC)
이 때, 첫 번째 요소의 흡수 폭은 100 1 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 100 = 16.67px, 최종 요소 너비는 다음과 같습니다. 100 − 16.67=83.37px100-16.67=83.37px1 0 0− 16.67=83. 3 7px
위 내용은 세 가지 플렉스 속성이 요소에 미치는 영향을 자세히 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!