[分享]css两列三列布局总结

在Web开发中，使用CSS实现不同布局是非常常见的操作，其中两列三列布局也是常用的一种。下文将对两列三列布局的实现方式进行总结。一、两列布局 .wrapper { display: flex; } ...

在Web开发中，使用CSS实现不同布局是非常常见的操作，其中两列三列布局也是常用的一种。下文将对两列三列布局的实现方式进行总结。

一、两列布局

  .wrapper {
    display: flex;
  }
  
  .left, .right {
    flex: 1;
  }
  
  .left {
    order: 1;
  }
  
  .right {
    order: 2;
  } 

以上代码实现了左右两列布局。.wrapper设置为弹性布局，.left和.right都设置为弹性元素，通过flex: 1实现平分父元素的宽度。通过.order属性可以控制显示的顺序。

二、三列布局

  .wrapper {
    display: flex;
  }
  
  .left, .center, .right {
    flex: 1;
  }
  
  .left {
    order: 1;
  }
  
  .center {
    order: 2;
  }
  
  .right {
    order: 3;
  } 

以上代码实现了左、中、右三列布局。与两列布局类似，.wrapper设置为弹性布局，.left、.center、.right都设置为弹性元素。其中权重值都为1，通过flex:1实现平分父元素的宽度。通过order属性控制显示的顺序。

总结：通过以上两列和三列布局的实现方式，我们可以看出弹性布局非常方便实现不同的布局。同时，order属性也为我们控制元素的显示顺序提供了很大的方便。