课程
开始
开始学习
CodeGym /课程 /Frontend SELF ZH /坐标轴方向

坐标轴方向

Frontend SELF ZH
第 17 级 , 课程 2
可用

6.1 flex-direction 属性

Flexbox 提供了灵活且强大的工具来创建自适应布局。这套系统的重要部分是布局轴，它决定了 Flex 元素在 Flex 容器中的排列方式。下面我们详细讨论一下控制轴方向和在溢出时 Flex 元素行为的 flex-direction 和 flex-wrap 属性。

flex-direction属性定义了主轴的方向，Flex 元素将沿此方向排列。此方向可以是水平或垂直，也可以是正向或反向。

值:

  • row: 主轴为自左向右的水平轴（默认值）
  • row-reverse: 主轴为自右向左的水平轴
  • column: 主轴为自上而下的垂直轴
  • column-reverse: 主轴为自下而上的垂直轴

使用示例

1. 元素水平排列:

CSS 
    
      .container-row {
        display: flex;
        flex-direction: row;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-row-reverse {
        display: flex;
        flex-direction: row-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-row">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
      </div>
      <div class="container-row-reverse">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
      </div>

2. 元素垂直排列:

CSS 
    
      .container-column {
        display: flex;
        flex-direction: column;
        border: 2px solid #000;
        padding: 10px;
      }

      .container-column-reverse {
        display: flex;
        flex-direction: column-reverse;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }
HTML 
    
      <div class="container-column">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
      </div>

      <div class="container-column-reverse">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
      </div>

代码说明:

  • .container-row: 元素自左向右水平排列
  • .container-row-reverse: 元素自右向左水平排列
  • .container-column: 元素自上向下垂直排列
  • .container-column-reverse: 元素自下向上垂直排列

6.2 flex-wrap 属性

flex-wrap 属性定义了如果 Flex 元素无法在一行/列中容纳，它们是否会换到新的一行/列。这在创建自适应布局时尤其有用，因为容器的大小可能会根据设备或屏幕而变化。

值

  • nowrap: 元素不换行并排列在一行/列中（默认值）
  • wrap: 元素在必要时换行到新的一行/列
  • wrap-reverse: 元素以相反顺序换行到新的一行/列

使用示例

值 nowrap:

元素不换行并排列在一行/列中（默认值）。

CSS 
    
      .container-nowrap {
        display: flex;
        flex-wrap: nowrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-nowrap">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
        <div class="item">元素 4</div>
      </div>

值 wrap:

元素在必要时换行到新的一行/列。

CSS 
    
      .container-wrap {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
        <div class="item">元素 4</div>
      </div>

值 wrap-reverse:

元素以相反顺序换行到新的一行/列。

CSS 
    
      .container-wrap-reverse {
        display: flex;
        flex-wrap: wrap-reverse;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container-wrap-reverse">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
        <div class="item">元素 4</div>
      </div>

代码说明:

  • .container-nowrap: Flex 元素排列在一行中，即使它们超出了容器边界
  • .container-wrap: 如果不能容纳在一行中，Flex 元素会换行到新的一行
  • .container-wrap-reverse: Flex 元素以相反顺序换行到新的一行

6.3 flex-direction 和 flex-wrap 的组合使用

可以通过 flex-flow 简写属性来组合使用 flex-direction 和 flex-wrap 属性。此属性可以同时设置轴方向和元素换行方式。

语法:

    
      .container {
        flex-flow: [flex-direction] [flex-wrap];
      }

使用示例:

CSS 
    
      .container {
        display: flex;
        flex-flow: row wrap;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 100px;
      }
HTML 
    
      <div class="container">
        <div class="item">元素 1</div>
        <div class="item">元素 2</div>
        <div class="item">元素 3</div>
        <div class="item">元素 4</div>
        <div class="item">元素 5</div>
      </div>

代码说明:

  • .container: 结合使用 flex-direction: row; 和 flex-wrap: wrap; 的 Flex 容器， 这意味着元素水平排列并在需要时换行到新的一行
评论
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION