Flexbox(弹性盒子)是CSS中的一种布局模块,用于创建灵活的盒子布局。它提供了一种简单而强大的方法来组织、对齐和分布元素,以适应不同屏幕尺寸和设备。下面将介绍Flexbox模块的基本概念和特点,并提供相应的源代码示例。
- 主轴和交叉轴:
Flexbox布局基于两个重要的轴线:主轴(main axis)和交叉轴(cross axis)。主轴是元素排列的方向,可以是水平的(横向)或垂直的(纵向)。交叉轴则是与主轴垂直的轴线。在Flexbox中,我们可以使用flex-direction属性来设置主轴的方向。
源代码示例:
.container {
display: flex;
flex-direction: row; /* 设置主轴为水平方向 */
}