flex布局的align-content属性

已于 2022-09-02 19:41:28 修改
阅读量1.9k 收藏 4
点赞数 1
文章标签： css html css3
于 2020-11-06 15:17:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianflower/article/details/109532309
版权

参考：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
align-content用来设置多根轴线的对齐方式，多根轴线指的就是多行，如果只有一根轴线，则该属性不起作用，如果父容器没有设置高度，则该属性不起作用

lesson1：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局的align-content属性_lesson1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
        }
        .box {
            width: 100px;
            height: 100px;
            border: red solid 1px;
        }
        #box1 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: flex-start;
        }
        #box2 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: flex-end;
        }
        #box3 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: center;
        }
        #box4 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: space-between;
        }
        #box5 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: space-around;
        }
        #box6 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: space-evenly;
        }
        #box7 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: stretch;/*当前子容器item设置了相同的高度，所以会在每行容器下留有相同大小的空间*/
        }
        .item {
            width: 33%;
            height: 33%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: green solid 1px;
        }
        .em {
            width: 80%;
            height: 80%;
            background-color: green;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="box1" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box2" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box3" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box4" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box5" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box6" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box7" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
</body>
</html>

lesson2：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局的align-content属性_lesson2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
        }
        .box {
            width: 100px;
            height: 100px;
            border: red solid 1px;
        }
        #box1 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-start;
        }
        #box2 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-end;
        }
        #box3 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
        }
        #box4 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: space-between;
        }
        #box5 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: space-around;
        }
        #box6 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: space-evenly;
        }
        #box7 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: stretch;/*当前子容器item设置了相同的高度，所以会在每行容器下留有相同大小的空间*/
        }
        .item {
            width: 33%;
            height: 33%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: green solid 1px;
        }
        .em {
            width: 80%;
            height: 80%;
            background-color: green;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="box1" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box2" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box3" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box4" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box5" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box6" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box7" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
</body>
</html>

lesson3：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局的align-content属性_lesson3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
        }
        .box {
            width: 100px;
            height: 100px;
            border: red solid 1px;
        }
        #box1 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-content: flex-start;
        }
        #box2 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-content: flex-end;
        }
        #box3 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-content: center;
        }
        #box4 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-content: space-between;
        }
        #box5 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-content: space-around;
        }
        #box6 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-content: space-evenly;
        }
        #box7 {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-content: stretch;/*当前子容器item设置了相同的高度，所以会在每行容器下留有相同大小的空间*/
        }
        .item {
            width: 33%;
            height: 33%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: green solid 1px;
        }
        .em {
            width: 80%;
            height: 80%;
            background-color: green;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="box1" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box2" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box3" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box4" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box5" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box6" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
<div id="box7" class="box">
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
    <div class="item">
        <div class="em"></div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            display: flex;
            height: 500px;
            border: red solid 1px;
            flex-wrap: wrap;
            align-content: stretch;/*当前子容器没有设置高度，所以两行子容器会均匀拉伸，直到铺满父容器的高度*/
        }
        .item {
            padding: 20px;
            border: green solid 1px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 当子容器的高度不相同时，如果此时设置了align-content: stretch;
            则会进行拉伸直到铺满父容器的高度，但此处的拉伸是先进行均匀拉伸，
                然后在拉伸的基础上，再加上每行子容器中最大的高度值 */
        .parent {
            display: flex;
            border: red solid 1px;
            flex-wrap: wrap;
            align-content: stretch;
            height: 500px;
        }
        .item {
            padding: 20px;
            border: green solid 1px;
        }
        .item2 {
            height: 50px;
        }
        .item9 {
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="item">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item item9">item9</div>
    </div>
</body>
</html>

在这里插入图片描述

lianflower
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex布局——align-content
chtazycdf的博客
04-08 419
如果项目只有一根轴线，该属性不起作用。align-content属性定义了。
CSS3 弹性盒子——flex、align-items、align-content属性详解
Gorden的博客
07-05 2353
在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。flex 主要由两个轴来控制布局，如下图所示。上图说明如下：main axis 是主轴，该轴的开始为 main start，结束为 main end。cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。flex item 是 flex 容器中的元素。
css flex布局 —— 容器属性 align-content
且听风吟的博客
10-11 2985
css flex布局 —— 容器属性 align-content
Flex布局常见父项属性（三）- align-items, align-content和flex-flow
热门推荐
JHY97的博客
01-06 2万+
1.align-items用于设置侧轴上的子元素排列方式（单行） 该属性用于控制子元素在侧轴（默认为y轴）上的排列方式，在子元素为单项时使用 1.1属性值 属性值 说明 flex-start 从上到下；默认值 flex-end 从下到上 center 垂直居中 stretch 拉伸 1.2案例 1.设置align-items属性值：center 为了能够更好区别，先设置主轴（x轴）居中，再设置侧轴（y轴）居中 /* 父级
flex布局中的align-content属性
AEtfsdfg的博客
07-01 83
align-content属性
深入理解css中的align-content属性
09-24
在实际应用中，结合flex-direction、flex-wrap和其他Flexbox属性，align-content提供了强大的布局控制能力，让开发者能够轻松创建复杂且灵活的网页布局。因此，深入理解和熟练掌握align-content属性对于提升CSS布局...
flex布局换行空白间隙之align-content的使用
11-20
本篇文章主要关注的是如何通过`align-content`属性解决Flex布局在换行时产生的空白间隙问题。 在描述的示例中，我们有一个`.nav-right`的父元素，设置了宽度、内边距以及`display: flex`，使其成为一个Flex容器。...
flex布局-flex-layout-master.zip
01-03
5. **Flex容器属性**：用于控制整个Flex布局的行为： - `flex-direction`：定义主轴的方向（默认是`row`，可设置为`row-reverse`, `column`, `column-reverse`）。 - `flex-wrap`：控制是否允许Flex项换行（默认是...
css3 flex布局 justify-content:space-between 最后一行左对齐
11-21
在CSS3的Flex布局中，`justify-content: space-between`是一种常见的水平分配方式，它将元素之间的空白均匀分布，首尾元素紧贴容器边界。然而，当你试图通过`justify-self: start`使最后一行的元素左对齐时，你会...
Flex 布局速查手册-阮一峰
01-25
flex 布局有六个属性可以设置在容器上：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。 1. flex-direction 属性决定主轴的方向（即项目的排列方向）。它可能有四个值：row...
flex弹性布局教程-12容器属性align-content
晴空闲云
09-27 1392
本篇介绍了容器属性align-content的姿势，先介绍了知识点，后面和align-items进行了对比。 阅读时间大约15~20分钟。
flex中align-content属性
weixin_33695450的博客
06-05 236
在flex弹性盒模型中align-content属性控制容器内多行在交叉轴上的排列方式 默认值：stretch 可用值： 属性值：flex-start 属性值：flex-end 属性值：center 属性值：stretch (默认值) 属性值：space-between 属性值：space-around 下面用具体案例代码案例来详细说明。 HTML代码以及相应的CSS代码： ...
解决弹性布局父元素设置高自动换行，子元素均分高度问题（align-content: flex-start）
最新发布
空&白的博客
02-21 851
align-content: flex-start
flex布局中的 align-items 与 align-content
polar_night_down的博客
02-13 1万+
定义 align-items : 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 center：元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 align-items:center align-content：会设置自由盒内部所有行作为一个整体在垂直方向排列方式。针对多行作为一个整体在纵轴上的排列方式，该属性对单行无效。 center：元素位于容器的中心。 各行向弹性盒容器的中间位置
flex布局flex取值以及align-self、align-content、align-items的区别
loisandyu的博客
03-04 7056
flex是 flex-grow， flex-shrink，flex-basis 的缩写 flex取值 flex-grow flex-shrink flex-basis 默认值 0 1 auto none 0 0 auto auto 1 1 auto 非负数字（例如flex:1） 非负数字（1） 1 0% 长度或百分比（flex:1px或flex:10%） 1 1 长...
【Angular实战/网易云】轮播图
qq_43338695的博客
08-21 979
一. 选择正确的组件库 选用正确的组件库能让你的开发事半功倍，material里面是没有carousel的，所以我选择ng-zorro。 ng-zorro中的nz-carousel已经非常好了，但是我这里还是选择封装一下。 二. 封装nz-carousel 我主要是想给原来的轮播图加上左（<）右（>）两个按钮，同时切换的dot也得变一下。 我们可以写一个新的组件，使用这个组件的时候把<nz-carousel>嵌套在内部，在实现这个组件的时候，使用<ng-cont.
align-content、align-items、justify-content属性
微生
02-28 1006
1.align-content属性 作用：设置同一列子元素在Y轴的对齐方 flex-start 排列在当前列的最上方 flex-end 排列在当前列的最下方 center 排列在当前列的中间位置 space-between 间距相等排列，上下不留白 space-around 间距相等排列，上下留白等于间距的一半 2.align-items属性 作用：设置同一行子元素在Y轴的对齐方 flex-start 排列在当前行的最上方 flex-end 排列在当前行的最下 center 排列在当前行
flex布局的align-items与align-content
qq_44849271的博客
10-09 1404
该文章主要描述的是align-content，并且与align-items的区别
flex 布局 align-items不生效
09-05
你好！关于 flex 布局中 align-items 属性不生效的问题，有几个可能的原因和解决方法可以尝试： 1. 确保在设置 align-items 属性之前，已经设置了 display: flex; 或者 display: inline-flex;。这是使用 flex 布局的前提条件。 2. 检查是否在正确的容器元素上应用了 align-items 属性。align-items 是应用于容器元素（父元素），用于控制其子元素在交叉轴上的对齐方式。 3. 确认是否有其他 CSS 规则覆盖了 align-items 属性。可以通过检查其他样式规则或使用开发者工具来排查。 4. 检查容器元素的高度是否足够以支持 align-items 属性的生效。如果容器元素没有明确设置高度，它会根据内容自动伸缩，可能会导致 align-items 属性无法生效。 5. 尝试使用 align-content 属性替代 align-items。align-content 也可以用于控制子元素在交叉轴上的对齐方式，但它与容器元素的高度设置有关。 希望以上解决方法对您有帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值