【移动端网页布局】flex 弹性布局 ⑥ ( 设置侧轴多行子元素排列方式 | align-content 样式说明 | 代码示例 )

移动开发 2023-05-07 19:18:16 阅读次数: 0

文章目录





一、设置侧轴多行子元素排列方式 : align-content 样式说明



1、align-content 样式引入


在上一篇博客 【移动端网页布局】flex 弹性布局 ⑤ ( 设置侧轴单行子元素排列方式 | align-items 样式说明 | 代码示例 ) 介绍的 align-items 样式 只能设置 侧轴单行子元素排列方式 , 如果侧轴有多行元素排列 , 则需要使用 align-content 样式进行设置 ;

如果 垂直方向 有 两行元素 , 第一行紧贴顶部 , 第二行紧贴底部 , 该设置可以使用 align-content 样式进行设置 ;

侧轴只有一行元素 , 设置 align-content 样式 无效 ;


使用该设置的前提 : ① 设置了 flex 弹性布局 , ② 设置了自动换行属性 ;

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;

2、align-content 样式属性值


align-content 样式属性值 : 下面的情况都是 侧轴默认方向是 从上到下 方向的情况 ;

  • flex-start , 默认值 , 侧轴中的元素 从上到下 排列 ; ( 侧轴默认方向是 从上到下 方向的情况 )
  • flex-end , 侧轴中的元素 从下到上 排列 ;
  • center , 多行元素在侧轴 居中对齐 , 显示在中间 ;
  • space-around , 多行元素 在 侧轴 中 , 平分剩余空间 ;
  • space-between , 多行元素 首先将上下两行紧贴顶部和底部 , 其余元素平分剩余空间 ;
  • stretch , 多行元素的高度 自动拉伸 , 平分父元素高度 ;
    • 注意 : 不能设置高度 , 设置高度后 , 该设置无效 ;




二、代码示例



1、代码示例 - 侧轴多行元素从上到下排列


设置默认的 侧轴多行元素 排列方式 , 作为参照 ;

核心代码示例 :

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴多行元素对齐 */
            align-content: flex-start;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
      
      
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴多行元素对齐 */
            align-content: flex-start;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
      
      
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
    </div>
</body>

</html>

展示效果 :
在这里插入图片描述


2、代码示例 - 侧轴多行元素垂直居中


核心代码示例 :

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴多行元素对齐 */
            align-content: center;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
      
      
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴多行元素对齐 */
            align-content: center;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
      
      
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
    </div>
</body>

</html>

展示效果 :
在这里插入图片描述


3、代码示例 - 侧轴多行元素平分剩余空间


space-around , 多行元素 在 侧轴 中 , 平分剩余空间 ;

核心代码示例 :

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴多行元素对齐 */
            align-content: space-around;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
      
      
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴多行元素对齐 */
            align-content: space-around;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
      
      
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
    </div>
</body>

</html>

展示效果 :

在这里插入图片描述


4、代码示例 - 侧轴多行元素 / 上下两行紧贴顶部和底部 / 其余元素平分剩余空间


space-between , 多行元素 首先将上下两行紧贴顶部和底部 , 其余元素平分剩余空间 ;

核心代码示例 :

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴多行元素对齐 */
            align-content: space-between;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
      
      
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴多行元素对齐 */
            align-content: space-between;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
      
      
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
    </div>
</body>

</html>

展示效果 :

在这里插入图片描述


5、代码示例 - 侧轴多行元素自动拉伸平分父元素高度


stretch , 多行元素的高度 自动拉伸 , 平分父元素高度 ;

注意 : 不能设置高度 , 设置高度后 , 该设置无效 ;

核心代码示例 :

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴多行元素对齐 */
            align-content: stretch;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
      
      
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 设置自动换行 */
            flex-wrap: wrap;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴多行元素对齐 */
            align-content: stretch;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
      
      
            width: 100px;
            /* height: 100px; */
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
    </div>
</body>

</html>

展示效果 :

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/han1202012/article/details/130547207
今日推荐
好书推荐《ChatGPT原理与架构：大模型的预训练、迁移和中间件编程 》
Baidu Comate 智能编码助手：编程新伙伴，效率新飞跃
AI时代：人工智能大模型引领科技创造新时代
百篇博客 · 千里之行
开源王者！全球最强的开源大模型Llama3发布！15万亿数据集训练，最高4000亿参数，数学评测超过GPT-4，全球第二！
为欧拉系统安装可视化界面(deepin）
MobaXterm中文版（MobaXterm-Chinese-Simplified）安装和使用
JS 网页全自动翻译 v3.4 发布，开放对 html 文件的翻译能力
这是Linus最忍不了的一集——虚幻引擎代码规范禁止使用脏话、禁止slave、master
与 Apollo 共创生态：观看7周年大会的心路历程
与 Apollo 共创生态：Apollo7周年大会的心得体会，干货满满
国内各种免费AI聊天机器人(ChatGPT)推荐(上)
周排行
php 截取字符串长度 并 把超出规定长度的内容用...替代
生成3x3矩阵（2）：FIFO法的分析和改进
PyTorch Hub发布！一行代码调用所有模型：torch.hub
Unity中添加不规则图片按钮，只有在点击到图片后才触发点击效果
AI - TensorFlow - 示例01：基本分类
Andy's First Dictionary（UVA - 10815 ）集合set
IOS下Nil & nil & NULL 区别
swift 封装按钮倒计时
C. Maximum Median 二分
LSTM神经网络输入输出究竟是怎样的？
每日归档
更多
2024-05-26(6)
2024-05-25(68)
2024-05-24(65)
2024-05-23(9)
2024-05-22(41)
2024-05-21(8)
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022