flex-direction: row/column示例

参考资料

1. 后代选择器详细说明以及案例
2. css样式div居中
3. css如何居中一个div
4. 如何用添加产品图片和描述？
5. css div阴影效果,
6. CSS格式化/压缩有哪些
7. 如何避免Flex容器高度塌陷？
8. 背景属性详细说明以及案例

flex-direction: row/column 示例

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: row; /* 或 column */
  gap: 10px;
}

.item {
  padding: 20px;
  background: lightblue;
}

用法

• flex-direction: row: 子元素水平排列（默认值）

• flex-direction: column: 子元素垂直排列

• 可配合 flex-wrap, justify-content, align-items 使用

安装

不需要安装，是CSS原生属性，直接在现代浏览器中使用。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。