css flex布局 —— 容器属性 align-content

＊且听风吟

2024-05-09 帮助1人

align-content 属性定义了多根轴线的对齐方式。

如果项目只有一根轴线，该属性不起作用（如果只有一根轴线， align-content 几乎等同于 align-items）。

容器属性 align-content 生效的条件是：必须显式的设置布局方向。

如果布局方向为横向主轴：flex-direction: row;
1、此时 align-content 的变化体现在竖直方向；
2、如果要让 align-content: stretch；生效，这个时候应该去掉子项的高度或者设置子项的高度为 auto

如果布局方向为纵向交叉轴：flex-direction: column;
1、此时 align-content 的变化体现在水平方向
2、如果要让 align-content: stretch；生效，这个时候应该去掉子项的宽度或者设置子项的宽度为 auto

语法

align-content 语法格式如下：

.container {
    align-content: stretch (默认值) | center | flex-start | flex-end | space-between | space-around;
}

属性

align-content 属性有取6个值，如下： flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

flex-start

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      display: flex;
      margin: 0px auto;
      width: 900px;
      height: 300px;
      background-color: #e6e6e6;
      flex-wrap: wrap;
      align-content: flex-start;
    }
    .item {
      width: 250px;
      height: 50px;
      margin-left: 10px;
      margin-top: 10px;
    }
    .container div:nth-of-type(1) {background-color:coral;}
    .container div:nth-of-type(2) {background-color:lightblue;}
    .container div:nth-of-type(3) {background-color:khaki;}
    .container div:nth-of-type(4) {background-color:pink;}
    .container div:nth-of-type(5) {background-color:lightgrey;}
    .container div:nth-of-type(6) {background-color:orange;}
    .container div:nth-of-type(7) {background-color:purple;}
  </style>
</head>
<body>
  <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 class="item">6</div>
    <div class="item">7</div>
  </div>
</body>
</html>

页面效果：
学新通

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;

页面效果：
学新通

这篇好文章是转载于：编程之路

css flex布局 —— 容器属性 align-content

语法

属性

flex-start

flex-end

center

space-between

space-around

stretch

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开