参考资料

  1. 边框属性详细说明以及案例
  2. * 通配符选择器详细说明以及案例
  3. css样式div居中
  4. 如何用Flex布局实现导航栏？
  5. align-self: auto/stretch详细说明
  6. css div阴影效果
  7. flex-direction: row/column示例
  8. 如何避免 CSS 过渡动画卡顿？

flex-direction: row/column示例

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原生属性，直接在现代浏览器中使用。

TAG：元素示例用法水平默认值原生属性现代浏览器