Geek Answers Handbook

The same width of containers with flexible growth does not work

I am trying to use flex to create flexible elements of the same width, but they change the width depending on the number of children in the flex-item

fiddle

As you can see, the right green container is much smaller, although both have flexible growth: 1

How can i fix this? Thank!

span {
    display: inline-block;
    width: 10px;
    height: 30px;
    border: 1px solid red;
}
.container {
    display: flex;
    display: -webkit-flex;
    border: 1px solid blue;
    width: 200px; 
    padding: 2px;

}
.item {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    border: 1px solid green;
}
+4
source share
5 answers

using flex: 1 instead of flex-grow: 1 seems to fix the problem.

+3
source

If you do not specify the width of your flexible element (.item), the width will be "auto" and they will adjust to their child element (in your case, "span").

flexboxes "", .

+2

, flex-basis auto, . , flex-basis: 0:

.item {
  flex-basis: 0;
  flex-grow: 1;
}

: https://jsfiddle.net/Wexcode/Lgqhcr07/

+2

, ...

span {
    flex-grow: 1;
    height: 30px;
    border: 1px solid red;
}
.container {
    display: flex;
    display: -webkit-flex;
    border: 1px solid blue;
    width: 200px; 
    padding: 2px;

}
.item {
    flex-grow: 1;
    display: inherit;
    -webkit-flex-grow: 1;
    border: 1px solid green;
}
<div class="container">
    <div class="item">
        <span></span>
        <span></span>
        <span></span>

    </div>
    <div class="item">
        <span></span>
    </div>
</div>
Hide result
0

flex-basis: 100%; ( flex-grow: 1;)

http://www.w3.org/TR/css3-flexbox/#flex-basis:

Flex-
, , width, "flex-basis longhand" flex: flex, flex. 0%.

"flex-basis" , flex - flex items.

ur3.org url , . .

0

More articles:


All Articles