Flexbox is not working as expected - items getting smaller

I got some issues when trying to make a stable 2 x 2 grid.

Idea:

I want to have a grid of icons, that always stays the same no matter how many items are inside (max. 4).

Therefor i created a block like this:

<div class="d-inline-flex align-items-center justify-content-start pl-2 flex-wrap">

    <div style="background-color: #00b319; flex: 1 0 50%; " class="order-0 p-1">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #ff0000; flex: 1 0 50%; " class="order-0 p-1">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #17a2b8; flex: 0 1 50%; " class="order-0 p-1" v-if="false">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #00b373; flex: 1 1 45%; " class="order-0 p-1" v-if="false">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;" v-if="true"></font-awesome-icon>

    </div>

</div>

(Don't mind the <font-awesome-icon> tags - I create a Vuejs app here)

That works fine when I have 4 items inside.

But when I remove one, the whole container shrinks - removing another one -> it shrinks again.

4 items 3 items 2 items

Is there a way to achieve that kind of grid in an responsive and flexible way?

Thank you!

asked Nov 21 '18 at 18:38

tschaefermedia

224317

You need to specify width on the parent element
– Teo Dragovic
Nov 21 '18 at 18:53

@TeoDragovic does not work as expected - I introduced a wrapper div around the code you see above with defined width (in pixels) and it still grows/shrinks like before.
– tschaefermedia
Nov 21 '18 at 18:57

1

I suspect that behavior has something to do with you using inline-flex. Can you change it so it's display: flex? Without width on inline-flex container it will still behave like span tag and will not fill in wrapper if there is less content.
– Teo Dragovic
Nov 21 '18 at 19:13

@TeoDragovic works! Thank you!
– tschaefermedia
Nov 21 '18 at 19:23

add a comment |

I got some issues when trying to make a stable 2 x 2 grid.

Idea:

I want to have a grid of icons, that always stays the same no matter how many items are inside (max. 4).

Therefor i created a block like this:

<div class="d-inline-flex align-items-center justify-content-start pl-2 flex-wrap">

    <div style="background-color: #00b319; flex: 1 0 50%; " class="order-0 p-1">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #ff0000; flex: 1 0 50%; " class="order-0 p-1">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #17a2b8; flex: 0 1 50%; " class="order-0 p-1" v-if="false">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #00b373; flex: 1 1 45%; " class="order-0 p-1" v-if="false">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;" v-if="true"></font-awesome-icon>

    </div>

</div>

(Don't mind the <font-awesome-icon> tags - I create a Vuejs app here)

That works fine when I have 4 items inside.

But when I remove one, the whole container shrinks - removing another one -> it shrinks again.

4 items 3 items 2 items

Is there a way to achieve that kind of grid in an responsive and flexible way?

Thank you!

asked Nov 21 '18 at 18:38

tschaefermedia

224317

You need to specify width on the parent element
– Teo Dragovic
Nov 21 '18 at 18:53

@TeoDragovic does not work as expected - I introduced a wrapper div around the code you see above with defined width (in pixels) and it still grows/shrinks like before.
– tschaefermedia
Nov 21 '18 at 18:57

1

I suspect that behavior has something to do with you using inline-flex. Can you change it so it's display: flex? Without width on inline-flex container it will still behave like span tag and will not fill in wrapper if there is less content.
– Teo Dragovic
Nov 21 '18 at 19:13

@TeoDragovic works! Thank you!
– tschaefermedia
Nov 21 '18 at 19:23

add a comment |

I got some issues when trying to make a stable 2 x 2 grid.

Idea:

I want to have a grid of icons, that always stays the same no matter how many items are inside (max. 4).

Therefor i created a block like this:

<div class="d-inline-flex align-items-center justify-content-start pl-2 flex-wrap">

    <div style="background-color: #00b319; flex: 1 0 50%; " class="order-0 p-1">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #ff0000; flex: 1 0 50%; " class="order-0 p-1">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #17a2b8; flex: 0 1 50%; " class="order-0 p-1" v-if="false">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #00b373; flex: 1 1 45%; " class="order-0 p-1" v-if="false">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;" v-if="true"></font-awesome-icon>

    </div>

</div>

(Don't mind the <font-awesome-icon> tags - I create a Vuejs app here)

That works fine when I have 4 items inside.

But when I remove one, the whole container shrinks - removing another one -> it shrinks again.

4 items 3 items 2 items

Is there a way to achieve that kind of grid in an responsive and flexible way?

Thank you!

asked Nov 21 '18 at 18:38

tschaefermedia

224317

I got some issues when trying to make a stable 2 x 2 grid.

Idea:

I want to have a grid of icons, that always stays the same no matter how many items are inside (max. 4).

Therefor i created a block like this:

<div class="d-inline-flex align-items-center justify-content-start pl-2 flex-wrap">

    <div style="background-color: #00b319; flex: 1 0 50%; " class="order-0 p-1">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #ff0000; flex: 1 0 50%; " class="order-0 p-1">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #17a2b8; flex: 0 1 50%; " class="order-0 p-1" v-if="false">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;"></font-awesome-icon>

    </div>

    <div style="background-color: #00b373; flex: 1 1 45%; " class="order-0 p-1" v-if="false">

        <font-awesome-icon :icon="getIcon('addIcon')" :size="'sm'"

                           class="align-baseline" style="display: block; margin: auto;" v-if="true"></font-awesome-icon>

    </div>

</div>

(Don't mind the <font-awesome-icon> tags - I create a Vuejs app here)

That works fine when I have 4 items inside.

But when I remove one, the whole container shrinks - removing another one -> it shrinks again.

4 items 3 items 2 items

Is there a way to achieve that kind of grid in an responsive and flexible way?

Thank you!

css css3 flexbox grid

asked Nov 21 '18 at 18:38

tschaefermedia

224317

asked Nov 21 '18 at 18:38

tschaefermedia

224317

asked Nov 21 '18 at 18:38

tschaefermedia

224317

asked Nov 21 '18 at 18:38

tschaefermedia

224317

asked Nov 21 '18 at 18:38

tschaefermedia

224317

You need to specify width on the parent element
– Teo Dragovic
Nov 21 '18 at 18:53

@TeoDragovic does not work as expected - I introduced a wrapper div around the code you see above with defined width (in pixels) and it still grows/shrinks like before.
– tschaefermedia
Nov 21 '18 at 18:57

1

I suspect that behavior has something to do with you using inline-flex. Can you change it so it's display: flex? Without width on inline-flex container it will still behave like span tag and will not fill in wrapper if there is less content.
– Teo Dragovic
Nov 21 '18 at 19:13

@TeoDragovic works! Thank you!
– tschaefermedia
Nov 21 '18 at 19:23

add a comment |

You need to specify width on the parent element
– Teo Dragovic
Nov 21 '18 at 18:53

@TeoDragovic does not work as expected - I introduced a wrapper div around the code you see above with defined width (in pixels) and it still grows/shrinks like before.
– tschaefermedia
Nov 21 '18 at 18:57

1

I suspect that behavior has something to do with you using inline-flex. Can you change it so it's display: flex? Without width on inline-flex container it will still behave like span tag and will not fill in wrapper if there is less content.
– Teo Dragovic
Nov 21 '18 at 19:13

@TeoDragovic works! Thank you!
– tschaefermedia
Nov 21 '18 at 19:23

You need to specify width on the parent element
– Teo Dragovic
Nov 21 '18 at 18:53

@TeoDragovic does not work as expected - I introduced a wrapper div around the code you see above with defined width (in pixels) and it still grows/shrinks like before.
– tschaefermedia
Nov 21 '18 at 18:57

I suspect that behavior has something to do with you using inline-flex. Can you change it so it's display: flex? Without width on inline-flex container it will still behave like span tag and will not fill in wrapper if there is less content.
– Teo Dragovic
Nov 21 '18 at 19:13

@TeoDragovic works! Thank you!
– tschaefermedia
Nov 21 '18 at 19:23

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418578%2fflexbox-is-not-working-as-expected-items-getting-smaller%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk