About the order and direction of the list in CSS Flexbox












1















If you list the list with flex, it looks something like this.



12

34

56


How can I arrange this in flex like this?
Is there a way to do it?



14

25

36


By the way, in case of increasing to seven



15

26

37

4


It is like feeling.






.list_number {

  display: flex;

  flex-wrap: wrap;

}

.list_number > li {

  width: 50%

}

<ul class="list_number">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>








css flexbox







share|improve this question




















  • 4





    I think columns is more suitable in this case : developer.mozilla.org/en-US/docs/Web/CSS/columns

    – Temani Afif
    Jan 19 at 16:06






  • 1





    jsfiddle.net/kjusobmd

    – VXp
    Jan 19 at 17:00
















1















If you list the list with flex, it looks something like this.



12

34

56


How can I arrange this in flex like this?
Is there a way to do it?



14

25

36


By the way, in case of increasing to seven



15

26

37

4


It is like feeling.






.list_number {

  display: flex;

  flex-wrap: wrap;

}

.list_number > li {

  width: 50%

}

<ul class="list_number">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>








css flexbox







share|improve this question




















  • 4





    I think columns is more suitable in this case : developer.mozilla.org/en-US/docs/Web/CSS/columns

    – Temani Afif
    Jan 19 at 16:06






  • 1





    jsfiddle.net/kjusobmd

    – VXp
    Jan 19 at 17:00














1












1








1








If you list the list with flex, it looks something like this.



12

34

56


How can I arrange this in flex like this?
Is there a way to do it?



14

25

36


By the way, in case of increasing to seven



15

26

37

4


It is like feeling.






.list_number {

  display: flex;

  flex-wrap: wrap;

}

.list_number > li {

  width: 50%

}

<ul class="list_number">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>








css flexbox







share|improve this question
















If you list the list with flex, it looks something like this.



12

34

56


How can I arrange this in flex like this?
Is there a way to do it?



14

25

36


By the way, in case of increasing to seven



15

26

37

4


It is like feeling.






.list_number {

  display: flex;

  flex-wrap: wrap;

}

.list_number > li {

  width: 50%

}

<ul class="list_number">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>








.list_number {

  display: flex;

  flex-wrap: wrap;

}

.list_number > li {

  width: 50%

}

<ul class="list_number">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>





.list_number {

  display: flex;

  flex-wrap: wrap;

}

.list_number > li {

  width: 50%

}

<ul class="list_number">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>





css flexbox




css flexbox






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 19 at 16:07









Ｈｏｎｇａｒｃ

2,2601725




2,2601725










asked Jan 19 at 15:57









ccocco

82




82








  • 4





    I think columns is more suitable in this case : developer.mozilla.org/en-US/docs/Web/CSS/columns

    – Temani Afif
    Jan 19 at 16:06






  • 1





    jsfiddle.net/kjusobmd

    – VXp
    Jan 19 at 17:00














  • 4





    I think columns is more suitable in this case : developer.mozilla.org/en-US/docs/Web/CSS/columns

    – Temani Afif
    Jan 19 at 16:06






  • 1





    jsfiddle.net/kjusobmd

    – VXp
    Jan 19 at 17:00








4




4





I think columns is more suitable in this case : developer.mozilla.org/en-US/docs/Web/CSS/columns

– Temani Afif
Jan 19 at 16:06





I think columns is more suitable in this case : developer.mozilla.org/en-US/docs/Web/CSS/columns

– Temani Afif
Jan 19 at 16:06




1




1





jsfiddle.net/kjusobmd

– VXp
Jan 19 at 17:00





jsfiddle.net/kjusobmd

– VXp
Jan 19 at 17:00












3 Answers
3






active

oldest

votes


















2














There are many ways you can achieve this but as @TemaniAfif mentioned in the comments, the easiest method to do this would be to use columns like this:



ul{

    columns: 2;

 }


Just add that to your css and you can achieve the same thing with just one line of code.



Hope this helps.






share|improve this answer


























  • This is probably the cleanest and most straightforward CSS-only approach of doing this. +1

    – AndrewL64
    Jan 19 at 17:42













  • Oh I did not see his comment , But anyways , Thank you sir

    – Thanveer Shah
    Jan 19 at 17:48



















0














flex-direction: column and max-height should do the trick.






share|improve this answer
























  • Please post a complete answer. Show us how your answer works.

    – Michael_B
    Jan 19 at 18:16



















0














If you are open to a JavaScript approach, you can just retrieve the height of an <li> element (assuming that all the <li> elements are the same height), multiply it into half the number of <li>'s inside your <ul> element and set the height of the ul to that value. (If the number of <li>'s is an odd number, just add the height of one more <li> to the value.)



Also, make sure the parent flex container .list_number has the properties flex-direction: column; and flex-wrap: wrap; so that elements will automatically go the next column when previous elements have filled the height.




Check and run the Code Snippet below for a practical example of what I have described above:






/* JavaScript */

const div = document.querySelector(".list_number");

const lists = document.querySelectorAll(".list_number li");

const height = window.getComputedStyle(lists[0]).height;



div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";

/* CSS */



html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}



.list_number{

  list-style: none;

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

}

<!-- HTML -->



<ul class="list_number">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ul>








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%2f54268852%2fabout-the-order-and-direction-of-the-list-in-css-flexbox%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









    2














    There are many ways you can achieve this but as @TemaniAfif mentioned in the comments, the easiest method to do this would be to use columns like this:



    ul{
    
    columns: 2;
    
 }


    Just add that to your css and you can achieve the same thing with just one line of code.



    Hope this helps.






    share|improve this answer


























    • This is probably the cleanest and most straightforward CSS-only approach of doing this. +1

      – AndrewL64
      Jan 19 at 17:42













    • Oh I did not see his comment , But anyways , Thank you sir

      – Thanveer Shah
      Jan 19 at 17:48
















    2














    There are many ways you can achieve this but as @TemaniAfif mentioned in the comments, the easiest method to do this would be to use columns like this:



    ul{
    
    columns: 2;
    
 }


    Just add that to your css and you can achieve the same thing with just one line of code.



    Hope this helps.






    share|improve this answer


























    • This is probably the cleanest and most straightforward CSS-only approach of doing this. +1

      – AndrewL64
      Jan 19 at 17:42













    • Oh I did not see his comment , But anyways , Thank you sir

      – Thanveer Shah
      Jan 19 at 17:48














    2












    2








    2







    There are many ways you can achieve this but as @TemaniAfif mentioned in the comments, the easiest method to do this would be to use columns like this:



    ul{
    
    columns: 2;
    
 }


    Just add that to your css and you can achieve the same thing with just one line of code.



    Hope this helps.






    share|improve this answer















    There are many ways you can achieve this but as @TemaniAfif mentioned in the comments, the easiest method to do this would be to use columns like this:



    ul{
    
    columns: 2;
    
 }


    Just add that to your css and you can achieve the same thing with just one line of code.



    Hope this helps.







    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Jan 19 at 17:46









    AndrewL64

    9,69041843




    9,69041843










    answered Jan 19 at 17:40









    Thanveer ShahThanveer Shah

    391110




    391110













    • This is probably the cleanest and most straightforward CSS-only approach of doing this. +1

      – AndrewL64
      Jan 19 at 17:42













    • Oh I did not see his comment , But anyways , Thank you sir

      – Thanveer Shah
      Jan 19 at 17:48



















    • This is probably the cleanest and most straightforward CSS-only approach of doing this. +1

      – AndrewL64
      Jan 19 at 17:42













    • Oh I did not see his comment , But anyways , Thank you sir

      – Thanveer Shah
      Jan 19 at 17:48

















    This is probably the cleanest and most straightforward CSS-only approach of doing this. +1

    – AndrewL64
    Jan 19 at 17:42







    This is probably the cleanest and most straightforward CSS-only approach of doing this. +1

    – AndrewL64
    Jan 19 at 17:42















    Oh I did not see his comment , But anyways , Thank you sir

    – Thanveer Shah
    Jan 19 at 17:48





    Oh I did not see his comment , But anyways , Thank you sir

    – Thanveer Shah
    Jan 19 at 17:48













    0














    flex-direction: column and max-height should do the trick.






    share|improve this answer
























    • Please post a complete answer. Show us how your answer works.

      – Michael_B
      Jan 19 at 18:16
















    0














    flex-direction: column and max-height should do the trick.






    share|improve this answer
























    • Please post a complete answer. Show us how your answer works.

      – Michael_B
      Jan 19 at 18:16














    0












    0








    0







    flex-direction: column and max-height should do the trick.






    share|improve this answer













    flex-direction: column and max-height should do the trick.







    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Jan 19 at 16:22









    BenjaminBenjamin

    264




    264













    • Please post a complete answer. Show us how your answer works.

      – Michael_B
      Jan 19 at 18:16



















    • Please post a complete answer. Show us how your answer works.

      – Michael_B
      Jan 19 at 18:16

















    Please post a complete answer. Show us how your answer works.

    – Michael_B
    Jan 19 at 18:16





    Please post a complete answer. Show us how your answer works.

    – Michael_B
    Jan 19 at 18:16











    0














    If you are open to a JavaScript approach, you can just retrieve the height of an <li> element (assuming that all the <li> elements are the same height), multiply it into half the number of <li>'s inside your <ul> element and set the height of the ul to that value. (If the number of <li>'s is an odd number, just add the height of one more <li> to the value.)



    Also, make sure the parent flex container .list_number has the properties flex-direction: column; and flex-wrap: wrap; so that elements will automatically go the next column when previous elements have filled the height.




    Check and run the Code Snippet below for a practical example of what I have described above:






    /* JavaScript */
    
const div = document.querySelector(".list_number");
    
const lists = document.querySelectorAll(".list_number li");
    
const height = window.getComputedStyle(lists[0]).height;
    

    
div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";

    /* CSS */
    

    
html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}
    

    
.list_number{
    
  list-style: none;
    
  display: flex;
    
  flex-direction: column;
    
  flex-wrap: wrap;
    
}

    <!-- HTML -->
    

    
<ul class="list_number">
    
    <li>1</li>
    
    <li>2</li>
    
    <li>3</li>
    
    <li>4</li>
    
    <li>5</li>
    
</ul>








    share|improve this answer




























      0














      If you are open to a JavaScript approach, you can just retrieve the height of an <li> element (assuming that all the <li> elements are the same height), multiply it into half the number of <li>'s inside your <ul> element and set the height of the ul to that value. (If the number of <li>'s is an odd number, just add the height of one more <li> to the value.)



      Also, make sure the parent flex container .list_number has the properties flex-direction: column; and flex-wrap: wrap; so that elements will automatically go the next column when previous elements have filled the height.




      Check and run the Code Snippet below for a practical example of what I have described above:






      /* JavaScript */
      
const div = document.querySelector(".list_number");
      
const lists = document.querySelectorAll(".list_number li");
      
const height = window.getComputedStyle(lists[0]).height;
      

      
div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";

      /* CSS */
      

      
html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}
      

      
.list_number{
      
  list-style: none;
      
  display: flex;
      
  flex-direction: column;
      
  flex-wrap: wrap;
      
}

      <!-- HTML -->
      

      
<ul class="list_number">
      
    <li>1</li>
      
    <li>2</li>
      
    <li>3</li>
      
    <li>4</li>
      
    <li>5</li>
      
</ul>








      share|improve this answer


























        0












        0








        0







        If you are open to a JavaScript approach, you can just retrieve the height of an <li> element (assuming that all the <li> elements are the same height), multiply it into half the number of <li>'s inside your <ul> element and set the height of the ul to that value. (If the number of <li>'s is an odd number, just add the height of one more <li> to the value.)



        Also, make sure the parent flex container .list_number has the properties flex-direction: column; and flex-wrap: wrap; so that elements will automatically go the next column when previous elements have filled the height.




        Check and run the Code Snippet below for a practical example of what I have described above:






        /* JavaScript */
        
const div = document.querySelector(".list_number");
        
const lists = document.querySelectorAll(".list_number li");
        
const height = window.getComputedStyle(lists[0]).height;
        

        
div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";

        /* CSS */
        

        
html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}
        

        
.list_number{
        
  list-style: none;
        
  display: flex;
        
  flex-direction: column;
        
  flex-wrap: wrap;
        
}

        <!-- HTML -->
        

        
<ul class="list_number">
        
    <li>1</li>
        
    <li>2</li>
        
    <li>3</li>
        
    <li>4</li>
        
    <li>5</li>
        
</ul>








        share|improve this answer













        If you are open to a JavaScript approach, you can just retrieve the height of an <li> element (assuming that all the <li> elements are the same height), multiply it into half the number of <li>'s inside your <ul> element and set the height of the ul to that value. (If the number of <li>'s is an odd number, just add the height of one more <li> to the value.)



        Also, make sure the parent flex container .list_number has the properties flex-direction: column; and flex-wrap: wrap; so that elements will automatically go the next column when previous elements have filled the height.




        Check and run the Code Snippet below for a practical example of what I have described above:






        /* JavaScript */
        
const div = document.querySelector(".list_number");
        
const lists = document.querySelectorAll(".list_number li");
        
const height = window.getComputedStyle(lists[0]).height;
        

        
div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";

        /* CSS */
        

        
html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}
        

        
.list_number{
        
  list-style: none;
        
  display: flex;
        
  flex-direction: column;
        
  flex-wrap: wrap;
        
}

        <!-- HTML -->
        

        
<ul class="list_number">
        
    <li>1</li>
        
    <li>2</li>
        
    <li>3</li>
        
    <li>4</li>
        
    <li>5</li>
        
</ul>








        /* JavaScript */
        
const div = document.querySelector(".list_number");
        
const lists = document.querySelectorAll(".list_number li");
        
const height = window.getComputedStyle(lists[0]).height;
        

        
div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";

        /* CSS */
        

        
html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}
        

        
.list_number{
        
  list-style: none;
        
  display: flex;
        
  flex-direction: column;
        
  flex-wrap: wrap;
        
}

        <!-- HTML -->
        

        
