Flexbox: 4 items per row

前端 未结 9 1163
南笙
南笙 2020-11-22 13:01

I\'m using a flex box to display 8 items that will dynamically resize with my page. How do I force it to split the items into two rows? (4 per row)?

Here is a releva

9条回答
  •  -上瘾入骨i
    2020-11-22 13:16

    Hope it helps. for more detail you can follow this Link

    .parent{ 
      display: flex; 
      flex-wrap: wrap; 
    }
    
    .parent .child{ 
      flex: 1 1 25%;
      /*Start Run Code Snippet output CSS*/
      padding: 5px; 
      box-sizing: border-box;
      text-align: center;
      border: 1px solid #000;
      /*End Run Code Snippet output CSS*/
    }
    1
    2
    3
    4
    5
    6
    7
    8

提交回复
热议问题