What are the areas covered by Flexbox which are difficult or impossible to achieve with Grid?Center columns inside Grid LayoutShould I use Flexbox or CSS Grid?How can I have a sticky footer with my CSS Grid layout?Can auto margins work in CSS Grid like they do in Flexbox?Make CSS Grid auto-fill only 2 columnsAligning grid items across the entire row/column (like flex items can)How to get grid items of different lengths to wrap?CSS grid max columns without media queriesSetting the minimum, maximum and default length of a grid column / rowShrink grid items just like flex items in cssHow to specify an element after which to wrap in css flexbox?css grid of squares with flexboxAchieving a certain grid using flexboxCreating a two column layout with flexboxResponsively collapse 2 column layout to single columnWhat is the difference between CSS Flexbox , CSS GridsRecreating a CSS Grid layout with FlexboxSpecialized layout with CSS Grid/FlexboxUnderstanding CSS grid and flexboxFlexbox grid item which uses full width before growing in height

I'm flying to France today and my passport expires in less than 2 months

How can bays and straits be determined in a procedurally generated map?

If human space travel is limited by the G force vulnerability, is there a way to counter G forces?

How is it possible to have an ability score that is less than 3?

Watching something be written to a file live with tail

How much RAM could one put in a typical 80386 setup?

Malcev's paper "On a class of homogeneous spaces" in English

Can I make popcorn with any corn?

Is it possible to run Internet Explorer on OS X El Capitan?

NMaximize is not converging to a solution

Why "Having chlorophyll without photosynthesis is actually very dangerous" and "like living with a bomb"?

What does it mean to describe someone as a butt steak?

How much of data wrangling is a data scientist's job?

RSA: Danger of using p to create q

Are the number of citations and number of published articles the most important criteria for a tenure promotion?

How to format long polynomial?

Perform and show arithmetic with LuaLaTeX

Can you really stack all of this on an Opportunity Attack?

Cross compiling for RPi - error while loading shared libraries

Paid for article while in US on F-1 visa?

Does detail obscure or enhance action?

LaTeX: Why are digits allowed in environments, but forbidden in commands?

Why does Kotter return in Welcome Back Kotter?

Replacing matching entries in one column of a file by another column from a different file



What are the areas covered by Flexbox which are difficult or impossible to achieve with Grid?


Center columns inside Grid LayoutShould I use Flexbox or CSS Grid?How can I have a sticky footer with my CSS Grid layout?Can auto margins work in CSS Grid like they do in Flexbox?Make CSS Grid auto-fill only 2 columnsAligning grid items across the entire row/column (like flex items can)How to get grid items of different lengths to wrap?CSS grid max columns without media queriesSetting the minimum, maximum and default length of a grid column / rowShrink grid items just like flex items in cssHow to specify an element after which to wrap in css flexbox?css grid of squares with flexboxAchieving a certain grid using flexboxCreating a two column layout with flexboxResponsively collapse 2 column layout to single columnWhat is the difference between CSS Flexbox , CSS GridsRecreating a CSS Grid layout with FlexboxSpecialized layout with CSS Grid/FlexboxUnderstanding CSS grid and flexboxFlexbox grid item which uses full width before growing in height






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








2















It is wildly highlighted that Flexbox is for 1-D and Grid for 2-D but I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox. The closest I came to is




But you could also argue that purely 1D layout like this is more
powerful in Flexbox, because Flexbox allows us to move those elements
around easier (e.g. move them all to one side or another, change their
order, space them out evenly, etc).




I use Grid and Flexbox for basic layout: a general placement of the boxes on the page and some dynamic ones, usually stacked. The esthetical ones (toasters, modals, ...) are managed through a framework. I have not yet found a case where Grid could not replace Flexbox out of the box (that is without advanced CSS gymnastics or a lot of code).



To take the example of the quote above, all the "moves" mentioned are directly available in Grid, usually with the same semantics as in Flexbox.



What are the fundamental areas covered by Flexbox which are difficult or impossible to manage with Grid?



EDIT: the browser support is not important (I only use evergreen browsers and can switch if needed)










