css盒子多个排列整齐

首先来介绍一个经常用来排列盒子的css属性，它就是“display:flex;”，利用这个属性可以很方便地将多个盒子排列整齐。 对于多个在一行上的盒子可以通过以下css代码实现：

p{
  display:flex;
}
 

这样在p标签中加入多个盒子元素时，这些盒子就会排列在一行上，同时也会自动调整每个盒子的宽度，保证它们可以在同一行上排列整齐。 如果需要在一个容器里面，将多个盒子按照一定的比例排列，则可以使用“flex”属性进行设置。例如：

p{
  display:flex;
}
.box1{
  flex: 1;
}
.box2{
  flex: 2;
}
 

这样会将p标签下的所有盒子，按照两个盒子的比例排列。其中.box1的“flex:1”表示占比为1，.box2的“flex:2”表示占比为2。也就是说.box2的宽度是.box1的两倍。 以上是针对横向排列的情况，如果需要纵向排列，则需要加上“flex-direction: column;”属性，例如：

p{
  display:flex;
  flex-direction: column;
}
 

这样p标签下的盒子就会按照从上到下的位置排列。如果需要按照一定的比例排列，则需要在每个盒子里面再加上“flex”属性，例如：

p{
  display:flex;
  flex-direction: column;
}
.box1{
  flex: 1;
}
.box2{
  flex: 2;
}
 

以上就是关于css盒子多个排列整齐的简单介绍，希望能够对大家的学习有所帮助。