css弹性盒模型 阮一峰 |css 表格阴影

.flex-container {
display: flex; /* 容器设置为弹性布局 */
flex-direction: row; /* 主轴方向为水平方向 */
justify-content: center; /* 主轴居中对齐 */
align-items: center; /* 交叉轴居中对齐 */
}
.flex-item {
flex: 1; /* 项目宽度平分 */
height: 100px; /* 项目高度 */
margin: 10px; /* 外边距 */
background-color: #eee; /* 背景色 */
}

上述代码是一个简单的弹性盒模型的实现，容器的display属性设置为flex，表示使用弹性盒模型进行布局。通过设置flex-direction属性可以指定主轴方向，一般默认为row表示水平方向。justify-content和align-items属性则分别用于设置主轴和交叉轴方向上的对齐方式。

而在项目方面，可以使用flex属性控制项目宽度比例，也可以通过设置height、margin、background-color等属性来控制项目的大小和样式。当然，在实际应用中弹性盒模型的用法远不止于此，例如可以使用flex-wrap、flex-flow等属性设置换行和排列顺序、使用order属性控制项目顺序等等。

总之，css弹性盒模型是一种非常实用的布局方式，可以帮助大家更快更好地实现页面布局，也是前端开发者必备的技能之一。