CSS核心(五十七)弹性布局flex弹性盒子子元素之间的对齐以及整体位置 align-items

[复制链接]
查看: 1554|回复: 31
发表于 2023-2-2 11:53:16 | 显示全部楼层 | 阅读模式
在上两节课中,我们讲的都是弹性盒子内部的子盒子宽高一致的情况,那么,如果子盒子的宽高不一致将如何对齐呢?
答案是:当子盒子的宽高不一致时,如果不设置align-items属性,当纵向排列时,所有子盒子都向是左边对齐,当横向排列时,所有子盒子都是顶边对齐。

CSS核心(五十七)弹性布局flex弹性盒子子元素之间的对齐以及整体位置 align-items CSS核心(五十七)弹性布局flex弹性盒子子元素之间的对齐以及整体位置 align-items

使用align-items属性后

CSS核心(五十七)弹性布局flex弹性盒子子元素之间的对齐以及整体位置 align-items CSS核心(五十七)弹性布局flex弹性盒子子元素之间的对齐以及整体位置 align-items

align-items设置的是子元素之间的对齐方式,既适用于单行也适用于多行(一般都是将多行分组为单行来控制),既适用于横向排列也使用与纵向排列。
当弹性盒子内部的子盒子没有设置宽高时,使用align-items:stretch;会自动拉伸以适配盒子的宽度或高度,如果子盒子设置了宽高则保持子盒子原有宽高。

stretch是align-items属性的默认值。

排列方式flex-direction、对齐方式justify-content、align-content和align-items都是设置在父盒子上的。

实际应用时,我们应该先设置flex-direction排列方式,如果内部的子元素是单行或单列的,就使用justify-content设置对齐方式,如果内部的子元素是多行的,就使用align-content设置对齐方式,然后再用align-items属性设置所有子盒子在父盒子中的位置(居上、居下、居中、拉伸填充)。

下面通过图片来描述:

CSS核心(五十七)弹性布局flex弹性盒子子元素之间的对齐以及整体位置 align-items

CSS核心(五十七)弹性布局flex弹性盒子子元素之间的对齐以及整体位置 align-items

代码如下,大家可自行逐行测试理解:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局flex弹性盒子子元素之间的对齐以及整体位置 align-items</title>
</head>
<style>
        .box{
                width:600px;
                height:400px;
                border:1px solid #000;
                /* 设置弹性容器 */
                display:flex;
                flex-direction:row;
                
                /* 顶部对齐 */
                /* align-items:flex-start; */
                
                /* 底部对齐 */
                /* align-items:flex-end; */

                /* 元素被拉伸以适应容器(默认) */
                /* align-items:stretch; */
                
                /* 中心聚合对齐 */
                /* align-items:center; */
                
                /* 元素位于容器的基线上 */
                /* align-items:baseline; */

        }
        .d1{
                width:110px;
                height:80px;
                border:        5px solid #55aa00;
                font-size: 12px;
        }
        .d2{
                width:120px;
                height:100px;
                border:        5px solid #aa557f;
                font-size: 15px;
        }
        .d3{
                width:130px;
                height:120px;
                border:        5px solid #0000ff;
                font-size: 18px;
        }
        .d4{
                width:110px;
                height:80px;
                border:        5px solid #55aa00;
                font-size: 12px;
        }
        .d5{
                width:120px;
                height:100px;
                border:        5px solid #aa557f;
                font-size: 15px;
        }
        .d6{
                width:130px;
                height:120px;
                border:        5px solid #0000ff;
                font-size: 12px;
        }
</style>
<body>
<div class="box">
        <div class="d1">第一个盒子</div>
        <div class="d2">第二个盒子</div>
        <div class="d3">第三个盒子</div>
        <div class="d4">第四个盒子</div>
        <div class="d5">第五个盒子</div>
        <div class="d6">第六个盒子</div>
</div>
</body>
</html>




易博软件介绍

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-2-20 13:42:34 | 显示全部楼层
很有感触!学计算机的没有几个真正懂得,起码我周围的人学了跟没学一样,除了会上网聊天还是聊天,用我爸爸常挂在嘴边说的话就是"现在的学生那像读书啊,简直在混日子."
发表于 2023-2-28 16:54:02 | 显示全部楼层
感想很多,很受用,谢谢楼主!

0

主题

24

帖子

13

积分

营销入门

Rank: 2

积分
13
发表于 2023-3-7 01:37:04 | 显示全部楼层
我很佩服你的才能啊!我不知道什么时候才能到你那种级别,佩服佩服

0

主题

11

帖子

6

积分

营销入门

Rank: 2

积分
6
发表于 2023-3-12 20:31:51 | 显示全部楼层
是观念的原因。考研,考级。过多的看到钱就会掉到钱眼里。看不到会有好的程序。钱可以成就一个人,也可以毁掉一个人

0

主题

20

帖子

11

积分

营销入门

Rank: 2

积分
11
发表于 2023-3-18 14:32:54 | 显示全部楼层
学海无崖苦做舟,努力,努力,再努力!

0

主题

9

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-3-23 21:21:35 | 显示全部楼层
很好啊!我觉得自己太差太差了!

0

主题

230

帖子

115

积分

营销菜鸟

Rank: 3Rank: 3

积分
115
发表于 2023-3-28 02:01:33 | 显示全部楼层
我所说的姐姐是指月无边得罪了!不过你确实太不认真看了

0

主题

9

帖子

5

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
5
发表于 2023-3-31 03:39:21 | 显示全部楼层
顶顶

0

主题

11

帖子

6

积分

营销入门

Rank: 2

积分
6
发表于 2023-4-4 04:36:22 | 显示全部楼层
感触很深·!!!!!!!!!!!!!@@@@@@@ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表