flex-shrink
CSS property는 flex-item
요소의 flex-shrink
값을 설정하는 속성입니다. 만약 flex-item
요소의 크기가 flex-container
요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container
요소 내부에서 flex-item
요소의 크기가 축소됩니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;
/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;
The flex-shrink
property is specified as a single <number>
.
Values
Formal syntax
Example
HTML
<p>The width of content is 500px; the flex-basis of the flex items is 120px.</p>
<p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p>
<p>The width of D and E is less than the others.</p>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
CSS
#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 120px;
border: 3px solid rgba(0,0,0,.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 2;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-shrink' in that specification. |
Candidate Recommendation | Initial definition |
초기값 | 1 |
---|---|
적용대상 | flex items, including in-flow pseudo-elements |
상속 | no |
Computed value | as specified |
Animation type | a number |
Browser compatibility
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Controlling Ratios of flex items along the main axis