.container { display: flex; flex-direction: row; justify-content: center; align-items: center; } .item { width: 50px; height: 50px; margin: 10px; background-color: #ddd; }
上述代码定义了一个容器,设置了CSS主轴的方向为row,即水平方向,justify-content属性设置居中对齐,align-items属性设置垂直方向居中对齐。
在容器内,大家放置了若干个item元素,并且设置了它们的宽高、边距和背景颜色等基本属性。
使用CSS主轴能够实现各种不同的元素排列方式,如水平居中、垂直居中、等间距排列等等。
总之,掌握CSS主轴是非常重要的,可以帮助你设计更加优美的页面。