HTML与CSS学习第13天

HTML学习第13天

在这里插入图片描述

目录

1. flex布局

1.1 改变元素排列方向

  • 主轴默认是水平方向，侧轴默认是垂直方向

  • 修改主轴方向属性：flex-direction

  • 属性值

    属性值作用
    row行，水平（默认值）
    column列，垂直
    row-reverse行，从右到左
    column-resverse列，从下到上

1.2 弹性盒子显示特点

  • 默认情况下，弹性盒子沿主轴方向依次排列，不换行，当总的盒子的宽度之和大于父盒子时，子盒子会被压缩（每个子盒子的宽度变小），仍然不换行

示例

<!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>
        .bigbox{
            /* flex容器 */
            display: flex;
            background-color: pink;
            height: 400px;
        }
 
        .bigbox div{
            width: 100px;
            height: 40px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

1.3 弹性盒子的换行

  • 属性名：flex-wrap（添加给弹性容器）

  • 属性值

    属性值作用
    no-wrap（默认值）不换行
    wrap超过父盒子宽度时换行

示例

<!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>
        .bigbox{
            /* flex容器 */
            display: flex;
            /* 换行 */
            flex-wrap: wrap;
            align-content: space-between;
            background-color: pink;
            height: 400px;
        }
 
        .bigbox div{
            width: 100px;
            height: 40px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

1.4 换行后行与行之间的对齐方式

  • 属性名：align-content

  • 属性值：

    属性值作用
    flex-start默认值，起点开始依次排序
    flex-end终点开始依次排序
    center沿主轴居中排列
    space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 ，每个盒子两侧都有间距，会出现两个盒子之间的间距为盒子与容器之间间距的两倍
    space-between弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间

案例中的问题：省略显示过长的文字

  • 文字过长时，省略表示

示例

<!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>
        /* 清除默认边距 */
        *{
            margin: 0;
            padding: 0;
        }
 
        .left{
            /* flex容器 */
            display: flex;
            width: 200px;
            background-color: pink;
        }
 
        /* 多余文字省略 */
        .left .txt{
            /* 除图片外的剩余部分给txt */
            flex: 1;
            /* 弹性盒子情况下,父级宽度为0，flex剩余部分 */
            width: 0;
        }
 
        /* 子级情况下 */
        .txt h5{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
 
        /* 多余文字省略 */
        
 
        .pic img{
            width: 107px;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="left">
            <div class="pic">
                <a href="#"><img src="./images/media.png" alt=""></a>
            </div>
            <div class="txt">
                <h5>我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼我是大傻逼</h5>
                <p>我是大傻逼</p>
            </div>
        </div>
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

posted @   凌歆  阅读(28)  评论(0)  编辑  收藏  举报
相关博文：
· HTML与CSS学习第12天
· HTML与CSS学习第7天
· 弹性盒子（display:flex）
· 弹性盒子（display:flex）
· No.2.4
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示