<ul class="list_number">
        
    <li>1</li>
        
    <li>2</li>
        
    <li>3</li>
        
    <li>4</li>
        
    <li>5</li>
        
</ul>





        /* JavaScript */
        
const div = document.querySelector(".list_number");
        
const lists = document.querySelectorAll(".list_number li");
        
const height = window.getComputedStyle(lists[0]).height;
        

        
div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";

        /* CSS */
        

        
html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}
        

        
.list_number{
        
  list-style: none;
        
  display: flex;
        
  flex-direction: column;
        
  flex-wrap: wrap;
        
}

        <!-- HTML -->
        

        
<ul class="list_number">
        
    <li>1</li>
        
    <li>2</li>
        
    <li>3</li>
        
    <li>4</li>
        
    <li>5</li>
        
</ul>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 19 at 17:34









        AndrewL64AndrewL64

        9,69041843




        9,69041843






























            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%2f54268852%2fabout-the-order-and-direction-of-the-list-in-css-flexbox%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

            Callistus III

            Image
            Callistus III Res apud Vicidata repertae: Nativitas : 8 Ianuarii 1379 ; Canals Obitus : 15 Augusti 1458 ; Roma Patria : Corona Aragoniae Nomen nativum : Alonso de Borja i Llançol Pontificatus 1455 - 1458 Praecessor : Nicolaus V Successor : Pius II Insignia heraldica Callistus III (natus Alphonsus de Borgia Hispanice Alonso de Borja y Borja , Italiane Alfonso Borgia , die 31 Decembris 1378 Saetabis Augustae in Hispania apud Valentiam - obiit die 6 Augusti 1458), papa catholicus episcopus Romanus a die 8 Aprilis 1455 erat. Vita | Alphonsus de Borgia studuit iuri canonico Ilerdae. Postea iuris consultus antipapae Benedicti XIII et regis Alphonsi V Aragoniae fit. Anno 1444 episcopus Valentiae factus est. Anno 1444 a papa Eugenio IV Cardinalis Sanctae Romanae Ecclesiae creatus est. Bibliographia | Friedrich Wilhelm Bautz, "CALIXT III., Papst" in Biographisch-Bibliographisches Kirchenlexikon  vol. 1 (Hammonae, 1975; reimpr. 1990. ISBN 3-88...
            Read more

            Plistias Cous

            Plistias Cous (Graece Πλειστίας ), qui saeculo IV a.C.n. exeunte floruit, insulae Coi incola, fuit anno 306 a.C.n. pro Demetrio Poliorceta dux classium. Ille enim navigator principalis fuit classis omnis; ille una cum Hegesippo Halicarnassensi in proelio iuxta Salaminem Cypri commisso praefuit alae dextrae. Fontes | Diodorus Siculus, Bibliotheca historica 20.50.4 Bibliographia | "Prosopography of Antigonos's Friends and Subordinates" in Richard A. Billows, Antigonos the One-Eyed and the Creation of the Hellenistic State (Berkeley: University of California Press, 1990) no. 98, p. 425 H. Hauben, Het vlootbevelhebberschap in de vroege Diadochen tijd (Bruxellis, 1975) pp. 78, 117-119 T. Lenschau, "Pleistias" in Paulys Real-Enzyklopädie der classischen Altertumswissenschaft edd. G. Wissowa et alii (Stuttgart, 1893-1972 ~ ~) This page is only for reference, If you need detailed information, please check here
            Read more

            Index Sanctorum

            Index Sanctorum Sanctus, -i n. Religio Christiana . Sancti | Index A B C D E F G H I L M N O P Q R S T U V X Z Vide etiam — Nexus externi Index hic non iuxta normas Ecclesiae Catholicae Romanae est factus, cum plurimos tenet qui a ecclesia non agnoscuntur. A | Abundius episcopus Adalbertus (episcopus Pragensis) Aegidius abbas Agapetus I Agapitus Praenestinus Agatha Catanensis Agatho Agnes de Bohemia Agnes Romana Albertus Hurtado Albertus Magnus Alexander I Aloisius Gonzaga Aloisius Orione Alphonsus a Ligorio Ambrosius Anastasius I (papa) Andreas (apostolus) Anicetus (papa) Anscharius (archiepiscopus Hamburgensis-Bremensis) Anterus Antonius Patavinus Antonius abbas Antoninus Natolii de Pactis Athanasius Alexandrinus Augustinus Augustinus Cantuariensis Avitus B | Bartholomaeus (apostolus) Basilius (beatus) Basilius Magnus Basilius Ostrogiensis Beda Benedictus de Nursia Benedictus II Bernadetta Lapurdensis Bernardus ...
            Read more