flex-basis
CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing
을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.
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.
참고: auto
값을 가지지 않은 flex-basis
와 width
(flex-direction
: column
인 경우 height
) 값을 동시에 적용한 경우 flex-basis
가 우선합니다.
구문
/* <'width'> 지정 */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* 원본 크기 키워드 */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* 플렉스 아이템 내용 크기에 따라 조절 */ flex-basis: content; /* 전역 값 */ flex-basis: inherit; flex-basis: initial; flex-basis: unset;
flex-basis
속성값은 content
키워드를 사용하거나, <'width'>
를 나타내는 단위를 사용합니다.
값
<'width'>
<length>
, 플렉스 컨테이너의 크기에 상대적인<percentage>
,auto
키워드 중 하나. 음수 값은 유효하지 않습니다.content
- 플렉스 아이템의 콘텐츠 크기에 따라 자동으로 크기가 변합니다.
-
참고:
content
키워드는 Flexible Box Layout의 첫 배포에 포함되지 않아, 일부 오래 된 구현체에서는 지원하지 않을 수 있습니다.flex-basis
와 주 크기(width
,height
) 속성을 동시에auto
로 설정하면 동일한 효과를 볼 수 있습니다.역사:
- 원래
flex-basis: auto
의 뜻은 자신의width
또는height
속성의 값을 사용하라는 것이었습니다. - 그 후
flex-basis: auto
는 자동 크기조절로 바뀌고, 기존의auto
는main-size
로 바뀌었습니다. bug 1032922에서 구현 기록을 볼 수 있습니다. - 그러나 위의 변경점은 bug 1093316에서 되돌려져
auto
가 다시width
/height
속성을 가리키게 됐고, 대신 새로운content
키워드가 자동 크기조절을 맡게 됐습니다. (bug 1105111에서 볼 수 있습니다)
- 원래
형식 구문
content | <'width'>
예제
HTML
<ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul>
CSS
.container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6AB6D8; padding: 10px; margin-bottom: 50px; border: 3px solid #2E86BB; color: white; font-size: 20px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 18px; } .flex1 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-basis: max-content; } .flex2:after { content: 'max-content'; } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { flex-basis: fit-content; } .flex4:after { content: 'fit-content'; } .flex5 { flex-basis: content; } .flex5:after { content: 'content'; } .flex6 { flex-basis: fill; } .flex6:after { content: 'fill'; }
결과
명세
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-basis' in that specification. |
Candidate Recommendation | Initial definition |
초기값 | auto |
---|---|
적용대상 | flex items, including in-flow pseudo-elements |
상속 | no |
Percentages | refer to the flex container's inner main size |
Media | visual |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | a length, percentage or calc(); |
Canonical order | the length or percentage before the keyword, if both are present |
브라우저 호환성
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-basis | Chrome
Full support
29
| Edge
Full support
12
| Firefox
Full support
22
| IE
Full support
11
| Opera
Full support
12.1
| Safari
Full support
9
| WebView Android
Full support
4.4
| Chrome Android
Full support
29
| Firefox Android
Full support
22
| Opera Android
Full support
12.1
| Safari iOS
Full support
9
| Samsung Internet Android ? |
auto | Chrome Full support 21 | Edge Full support 12 | Firefox Full support 18 | IE Full support 11 | Opera Full support 12.1 | Safari
Full support
7
| WebView Android Full support ≤37 | Chrome Android Full support 25 | Firefox Android Full support 18 | Opera Android Full support 12.1 | Safari iOS
Full support
7
| Samsung Internet Android ? |
content | Chrome No support No | Edge Full support 12 | Firefox Full support 61 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 61 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
max-content | Chrome No support No | Edge No support No | Firefox
Full support
66
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
66
| Opera Android ? | Safari iOS No support No | Samsung Internet Android ? |
min-content | Chrome No support No | Edge No support No | Firefox
Full support
66
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
66
| Opera Android ? | Safari iOS No support No | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
같이 보기
- CSS 플렉스박스 안내서: Basic Concepts of Flexbox
- CSS 플렉스박스 안내서: Controlling Ratios of flex items along the main axis
width