Flexbox is not working as expected - items getting smaller

up vote
0
down vote

favorite

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 at 18:38

tschaefermedia

224316

You need to specify width on the parent element
– Teo Dragovic
Nov 21 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 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 at 19:13

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

add a comment |

up vote
0
down vote

favorite

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 at 18:38

tschaefermedia

224316

You need to specify width on the parent element
– Teo Dragovic
Nov 21 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 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 at 19:13

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

add a comment |

up vote
0
down vote

favorite

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 at 18:38

tschaefermedia

224316

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 at 18:38

tschaefermedia

224316

asked Nov 21 at 18:38

tschaefermedia

224316

asked Nov 21 at 18:38

tschaefermedia

224316

asked Nov 21 at 18:38

tschaefermedia

224316

asked Nov 21 at 18:38

tschaefermedia

224316

You need to specify width on the parent element
– Teo Dragovic
Nov 21 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 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 at 19:13

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

add a comment |

You need to specify width on the parent element
– Teo Dragovic
Nov 21 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 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 at 19:13

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

You need to specify width on the parent element
– Teo Dragovic
Nov 21 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 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 at 19:13

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

add a comment |

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',
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

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

搜尋此網誌

Htykuut