CSS核心(五十八)弹性布局flex弹性盒子针对指定子元素的对齐方式 align-self

[复制链接]
查看: 1157|回复: 31
发表于 2023-2-2 12:20:19 | 显示全部楼层 | 阅读模式
通过前面三节的讲解,我们深入分析了弹性盒子的三种对齐,justify-content、align-content和align-items,这三种对齐方式都是写在父盒子上来统一控制子盒子的。

那么有没有一种可以独立控制弹性盒子内部每一个子盒子的方法呢?下面我们就来看align-self属性,请记住:它是写到子盒子的CSS属性中的。

下面看代码:
一、横向对齐

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局flex弹性盒子针对指定子元素的对齐方式 align-self</title>
</head>
<style>
        .box{
                width:600px;
                height:400px;
                border:1px solid #000;
                /* 设置弹性容器 */
                display:flex;
                flex-direction:row;

        }
        .d1{
                width:110px;
                height:80px;
                border:        5px solid #55aa00;
                font-size: 12px;
                align-self:flex-start;
        }
        .d2{
                width:120px;
                height:100px;
                border:        5px solid #aa557f;
                font-size: 15px;
                align-self:flex-end;
        }
        .d3{
                width:130px;
                height:120px;
                border:        5px solid #0000ff;
                font-size: 18px;
                align-self:center;
        }
        .d4{
                /* width:110px;
                height:80px; */
                border:        5px solid #55aa00;
                font-size: 12px;
                align-self:stretch;
        }
</style>
<body>
<div class="box">
        <div class="d1">第一个盒子<br>flex-start</div>
        <div class="d2">第二个盒子<br>flex-end</div>
        <div class="d3">第三个盒子<br>center</div>
        <div class="d4">第四个盒子<br>不设置宽高的stretch<br>如果设置了宽高,与flex-start一样</div>
</div>
</body>
</html>


显示结果如下:

CSS核心(五十八)弹性布局flex弹性盒子针对指定子元素的对齐方式 align-self

二、纵向对齐

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹性布局flex弹性盒子针对指定子元素的对齐方式 align-self</title>
</head>
<style>
        .box{
                width:600px;
                height:400px;
                border:1px solid #000;
                /* 设置弹性容器 */
                display:flex;
                flex-direction:column;

        }
        .d1{
                width:110px;
                height:80px;
                border:        5px solid #55aa00;
                font-size: 12px;
                align-self:flex-start;
        }
        .d2{
                width:120px;
                height:100px;
                border:        5px solid #aa557f;
                font-size: 15px;
                align-self:flex-end;
        }
        .d3{
                width:130px;
                height:120px;
                border:        5px solid #0000ff;
                font-size: 18px;
                align-self:center;
        }
        .d4{
                /* width:110px;
                height:80px; */
                border:        5px solid #55aa00;
                font-size: 12px;
                align-self:stretch;
        }
</style>
<body>
<div class="box">
        <div class="d1">第一个盒子<br>flex-start</div>
        <div class="d2">第二个盒子<br>flex-end</div>
        <div class="d3">第三个盒子<br>center</div>
        <div class="d4">第四个盒子<br>不设置宽高的stretch<br>如果设置了宽高,与flex-start一样</div>
</div>
</body>
</html>


CSS核心(五十八)弹性布局flex弹性盒子针对指定子元素的对齐方式 align-self

易博软件介绍

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-2-20 13:42:34 | 显示全部楼层
很感谢楼主的分享,都是很有意义经验  

0

主题

6

帖子

3

积分

营销入门

Rank: 2

积分
3
发表于 2023-2-27 05:49:04 | 显示全部楼层
初到论坛,发第一贴,很有启发

0

主题

9

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-3-4 15:13:56 | 显示全部楼层
^好

0

主题

25

帖子

14

积分

营销入门

Rank: 2

积分
14
发表于 2023-3-12 10:29:23 | 显示全部楼层
感谢楼主的肺腑之言
发表于 2023-3-18 11:31:57 | 显示全部楼层
读了你的观点  我很受用,也很感激,你说出了我们都存在,但都  又没有太重视的问题,我想,它将伴随着我以后的  学习和工作.    高手!!!

0

主题

21

帖子

11

积分

营销入门

Rank: 2

积分
11
发表于 2023-3-24 11:25:28 | 显示全部楼层
受用

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-28 11:05:16 | 显示全部楼层
说得好,学计算机学的不仅仅是计算机,好的数学基础也是必不可少的

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-3-31 10:48:03 | 显示全部楼层
人家的经验教训  就是我们的宝贵财富  志当存高远  给自己提高要求  就当是为了自己

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-4-3 23:30:58 | 显示全部楼层
peifu
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

返回顶部 返回列表