css - 如何使用flex创建四个块？

This question already has an answer here:

Using Flexbox to present 4 images in a ul as a 2x2 grid
                                
                                    （1个答案）
                                
                        
                                上个月关闭。
            
                    
我试图创建四个具有相同宽度的块：

1    2


3    4

<div class="blocks">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
</div>

.block {
  display: flex;
}

最佳答案

演示：

.item {
     width: 100px;
     height: 100px;
     border: 1px solid black;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .group{
     display: flex;
     flex-direction: row;
   }

  <div class="group">
   <div class="item">1</div>
   <div class="item">2</div>
  </div>

  <div class="group">
   <div class="item">3</div>
   <div class="item">4</div>
  </div>