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에서 볼 수 있습니다)
- 원래
형식 구문
예제
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 |
Computed value | as specified, but with relative lengths converted into absolute lengths |
Animation type | a length, percentage or calc(); |
브라우저 호환성
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.
같이 보기
- CSS 플렉스박스 안내서: Basic Concepts of Flexbox
- CSS 플렉스박스 안내서: Controlling Ratios of flex items along the main axis
width