The flex-basis CSS property sets the initial main kích cỡ of a flex công trình. It sets the kích thước of the nội dung box unless otherwise mix with box-sizing.

Bạn đang xem: Box-sizing border-box là gì

In this example the flex-grow and flex-shrink properties are both phối to lớn 1 on all three items, indicating that the flex thành công can grow & shrink from the initial flex-basis.

The thử nghiệm then changes the flex-basis on the first thành tựu. It will then grow & shrink from that flex-basis. This means that, for example, when the flex-basis of the first thành công is 200px, it will start out at 200px but then shrink to fit the space available with the other items being at least min-nội dung sized.

The image below shows how the Firefox Flexbox Inspector helps you understvà the kích thước items become.

Xem thêm: Dụng Cụ Đo Lực Là Gì - Đề Cương Ôn Tập Vật Lý 6 Học Kỳ I



Note: in case both flex-basis (other than auto) và width (or height in case of flex-direction: column) are mix for an element, flex-basis has priority.

/* Specify */flex-basis: 10em;flex-basis: 3px;flex-basis: auto;/* Intrinsic sizing keywords */flex-basis: fill;flex-basis: max-content;flex-basis: min-content;flex-basis: fit-content;/* Automatically kích thước based on the flex item’s nội dung */flex-basis: content;/* Global values */flex-basis: inherit;flex-basis: initial;flex-basis: unset;The flex-basis property is specified as either the từ khóa nội dung or a .

An absolute , a

of the parent flex container"s main form size property, or the từ khoá tự động hóa. Negative values are invalid. Defaults lớn tự động hóa. nội dung Indicates automatic sizing, based on the flex item’s nội dung.
Note: This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using tự động hóa together with a main form size (width or height) of auto.

Initial valueApplies toInheritedPercentagesComputed valueAnimation type
flex items, including in-flow pseudo-elements
refer lớn the flex container"s inner main size
as specified, but with relative lengths converted into absolute lengths
a CSS data type are interpolated as real, floating-point numbers.">length, percentage or calc();

HTMLul class="container"> li class="flex flex1">1: flex-basis testli> li class="flex flex2">2: flex-basis testli> li class="flex flex3">3: flex-basis testli> li class="flex flex4">4: flex-basis testli> li class="flex flex5">5: flex-basis testli>ul>ul class="container"> li class="flex flex6">6: flex-basis testli>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: 14px; 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: 12px;.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";Results

Specification Status Comment
CSS Flexible Box Layout ModuleThe definition of "flex-basis" in that specification. Candidate Recommendation Initial definition

Browser compatibility

BCD tables only load in the browser

See also

Found a problem with this page?

Last modified: May 28, 2021, by MDN contributors

Change your languageSelect your preferred language English (US)EspañolFrançais日本語한국어Русский中文 (简体) Change language
Learn CSS CSS first steps CSS building blocks Styling text CSS layout Reference Modules Properties Selectors Pseudo-classes Pseudo-elements At-rules Types Guides Animations Backgrounds and Borders Box alignment Box model Columns Conditional rules CSSOM view Flexbox Flow layout Fonts Grid Images Lists và counters Logical properties Media queries Positioning Scroll snap Shapes Text Transforms Transitions Layout cookbook Tools
Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *