[分享]css两行两列布局代码

对于网站的布局而言，CSS 两行两列布局常常被使用。它可以用来实现页面的各种设计效果和展示图像文字等内容，也让页面看起来更加美观和舒适。下面的代码就是一个基本的CSS两行两列布局示例：.contain...

对于网站的布局而言，CSS 两行两列布局常常被使用。它可以用来实现页面的各种设计效果和展示图像文字等内容，也让页面看起来更加美观和舒适。下面的代码就是一个基本的CSS两行两列布局示例：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.col {
  flex-basis: 50%;
  padding: 10px;
  box-sizing: border-box;
} 

上述代码中，container为父元素，设为flex布局，让子元素成为弹性盒布局。flex-wrap设置为wrap，允许子元素换行。justify-content为居中，将子元素居中排列。而col则为子元素，flex-basis设置为50%，将子元素排列成两列。padding和box-sizing是用来调整布局的，让程序更加符合我们的需求。

以上就是一个基本的CSS两行两列布局代码示例。在实际应用当中，我们还可以根据自己需要来调整代码，比如可以调整flex-basis，让子元素布局更加灵活。同时，我们也可以添加其他元素和属性，以实现更加丰富多彩的布局效果。