为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第17天...

【九月打卡】第17天 初识HTML(5)+CSS(3)-升级版 第14章

2022.09.22 18:09 23浏览

课程名称:初识HTML(5)+CSS(3)-升级版

章节名称:第14章 flex弹性盒模型

讲师姓名:五月的夏天

课程内容:

弹性盒模型之flex属性

使用justify-content属性设置横轴排列方式

使用align-items属性设置纵轴排列方式

给子元素设置flex占比

课程收获:

1.弹性盒模型之flex属性:

(1)设置display: flex属性可以把块级元素在一排显示;

(2)flex需要添加在父元素上,改变子元素的排列顺序;

(3)默认为从左往右依次排列,且和父元素左边没有间隙。

2.使用justify-content属性设置横轴排列方式:

(1)justify-content属性定义了项目在主轴上的对齐方式。属性值分别为:

justify-content: flex-start | flex-end | center | space-between | space-around;

3.使用align-items属性设置纵轴排列方式:

(1)align-items属性定义了项目在交叉轴上的对齐方式。属性值分别为:

align-items: flex-start | flex-end | center | baseline | stretch;

4.给子元素设置flex占比:

(1)给子元素设置flex属性,可以设置子元素相对于父元素的占比;

(2)flex属性的值只能是正整数,表示占比多少;

(3)给子元素设置了flex之后,其宽度属性会失效。

(4)代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex占比</title>
    <style type="text/css">
    .box {
        height: 300px;
        background: blue;
        display: flex;
    }

    .box div {
        width: 200px;
        height: 200px;
    }

    .box1 {
        flex: 1;
        background: red;
    }

    .box2 {
        flex: 3;
        background: orange;
    }

    .box3 {
        flex: 2;
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">flex:1</div>
        <div class="box2">flex:3</div>
        <div class="box3">flex:2</div>
    </div>
</body>

</html>

效果:

https://img1.sycdn.imooc.com/632c3215000101d617940316.jpg

每天学习一点点,加油!!

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
1
获赞与收藏
8

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消