CSS align-content 属性-之路教程

←CSS :active 伪类

CSS align-items 属性→

CSS align-content 属性

当垂直（在横轴上）有可用空间时，CSS align-content 属性会对齐 flex 容器的线条。

align-content 属性是 CSS3 属性之一。

当 flexbox 中只有一行时，此属性不会影响。
它需要在一个灵活的容器内有多条线。

值“stretch”是该属性的默认值。

align-content 属性接受以下值：

flex-start
flex-end
center
space-between
space-around
stretch

初始值	stretch
Applies to	Multi-line flex containers.
Inherited	无
Animatable	无
Version	CSS3
DOM Syntax	object.style.alignContent = "flex-end",

align-content 属性值说明

Value	说明
stretch	使项目(item)拉伸以适合容器。这是此属性的默认值。
center	项目(item)放在容器的中心。
flex-start	项目(item)放在容器的开头。
flex-end	项目(item)放在容器的末端。
space-between	项目(item)放置在行之间。
space-around	项目(item)以相等的间距分布。
initial	使属性使用其默认值。
inherit	从其父元素继承属性。

语法

align-content: flex-start | flex-end | center | space-between | space-around | stretch | initial | inherit;

align-content 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        /* Safari */
        -webkit-flex-flow: row wrap;
        /* Safari 6.1+ */
        -webkit-align-content: stretch;
        /* Safari 7.0+ */
        display: flex;
        flex-flow: row wrap;
        align-content: stretch;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: stretch; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

结果

带有“center”值的 align-content 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        /* Safari */
        -webkit-flex-flow: row wrap;
        /* Safari 6.1+ */
        -webkit-align-content: center;
        /* Safari 7.0+ */
        display: flex;
        flex-flow: row wrap;
        align-content: center;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: center; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

带有“flex-start”值的 align-content 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        /* Safari */
        -webkit-flex-flow: row wrap;
        /* Safari 6.1+ */
        -webkit-align-content: flex-start;
        /* Safari 7.0+ */
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: flex-start; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

带有“flex-end”值的 align-content 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        /* Safari */
        -webkit-flex-flow: row wrap;
        /* Safari 6.1+ */
        -webkit-align-content: flex-end;
        /* Safari 7.0+ */
        display: flex;
        flex-flow: row wrap;
        align-content: flex-end;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: flex-end; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

在以下示例中，li项放在行之间。

带有“space-between”值的 align-content 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        /* Safari */
        -webkit-flex-flow: row wrap;
        /* Safari 6.1+ */
        -webkit-align-content: space-between;
        /* Safari 7.0+ */
        display: flex;
        flex-flow: row wrap;
        align-content: space-between;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-between; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

另一个带有“space-around”值的例子。
li项之间的间距相等。

带有“space-around”值的 align-content 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #example {
        width: 70px;
        height: 300px;
        padding: 0;
        border: 1px solid #c3c3c3;
        display: -webkit-flex;
        /* Safari */
        -webkit-flex-flow: row wrap;
        /* Safari 6.1+ */
        -webkit-align-content: space-around;
        /* Safari 7.0+ */
        display: flex;
        flex-flow: row wrap;
        align-content: space-around;
      }
      #example li {
        width: 70px;
        height: 70px;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <h2>Align-content: space-around; example</h2>
    <ul id="example">
      <li style="background-color:#8ebf42;"></li>
      <li style="background-color:#1c87c9;"></li>
      <li style="background-color:#666;"></li>
    </ul>
  </body>
</html>

日期：2020-06-02 22:14:14 来源：oir作者：oir