l-1

WEB教程

主页/CSS教程/CSS布局技术/CSS Flexbox容器属性

CSS教程

CSS Flexbox容器属性

CSS Flexbox容器属性详解：方向,换行和对齐

本文由找找网为您提供，旨在详细介绍CSS Flexbox布局中容器属性的使用方法，帮助您掌握弹性布局的核心概念。

什么是Flexbox布局

Flexbox布局（弹性盒子布局）是CSS3中一种新的布局模式，用于在一个维度上布置项目，可以灵活地分配容器内项目之间的空间和对齐方式。采用Flex布局的元素称为Flex容器（flex container），其所有子元素自动成为容器成员，称为Flex项目（flex item）。

要使用Flex布局，只需将容器的display属性设置为flex或inline-flex：

.container {
  display: flex; /* 生成一个块状的flex容器盒子 */
}

Flex布局的基本概念

在Flex容器中默认存在两根轴：水平主轴（main axis）和垂直交叉轴（cross axis）。主轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。理解这些基本概念是掌握Flexbox布局的基础。

容器属性详解

flex-direction属性

flex-direction属性决定主轴的方向，即项目的排列方向。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

属性值说明：

  • row（默认值）：主轴为水平方向，起点在左端
  • row-reverse：主轴为水平方向，起点在右端
  • column：主轴为垂直方向，起点在上沿
  • column-reverse：主轴为垂直方向，起点在下沿

完整示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      width: 400px;
      height: 200px;
      border: 1px solid #333;
      margin-bottom: 20px;
    }
    .item {
      width: 60px;
      height: 60px;
      background: coral;
      margin: 5px;
      text-align: center;
      line-height: 60px;
    }
    .row { flex-direction: row; }
    .row-reverse { flex-direction: row-reverse; }
    .column { flex-direction: column; }
    .column-reverse { flex-direction: column-reverse; }
  </style>
</head>
<body>
  <h3>flex-direction: row</h3>
  <div class="container row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>flex-direction: row-reverse</h3>
  <div class="container row-reverse">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>flex-direction: column</h3>
  <div class="container column">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>flex-direction: column-reverse</h3>
  <div class="container column-reverse">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

flex-wrap属性

flex-wrap属性定义如果一条轴线排不下，项目如何换行。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

属性值说明：

  • nowrap（默认）：不换行，项目尺寸会随之调整
  • wrap：换行，第一行在上方
  • wrap-reverse：换行，第一行在下方

完整示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 200px;
      border: 1px solid #333;
      margin-bottom: 20px;
    }
    .item {
      width: 100px;
      height: 60px;
      background: lightblue;
      margin: 5px;
      text-align: center;
      line-height: 60px;
    }
    .nowrap { flex-wrap: nowrap; }
    .wrap { flex-wrap: wrap; }
    .wrap-reverse { flex-wrap: wrap-reverse; }
  </style>
</head>
<body>
  <h3>flex-wrap: nowrap（默认）</h3>
  <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>

  <h3>flex-wrap: wrap</h3>
  <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>

  <h3>flex-wrap: wrap-reverse</h3>
  <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>
</body>
</html>

flex-flow属性

flex-flow属性是flex-direction和flex-wrap属性的简写形式，默认值为row nowrap。

.container {
  flex-flow: <flex-direction> || <flex-wrap>;
}

使用示例：

.container {
  flex-flow: row wrap; /* 主轴水平方向且允许多行排列 */
}

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

属性值说明：

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：两端对齐，项目之间的间隔相等
  • space-around：每个项目两侧的间隔相等

完整示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      width: 400px;
      height: 100px;
      border: 1px solid #333;
      margin-bottom: 20px;
    }
    .item {
      width: 60px;
      height: 60px;
      background: lightgreen;
      margin: 5px;
      text-align: center;
      line-height: 60px;
    }
    .flex-start { justify-content: flex-start; }
    .flex-end { justify-content: flex-end; }
    .center { justify-content: center; }
    .space-between { justify-content: space-between; }
    .space-around { justify-content: space-around; }
  </style>
</head>
<body>
  <h3>justify-content: flex-start</h3>
  <div class="container flex-start">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>justify-content: flex-end</h3>
  <div class="container flex-end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>justify-content: center</h3>
  <div class="container center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>justify-content: space-between</h3>
  <div class="container space-between">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>justify-content: space-around</h3>
  <div class="container space-around">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

align-items属性

align-items属性定义项目在交叉轴上的对齐方式。

.container {
  align-items: stretch | center | flex-start | flex-end | baseline;
}

属性值说明：

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • center：交叉轴的中点对齐
  • baseline：项目的第一行文字的基线对齐

完整示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      width: 400px;
      height: 150px;
      border: 1px solid #333;
      margin-bottom: 20px;
    }
    .item {
      width: 60px;
      background: khaki;
      margin: 5px;
      text-align: center;
    }
    .stretch { align-items: stretch; }
    .stretch .item { height: auto; }
    .flex-start { align-items: flex-start; }
    .flex-start .item { height: 60px; }
    .flex-end { align-items: flex-end; }
    .flex-end .item { height: 60px; }
    .center { align-items: center; }
    .center .item { height: 60px; }
    .baseline { align-items: baseline; }
    .baseline .item { 
      height: 60px; 
      padding-top: 10px;
    }
    .baseline .item:nth-child(2) { 
      padding-top: 20px; 
    }
  </style>