share|improve this question






























    2















    It is wildly highlighted that Flexbox is for 1-D and Grid for 2-D but I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox. The closest I came to is




    But you could also argue that purely 1D layout like this is more
    powerful in Flexbox, because Flexbox allows us to move those elements
    around easier (e.g. move them all to one side or another, change their
    order, space them out evenly, etc).




    I use Grid and Flexbox for basic layout: a general placement of the boxes on the page and some dynamic ones, usually stacked. The esthetical ones (toasters, modals, ...) are managed through a framework. I have not yet found a case where Grid could not replace Flexbox out of the box (that is without advanced CSS gymnastics or a lot of code).



    To take the example of the quote above, all the "moves" mentioned are directly available in Grid, usually with the same semantics as in Flexbox.



    What are the fundamental areas covered by Flexbox which are difficult or impossible to manage with Grid?



    EDIT: the browser support is not important (I only use evergreen browsers and can switch if needed)










    share|improve this question


























      2












      2








      2








      It is wildly highlighted that Flexbox is for 1-D and Grid for 2-D but I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox. The closest I came to is




      But you could also argue that purely 1D layout like this is more
      powerful in Flexbox, because Flexbox allows us to move those elements
      around easier (e.g. move them all to one side or another, change their
      order, space them out evenly, etc).




      I use Grid and Flexbox for basic layout: a general placement of the boxes on the page and some dynamic ones, usually stacked. The esthetical ones (toasters, modals, ...) are managed through a framework. I have not yet found a case where Grid could not replace Flexbox out of the box (that is without advanced CSS gymnastics or a lot of code).



      To take the example of the quote above, all the "moves" mentioned are directly available in Grid, usually with the same semantics as in Flexbox.



      What are the fundamental areas covered by Flexbox which are difficult or impossible to manage with Grid?



      EDIT: the browser support is not important (I only use evergreen browsers and can switch if needed)










      share|improve this question
















      It is wildly highlighted that Flexbox is for 1-D and Grid for 2-D but I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox. The closest I came to is




      But you could also argue that purely 1D layout like this is more
      powerful in Flexbox, because Flexbox allows us to move those elements
      around easier (e.g. move them all to one side or another, change their
      order, space them out evenly, etc).




      I use Grid and Flexbox for basic layout: a general placement of the boxes on the page and some dynamic ones, usually stacked. The esthetical ones (toasters, modals, ...) are managed through a framework. I have not yet found a case where Grid could not replace Flexbox out of the box (that is without advanced CSS gymnastics or a lot of code).



      To take the example of the quote above, all the "moves" mentioned are directly available in Grid, usually with the same semantics as in Flexbox.



      What are the fundamental areas covered by Flexbox which are difficult or impossible to manage with Grid?



      EDIT: the browser support is not important (I only use evergreen browsers and can switch if needed)







      css flexbox css-grid






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 8 at 23:35









      Michael_B

      158k50255363




      158k50255363










      asked Mar 8 at 13:43









      WoJWoJ

      6,8231266146




      6,8231266146






















          3 Answers
          3






          active

          oldest

          votes


















          4














          Advantage Flexbox



          Here are 9 areas where flexbox comes out ahead of Grid (Level 1):




          1. Centering wrapped items. Imagine five flex items. Only four per row. The fifth one wraps. That fifth one can be easily aligned across the entire row with justify-content. Try centering this fifth item in a grid container. Not a simple matter.



            Aligning grid items across the entire row/column (like flex items can)





          1. Wrapping. Flex items of variable lengths have no problem wrapping. Try getting grid items of variable lengths to wrap. Not possible.



            How to get grid items of different lengths to wrap?





          1. Auto margins. Flex items can be placed, packed and spaced away throughout their container with auto margins. Grid items, however, are confined to their tracks, greatly diminishing the utility of auto margins.



            Can auto margins work in CSS Grid like they do in Flexbox?





          1. Min, Max, Default – all in one. Setting the min-width, max-width and default width of a flex item is easy. How can all three lengths be set on a grid column or row? They can't.



            Setting the minimum, maximum and default length of a grid column / row





          1. Sticky footer / header. It's just so much simpler and easier to pin a footer or header with flexbox.



            How can I have a sticky footer with my CSS Grid layout?





          1. Consuming remaining space. A flex item can consume remaining space with flex-grow. Grid items have no such function.



            Make grid item use remaining space like flex item with flex-grow: 1





          1. Shrinking. Flex has flex-shrink. Grid has... nothing.



            Shrink grid items just like flex items in css





          1. Limiting the column count in a dynamic layout. With flexbox, creating a wrapping two-column grid that remains fixed at two-columns across screen sizes is no problem. In Grid, despite having all these great functions, such repeat(), auto-fill and minmax(), it can't be done.



            Make CSS Grid auto-fill only 2 columns



            CSS grid max columns without media queries





          1. Creating space between first and last items. In a grid container with a variable number of columns, it's not easy to add an empty first and last column. Margins, padding, columns and pseudo elements each have their limitations. It's simple and easy with flexbox.



            Add space before and after first and last grid items







          share|improve this answer
































            4














            Flexbox and CSS grid are two different features and I don't agree about saying that one can replace another or that CSS grid is a superset of flexbox.



            You said:




            I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox.




            Here is a basic flexbox example that involve wrapping that you cannot achieve (or probably difficult to achieve) using CSS grid. Reduce the window size and see how the elements will behave.






            .box 
            display: flex;
            flex-wrap: wrap;


            .box>span
            border: 1px solid;
            padding: 10px;
            flex-grow: 1;

            <div class="box">
            <span>some text very long here some text very long here </span>
            <span>text here</span>
            <span>A</span>
            <span>B</span>
            </div>





            This is a 1-D layout where each line may have elements resized differently depending on the free space without being inside a 2-D grid. It will be difficult to achieve the same output using CSS-grid.



            Basically flexbox is more suited when it comes to multiline/multirow content following one direction whereas CSS grid is more about a Grid with row and columns. Of course, when it comes to only one line a 2D grid can be considerd as 1D thus flexbox and CSS grid may achieve the same thing.



            It's like comparing a table with only one tr and multiple td with a set of inline-block element inside one line BUT when it comes to wrapping and multiple tr it's clear that table and inline-block are different.




            Worth to note that you can achieve what you want using any techniques in general. In the past, Flexbox wasn't there and developers were able to build layout using float (Boostrap is the best example). Then flexbox come with more powerful features to make things easier. Same thing for CSS grid and for future features.



            Here is an example : https://drafts.csswg.org/css-align-3/



            This Draft is talking about a future enhancement of alignment where we can consider jutify-content, align-items, etc without even using flexbox or CSS grid but directly on block elements.



            If implemented, will this make Flexbox and CSS Grid useless? I don't think so.






            share|improve this answer
































              1














              I should probably point out that Grid is MUCH newer than Flexbox and therefore may actually be intended as a replacement to some extent. Much like Flexbox replaced the typical use case for float (not the intended use).



              I'm going to preface this by saying, I rarely NEED the complexities/capabilities of Grid so I still use Flexbox for most things.



              However, in my experience, the flex-wrap capabilities, especially with variable screen sizes, is one place that I feel Grid isn't a great replacement.






              share|improve this answer























                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


















                StackExchange.ready(
                function ()
                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55064488%2fwhat-are-the-areas-covered-by-flexbox-which-are-difficult-or-impossible-to-achie%23new-answer', 'question_page');

                );

                Post as a guest















                Required, but never shown

























                3 Answers
                3






                active

                oldest

                votes








                3 Answers
                3






                active

                oldest

                votes









                active

                oldest

                votes






                active

                oldest

                votes









                4














                Advantage Flexbox



                Here are 9 areas where flexbox comes out ahead of Grid (Level 1):




                1. Centering wrapped items. Imagine five flex items. Only four per row. The fifth one wraps. That fifth one can be easily aligned across the entire row with justify-content. Try centering this fifth item in a grid container. Not a simple matter.



                  Aligning grid items across the entire row/column (like flex items can)





                1. Wrapping. Flex items of variable lengths have no problem wrapping. Try getting grid items of variable lengths to wrap. Not possible.



                  How to get grid items of different lengths to wrap?





                1. Auto margins. Flex items can be placed, packed and spaced away throughout their container with auto margins. Grid items, however, are confined to their tracks, greatly diminishing the utility of auto margins.



                  Can auto margins work in CSS Grid like they do in Flexbox?





                1. Min, Max, Default – all in one. Setting the min-width, max-width and default width of a flex item is easy. How can all three lengths be set on a grid column or row? They can't.



                  Setting the minimum, maximum and default length of a grid column / row





                1. Sticky footer / header. It's just so much simpler and easier to pin a footer or header with flexbox.



                  How can I have a sticky footer with my CSS Grid layout?





                1. Consuming remaining space. A flex item can consume remaining space with flex-grow. Grid items have no such function.



                  Make grid item use remaining space like flex item with flex-grow: 1





                1. Shrinking. Flex has flex-shrink. Grid has... nothing.



                  Shrink grid items just like flex items in css





                1. Limiting the column count in a dynamic layout. With flexbox, creating a wrapping two-column grid that remains fixed at two-columns across screen sizes is no problem. In Grid, despite having all these great functions, such repeat(), auto-fill and minmax(), it can't be done.



                  Make CSS Grid auto-fill only 2 columns



                  CSS grid max columns without media queries





                1. Creating space between first and last items. In a grid container with a variable number of columns, it's not easy to add an empty first and last column. Margins, padding, columns and pseudo elements each have their limitations. It's simple and easy with flexbox.



                  Add space before and after first and last grid items







                share|improve this answer





























                  4














                  Advantage Flexbox



                  Here are 9 areas where flexbox comes out ahead of Grid (Level 1):




                  1. Centering wrapped items. Imagine five flex items. Only four per row. The fifth one wraps. That fifth one can be easily aligned across the entire row with justify-content. Try centering this fifth item in a grid container. Not a simple matter.



                    Aligning grid items across the entire row/column (like flex items can)





                  1. Wrapping. Flex items of variable lengths have no problem wrapping. Try getting grid items of variable lengths to wrap. Not possible.



                    How to get grid items of different lengths to wrap?





                  1. Auto margins. Flex items can be placed, packed and spaced away throughout their container with auto margins. Grid items, however, are confined to their tracks, greatly diminishing the utility of auto margins.



                    Can auto margins work in CSS Grid like they do in Flexbox?





                  1. Min, Max, Default – all in one. Setting the min-width, max-width and default width of a flex item is easy. How can all three lengths be set on a grid column or row? They can't.



                    Setting the minimum, maximum and default length of a grid column / row





                  1. Sticky footer / header. It's just so much simpler and easier to pin a footer or header with flexbox.



                    How can I have a sticky footer with my CSS Grid layout?





                  1. Consuming remaining space. A flex item can consume remaining space with flex-grow. Grid items have no such function.



                    Make grid item use remaining space like flex item with flex-grow: 1





                  1. Shrinking. Flex has flex-shrink. Grid has... nothing.



                    Shrink grid items just like flex items in css





                  1. Limiting the column count in a dynamic layout. With flexbox, creating a wrapping two-column grid that remains fixed at two-columns across screen sizes is no problem. In Grid, despite having all these great functions, such repeat(), auto-fill and minmax(), it can't be done.



                    Make CSS Grid auto-fill only 2 columns



                    CSS grid max columns without media queries





                  1. Creating space between first and last items. In a grid container with a variable number of columns, it's not easy to add an empty first and last column. Margins, padding, columns and pseudo elements each have their limitations. It's simple and easy with flexbox.



                    Add space before and after first and last grid items







                  share|improve this answer



























                    4












                    4








                    4







                    Advantage Flexbox



                    Here are 9 areas where flexbox comes out ahead of Grid (Level 1):




                    1. Centering wrapped items. Imagine five flex items. Only four per row. The fifth one wraps. That fifth one can be easily aligned across the entire row with justify-content. Try centering this fifth item in a grid container. Not a simple matter.



                      Aligning grid items across the entire row/column (like flex items can)





                    1. Wrapping. Flex items of variable lengths have no problem wrapping. Try getting grid items of variable lengths to wrap. Not possible.



                      How to get grid items of different lengths to wrap?





                    1. Auto margins. Flex items can be placed, packed and spaced away throughout their container with auto margins. Grid items, however, are confined to their tracks, greatly diminishing the utility of auto margins.



                      Can auto margins work in CSS Grid like they do in Flexbox?





                    1. Min, Max, Default – all in one. Setting the min-width, max-width and default width of a flex item is easy. How can all three lengths be set on a grid column or row? They can't.



                      Setting the minimum, maximum and default length of a grid column / row





                    1. Sticky footer / header. It's just so much simpler and easier to pin a footer or header with flexbox.



                      How can I have a sticky footer with my CSS Grid layout?





                    1. Consuming remaining space. A flex item can consume remaining space with flex-grow. Grid items have no such function.



                      Make grid item use remaining space like flex item with flex-grow: 1





                    1. Shrinking. Flex has flex-shrink. Grid has... nothing.



                      Shrink grid items just like flex items in css





                    1. Limiting the column count in a dynamic layout. With flexbox, creating a wrapping two-column grid that remains fixed at two-columns across screen sizes is no problem. In Grid, despite having all these great functions, such repeat(), auto-fill and minmax(), it can't be done.



                      Make CSS Grid auto-fill only 2 columns



                      CSS grid max columns without media queries





                    1. Creating space between first and last items. In a grid container with a variable number of columns, it's not easy to add an empty first and last column. Margins, padding, columns and pseudo elements each have their limitations. It's simple and easy with flexbox.



                      Add space before and after first and last grid items







                    share|improve this answer















                    Advantage Flexbox



                    Here are 9 areas where flexbox comes out ahead of Grid (Level 1):




                    1. Centering wrapped items. Imagine five flex items. Only four per row. The fifth one wraps. That fifth one can be easily aligned across the entire row with justify-content. Try centering this fifth item in a grid container. Not a simple matter.



                      Aligning grid items across the entire row/column (like flex items can)





                    1. Wrapping. Flex items of variable lengths have no problem wrapping. Try getting grid items of variable lengths to wrap. Not possible.



                      How to get grid items of different lengths to wrap?





                    1. Auto margins. Flex items can be placed, packed and spaced away throughout their container with auto margins. Grid items, however, are confined to their tracks, greatly diminishing the utility of auto margins.



                      Can auto margins work in CSS Grid like they do in Flexbox?





                    1. Min, Max, Default – all in one. Setting the min-width, max-width and default width of a flex item is easy. How can all three lengths be set on a grid column or row? They can't.



                      Setting the minimum, maximum and default length of a grid column / row





                    1. Sticky footer / header. It's just so much simpler and easier to pin a footer or header with flexbox.



                      How can I have a sticky footer with my CSS Grid layout?





                    1. Consuming remaining space. A flex item can consume remaining space with flex-grow. Grid items have no such function.



                      Make grid item use remaining space like flex item with flex-grow: 1





                    1. Shrinking. Flex has flex-shrink. Grid has... nothing.



                      Shrink grid items just like flex items in css





                    1. Limiting the column count in a dynamic layout. With flexbox, creating a wrapping two-column grid that remains fixed at two-columns across screen sizes is no problem. In Grid, despite having all these great functions, such repeat(), auto-fill and minmax(), it can't be done.



                      Make CSS Grid auto-fill only 2 columns



                      CSS grid max columns without media queries





                    1. Creating space between first and last items. In a grid container with a variable number of columns, it's not easy to add an empty first and last column. Margins, padding, columns and pseudo elements each have their limitations. It's simple and easy with flexbox.



                      Add space before and after first and last grid items








                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Mar 22 at 18:08

























                    answered Mar 9 at 1:12









                    Michael_BMichael_B

                    158k50255363




                    158k50255363























                        4














                        Flexbox and CSS grid are two different features and I don't agree about saying that one can replace another or that CSS grid is a superset of flexbox.



                        You said:




                        I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox.




                        Here is a basic flexbox example that involve wrapping that you cannot achieve (or probably difficult to achieve) using CSS grid. Reduce the window size and see how the elements will behave.






                        .box 
                        display: flex;
                        flex-wrap: wrap;


                        .box>span
                        border: 1px solid;
                        padding: 10px;
                        flex-grow: 1;

                        <div class="box">
                        <span>some text very long here some text very long here </span>
                        <span>text here</span>
                        <span>A</span>
                        <span>B</span>
                        </div>





                        This is a 1-D layout where each line may have elements resized differently depending on the free space without being inside a 2-D grid. It will be difficult to achieve the same output using CSS-grid.



                        Basically flexbox is more suited when it comes to multiline/multirow content following one direction whereas CSS grid is more about a Grid with row and columns. Of course, when it comes to only one line a 2D grid can be considerd as 1D thus flexbox and CSS grid may achieve the same thing.



                        It's like comparing a table with only one tr and multiple td with a set of inline-block element inside one line BUT when it comes to wrapping and multiple tr it's clear that table and inline-block are different.




                        Worth to note that you can achieve what you want using any techniques in general. In the past, Flexbox wasn't there and developers were able to build layout using float (Boostrap is the best example). Then flexbox come with more powerful features to make things easier. Same thing for CSS grid and for future features.



                        Here is an example : https://drafts.csswg.org/css-align-3/



                        This Draft is talking about a future enhancement of alignment where we can consider jutify-content, align-items, etc without even using flexbox or CSS grid but directly on block elements.



                        If implemented, will this make Flexbox and CSS Grid useless? I don't think so.






                        share|improve this answer





























                          4














                          Flexbox and CSS grid are two different features and I don't agree about saying that one can replace another or that CSS grid is a superset of flexbox.



                          You said:




                          I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox.




                          Here is a basic flexbox example that involve wrapping that you cannot achieve (or probably difficult to achieve) using CSS grid. Reduce the window size and see how the elements will behave.






                          .box 
                          display: flex;
                          flex-wrap: wrap;


                          .box>span
                          border: 1px solid;
                          padding: 10px;
                          flex-grow: 1;

                          <div class="box">
                          <span>some text very long here some text very long here </span>
                          <span>text here</span>
                          <span>A</span>
                          <span>B</span>
                          </div>





                          This is a 1-D layout where each line may have elements resized differently depending on the free space without being inside a 2-D grid. It will be difficult to achieve the same output using CSS-grid.



                          Basically flexbox is more suited when it comes to multiline/multirow content following one direction whereas CSS grid is more about a Grid with row and columns. Of course, when it comes to only one line a 2D grid can be considerd as 1D thus flexbox and CSS grid may achieve the same thing.



                          It's like comparing a table with only one tr and multiple td with a set of inline-block element inside one line BUT when it comes to wrapping and multiple tr it's clear that table and inline-block are different.




                          Worth to note that you can achieve what you want using any techniques in general. In the past, Flexbox wasn't there and developers were able to build layout using float (Boostrap is the best example). Then flexbox come with more powerful features to make things easier. Same thing for CSS grid and for future features.



                          Here is an example : https://drafts.csswg.org/css-align-3/



                          This Draft is talking about a future enhancement of alignment where we can consider jutify-content, align-items, etc without even using flexbox or CSS grid but directly on block elements.



                          If implemented, will this make Flexbox and CSS Grid useless? I don't think so.






                          share|improve this answer



























                            4












                            4








                            4







                            Flexbox and CSS grid are two different features and I don't agree about saying that one can replace another or that CSS grid is a superset of flexbox.



                            You said:




                            I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox.




                            Here is a basic flexbox example that involve wrapping that you cannot achieve (or probably difficult to achieve) using CSS grid. Reduce the window size and see how the elements will behave.






                            .box 
                            display: flex;
                            flex-wrap: wrap;


                            .box>span
                            border: 1px solid;
                            padding: 10px;
                            flex-grow: 1;

                            <div class="box">
                            <span>some text very long here some text very long here </span>
                            <span>text here</span>
                            <span>A</span>
                            <span>B</span>
                            </div>





                            This is a 1-D layout where each line may have elements resized differently depending on the free space without being inside a 2-D grid. It will be difficult to achieve the same output using CSS-grid.



                            Basically flexbox is more suited when it comes to multiline/multirow content following one direction whereas CSS grid is more about a Grid with row and columns. Of course, when it comes to only one line a 2D grid can be considerd as 1D thus flexbox and CSS grid may achieve the same thing.



                            It's like comparing a table with only one tr and multiple td with a set of inline-block element inside one line BUT when it comes to wrapping and multiple tr it's clear that table and inline-block are different.




                            Worth to note that you can achieve what you want using any techniques in general. In the past, Flexbox wasn't there and developers were able to build layout using float (Boostrap is the best example). Then flexbox come with more powerful features to make things easier. Same thing for CSS grid and for future features.



                            Here is an example : https://drafts.csswg.org/css-align-3/



                            This Draft is talking about a future enhancement of alignment where we can consider jutify-content, align-items, etc without even using flexbox or CSS grid but directly on block elements.



                            If implemented, will this make Flexbox and CSS Grid useless? I don't think so.






                            share|improve this answer















                            Flexbox and CSS grid are two different features and I don't agree about saying that one can replace another or that CSS grid is a superset of flexbox.



                            You said:




                            I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox.




                            Here is a basic flexbox example that involve wrapping that you cannot achieve (or probably difficult to achieve) using CSS grid. Reduce the window size and see how the elements will behave.






                            .box 
                            display: flex;
                            flex-wrap: wrap;


                            .box>span
                            border: 1px solid;
                            padding: 10px;
                            flex-grow: 1;

                            <div class="box">
                            <span>some text very long here some text very long here </span>
                            <span>text here</span>
                            <span>A</span>
                            <span>B</span>
                            </div>





                            This is a 1-D layout where each line may have elements resized differently depending on the free space without being inside a 2-D grid. It will be difficult to achieve the same output using CSS-grid.



                            Basically flexbox is more suited when it comes to multiline/multirow content following one direction whereas CSS grid is more about a Grid with row and columns. Of course, when it comes to only one line a 2D grid can be considerd as 1D thus flexbox and CSS grid may achieve the same thing.



                            It's like comparing a table with only one tr and multiple td with a set of inline-block element inside one line BUT when it comes to wrapping and multiple tr it's clear that table and inline-block are different.




                            Worth to note that you can achieve what you want using any techniques in general. In the past, Flexbox wasn't there and developers were able to build layout using float (Boostrap is the best example). Then flexbox come with more powerful features to make things easier. Same thing for CSS grid and for future features.



                            Here is an example : https://drafts.csswg.org/css-align-3/



                            This Draft is talking about a future enhancement of alignment where we can consider jutify-content, align-items, etc without even using flexbox or CSS grid but directly on block elements.



                            If implemented, will this make Flexbox and CSS Grid useless? I don't think so.






                            .box 
                            display: flex;
                            flex-wrap: wrap;


                            .box>span
                            border: 1px solid;
                            padding: 10px;
                            flex-grow: 1;

                            <div class="box">
                            <span>some text very long here some text very long here </span>
                            <span>text here</span>
                            <span>A</span>
                            <span>B</span>
                            </div>





                            .box 
                            display: flex;
                            flex-wrap: wrap;


                            .box>span
                            border: 1px solid;
                            padding: 10px;
                            flex-grow: 1;

                            <div class="box">
                            <span>some text very long here some text very long here </span>
                            <span>text here</span>
                            <span>A</span>
                            <span>B</span>
                            </div>






                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited Mar 31 at 14:57

























                            answered Mar 8 at 13:57









                            Temani AfifTemani Afif

                            82.2k104794




                            82.2k104794





















                                1














                                I should probably point out that Grid is MUCH newer than Flexbox and therefore may actually be intended as a replacement to some extent. Much like Flexbox replaced the typical use case for float (not the intended use).



                                I'm going to preface this by saying, I rarely NEED the complexities/capabilities of Grid so I still use Flexbox for most things.



                                However, in my experience, the flex-wrap capabilities, especially with variable screen sizes, is one place that I feel Grid isn't a great replacement.






                                share|improve this answer



























                                  1














                                  I should probably point out that Grid is MUCH newer than Flexbox and therefore may actually be intended as a replacement to some extent. Much like Flexbox replaced the typical use case for float (not the intended use).



                                  I'm going to preface this by saying, I rarely NEED the complexities/capabilities of Grid so I still use Flexbox for most things.



                                  However, in my experience, the flex-wrap capabilities, especially with variable screen sizes, is one place that I feel Grid isn't a great replacement.






                                  share|improve this answer

























                                    1












                                    1








                                    1







                                    I should probably point out that Grid is MUCH newer than Flexbox and therefore may actually be intended as a replacement to some extent. Much like Flexbox replaced the typical use case for float (not the intended use).



                                    I'm going to preface this by saying, I rarely NEED the complexities/capabilities of Grid so I still use Flexbox for most things.



                                    However, in my experience, the flex-wrap capabilities, especially with variable screen sizes, is one place that I feel Grid isn't a great replacement.






                                    share|improve this answer













                                    I should probably point out that Grid is MUCH newer than Flexbox and therefore may actually be intended as a replacement to some extent. Much like Flexbox replaced the typical use case for float (not the intended use).



                                    I'm going to preface this by saying, I rarely NEED the complexities/capabilities of Grid so I still use Flexbox for most things.



                                    However, in my experience, the flex-wrap capabilities, especially with variable screen sizes, is one place that I feel Grid isn't a great replacement.







                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered Mar 8 at 13:53









                                    Bryce HowitsonBryce Howitson

                                    1,444516




                                    1,444516



























                                        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.




                                        draft saved


                                        draft discarded














                                        StackExchange.ready(
                                        function ()
                                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55064488%2fwhat-are-the-areas-covered-by-flexbox-which-are-difficult-or-impossible-to-achie%23new-answer', 'question_page');

                                        );

                                        Post as a guest















                                        Required, but never shown





















































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown

































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown







                                        Popular posts from this blog

                                        Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

                                        2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

                                        Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme