css3 display box竖排

CSS3的display Box竖排属性用于实现盒子垂直排列，是网页布局中非常常用的一种排版方式。本文将介绍display Box竖排属性的基本原理及其常用的属性。

.Box{
  display: flex; /* 父元素使用flex布局 */
  flex-direction: column; /* 竖向排列 */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

.Box > div{
  width: 100px;
  height: 100px;
  margin: 10px;
}

上面的代码演示了如何使用display Box竖排属性将多个盒子垂直排列，并且实现水平和垂直居中。

具体来说，我们使用flex布局来实现盒子的垂直排列。在flex布局中，flex-direction属性设置为column表示竖向排列，也就是将子元素从上到下排列。

同时，我们使用justify-content和align-items属性分别实现垂直和水平居中。justify-content属性用于垂直居中，取值有center、flex-start、flex-end等；align-items属性用于水平居中，取值也是center、flex-start、flex-end等。

除此之外，我们还可以使用order属性来设置盒子的排列顺序，使用flex-wrap属性设置是否允许换行，使用align-self属性调整单个盒子在交叉轴上的对齐方式等等。

总体来说，CSS3的display Box竖排属性是非常实用的一种网页排版方式，可以有效地提高页面的美观性和用户体验。在实际开发中，我们可以根据需要自由组合这些属性，灵活运用到网页的布局中。