What are the differences between flex
There have been questions and articles about this, but nothing conclusive as far as I can tell. The best summary I could find is
flex-basis allows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value.
...which in itself doesn't say much about the behavior of elements with flex-basis set. With my current knowledge of flexbox I don't see why that couldn't describe width also.
I'd like to know how exactly flex-basis is different from width in practice:
Edit/clarification : This question has been asked in a different format in What exactly flex-basis property sets? but I felt a more direct comparison or summary of the differences of flex-basis and width (or height) would be nice.
Consider flex-direction
The first thing that comes to mind when reading your question is that flex-basis doesn't always apply to width .
When flex-direction is row , flex-basis controls width.
But when flex-direction is column , flex-basis controls height.
Key Differences
Here are some important differences between flex-basis and width / height :
flex-basis applies only to flex items. Flex containers (that aren't also flex items) will ignore flex-basis but can use width and height .
flex-basis works only on the main axis. For example, if you're in flex-direction: column , the width property would be needed for sizing flex items horizontally.
flex-basis has no effect on absolutely-positioned flex items. width and height properties would be necessary. Absolutely-positioned flex items do not participate in flex layout.
By using the flex property, three properties – flex-grow , flex-shrink and flex-basis – can be neatly combined into one declaration. Using width , the same rule would require multiple lines of code.
Browser Behavior
In terms of how they are rendered, there should be no difference between flex-basis and width , unless flex-basis is auto or content .
From the spec:
7.2.3. The flex-basis property
For all values other than auto and content , flex-basis is resolved the same way as width in horizontal writing modes.
But the impact of auto or content may be minimal or nothing at all. More from the spec:
auto
When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis . If that value is itself auto , then the used value is content .
content
Indicates automatic sizing, based on the flex item's content.
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 achieved by using auto together with a main size ( width or height ) of auto .
So, according to the spec, flex-basis and width resolve identically, unless flex-basis is auto or content . In such cases, flex-basis may use content width (which, presumably, the width property would use, as well).
The flex-shrink factor
It's important to remember the initial settings of a flex container. Some of these settings include:
flex-direction: row - flex items will align horizontally justify-content: flex-start - flex items will stack at the start of the line on the main axis align-items: stretch - flex items will expand to cover the cross-size of the container flex-wrap: nowrap - flex items are forced to stay in a single line flex-shrink: 1 - a flex item is allowed to shrink Note the last setting.
Because flex items are allowed to shrink by default (which prevents them from overflowing the container), the specified flex-basis / width / height may be overridden.
For example, flex-basis: 100px or width: 100px , coupled with flex-shrink: 1 , will not necessarily be 100px.
To render the specified width – and keep it fixed – you will need to disable shrinking:
div {
width: 100px;
flex-shrink: 0;
}
OR
div {
flex-basis: 100px;
flex-shrink: 0;
}
OR, as recommended by the spec:
flex: 0 0 100px; /* don't grow, don't shrink, stay fixed at 100px */
7.2. Components of Flexibility
Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
Browser Bugs
Bug affecting all major browsers, except IE 11 & Edge:
flex-basis ignored in a nested flex container. width works.
A problem has been found when sizing flex items in a nested flex container.
When using flex-basis , the container ignores the sizing of its children, and the children overflow the container. But with the width property, the container respects the sizing of its children and expands accordingly. This is not a problem in IE11 and Edge.
References:
Examples:
flex items using flex-basis and white-space: nowrap overflow inline-flex container. width works.
It seems that a flex container set to inline-flex doesn't recognize flex-basis on a child when rendering a sibling with white-space: nowrap (although it could just be an item with undefined width). The container doesn't expand to accommodate the items.
But when the width property is used instead of flex-basis , the container respects the sizing of its children and expands accordingly. This is not a problem in IE11 and Edge.
References:
Example:
Bugs affecting IE 10 and 11:
flex shorthand declarations with unitless flex-basis values are ignored flex-basis doesn't account for box-sizing: border-box flex-basis doesn't support calc() flex-basis when using flex shorthand In addition to Michael_B's excellent summary it's worth repeating this:
flex-basis allows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value.
The important part here is initial .
By itself, this does resolve to width/height until the other flex grow/shrink properties come into play.
So. a child with
.child {
flex-basis:25%;
flex-grow:1;
}
will be 25% wide initially but then immediately expand as much as it can until the other elements are factored in. If there are none..it will be 100% wide/tall.
A quick demo:
.flex {
width: 80%;
margin: 1em auto;
height: 25px;
display: flex;
background: rebeccapurple;
}
.child {
flex-basis: auto;
/* default */
background: plum;
}
.value {
flex-basis: 25%;
}
.grow {
flex-grow: 1;
}<div class="flex">
<div class="child auto">Some Content</div>
</div>
<div class="flex">
<div class="child value">Some Content</div>
</div>
<div class="flex">
<div class="child grow">Some Content</div>
</div>Possibly the most important point to add:
What if the browser doesn't support flex ? In such a case, width/height take over and their values apply.
It is a very good idea - almost essential - to define width/height on elements, even if you then have a completely different value for flex-basis . Remember to test by disabling display:flex and seeing what you get.
上一篇: 浏览器支持另一个Flexbox内部的Flexbox
下一篇: flex之间有什么区别