</head>
<body>
  <h3>align-items: stretch</h3>
  <div class="container stretch">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>align-items: flex-start</h3>
  <div class="container flex-start">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>align-items: flex-end</h3>
  <div class="container flex-end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>align-items: center</h3>
  <div class="container center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>

  <h3>align-items: baseline</h3>
  <div class="container baseline">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

align-content属性

align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

属性值说明：

  • stretch（默认值）：轴线占满整个交叉轴
  • flex-start：与交叉轴的起点对齐
  • flex-end：与交叉轴的终点对齐
  • center：与交叉轴的中点对齐
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around：每根轴线两侧的间隔都相等

完整示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      width: 400px;
      height: 300px;
      border: 1px solid #333;
      margin-bottom: 20px;
    }
    .item {
      width: 100px;
      height: 60px;
      background: plum;
      margin: 5px;
      text-align: center;
      line-height: 60px;
    }
    .flex-start { align-content: flex-start; }
    .flex-end { align-content: flex-end; }
    .center { align-content: center; }
    .space-between { align-content: space-between; }
    .space-around { align-content: space-around; }
    .stretch { align-content: stretch; }
  </style>
</head>
<body>
  <h3>align-content: flex-start</h3>
  <div class="container flex-start">
    <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 class="item">6</div>
  </div>

  <h3>align-content: flex-end</h3>
  <div class="container flex-end">
    <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 class="item">6</div>
  </div>

  <h3>align-content: center</h3>
  <div class="container center">
    <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 class="item">6</div>
  </div>

  <h3>align-content: space-between</h3>
  <div class="container space-between">
    <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 class="item">6</div>
  </div>

  <h3>align-content: space-around</h3>
  <div class="container space-around">
    <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 class="item">6</div>
  </div>

  <h3>align-content: stretch</h3>
  <div class="container stretch">
    <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 class="item">6</div>
  </div>
</body>
</html>

容器属性对比总结

下表总结了Flexbox容器各属性的功能、默认值及常用取值：

属性功能默认值常用取值
flex-direction定义主轴方向rowrow, row-reverse, column, column-reverse
flex-wrap定义是否换行nowrapnowrap, wrap, wrap-reverse
flex-flow前两个属性的简写row nowrap||
justify-content主轴对齐方式flex-startflex-start, flex-end, center, space-between, space-around
align-items交叉轴单行对齐方式stretchstretch, flex-start, flex-end, center, baseline
align-content交叉轴多行对齐方式stretchstretch, flex-start, flex-end, center, space-between, space-around

实际应用示例

以下是一个综合运用Flexbox容器属性的实际例子，创建一个响应式导航栏：

<!DOCTYPE html>
<html>
<head>
  <style>
    .navbar {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      background-color: #333;
      padding: 0 20px;
      height: 60px;
    }
    .logo {
      color: white;
      font-size: 1.5rem;
      font-weight: bold;
    }
    .nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav-links li {
      margin-left: 20px;
    }
    .nav-links a {
      color: white;
      text-decoration: none;
      padding: 5px 10px;
    }
    .nav-links a:hover {
      background-color: #555;
      border-radius: 3px;
    }

    @media (max-width: 768px) {
      .navbar {
        flex-wrap: wrap;
        height: auto;
        padding: 10px;
      }
      .nav-links {
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
      }
      .nav-links li {
        margin: 5px 0;
        width: 100%;
        text-align: center;
      }
    }
  </style>
</head>
<body>
  <nav class="navbar">
    <div class="logo">找找网</div>
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">教程</a></li>
      <li><a href="#">示例</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </nav>
</body>
</html>

总结

本教程详细介绍了CSS Flexbox布局的容器属性，这些属性可以精确控制Flex容器内项目的布局方式。通过合理使用这些属性，可以轻松实现各种复杂的布局需求。

知识点总结

知识点知识内容
Flexbox基本概念采用Flex布局的元素称为Flex容器，其子元素称为Flex项目。容器有主轴和交叉轴两根轴。
display属性通过设置display: flex或display: inline-flex来创建Flex容器。
flex-direction决定主轴的方向，控制项目的排列方向，有row、row-reverse、column、column-reverse四个值。
flex-wrap控制项目是否换行，有nowrap、wrap、wrap-reverse三个值。
flex-flow是flex-direction和flex-wrap的简写形式。
justify-content定义项目在主轴上的对齐方式，包括flex-start、flex-end、center、space-between、space-around等值。
align-items定义项目在交叉轴上的对齐方式，包括stretch、flex-start、flex-end、center、baseline等值。
align-content定义多根轴线的对齐方式，仅当有多行时生效。

找找网提供的本教程旨在帮助开发者掌握Flexbox容器属性的使用方法，通过实际示例演示了各属性的效果，方便在实际项目中应用这些知识。

, , ,