31.1flex_弹性盒(弹性容器，弹性元素)——H5C3

最新推荐文章于 2024-06-11 22:02:21 发布

StudiousTiger

最新推荐文章于 2024-06-11 22:02:21 发布

阅读量139

点赞数

文章标签： css html css3 html5

本文链接：https://blog.csdn.net/m0_45067620/article/details/107827671

版权

Tiger の HTML&CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 
        flex （弹性盒，伸缩盒）  （建议：能用flex，就用flex）（PC端可能不是兼容的和全面，有的老版本的浏览器并不支持。移动端完全支持）
            -是css中有一种布局手段，他主要用来代替浮动来完成页面的布局
            -flex可以使元素具有弹性，可以使元素随着网页的大小变化而变化
            -弹性容器
                -我们要使用弹性盒，必须先将一个元素设置为他行容器
                -我们使用display 来设置弹性容器
                    display：flex          设为块级（会独占一行）的弹性容器
                    display：inline-flex   设置为行内(不会独占一行)的弹性容器
            -弹性元素
                -弹性容器的子元素（不包括后代元素）为弹性元素（弹性项）
                -一个元素可以同时是弹性容器和弹性元素（既给弹性元素设置弹性容器）
     */
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .a{
            width: 800px;
            border: 10px red solid;
            /* 设置弹性容器 */
            display: flex;

            /* flex-direction 指定弹性容器中弹性元素的排列方式
                 可选值：
                    row             默认值，弹性元素在容器中水平排列（左->右）
                                        -主轴：自左向右
                    row-reverse     reverse（相反），弹性元素在容器中水平排列（右->左）
                                        -主轴：自左向右
                    column          弹性元素在容器中垂直排列（上->下）
                                        -主轴：自上向下
                    column-reverse  弹性元素在容器中垂直排列（下->上）
                                        -主轴：自下向上
                
                主轴：
                    弹性元素排列方向称为主轴
                侧轴：
                    与主轴垂直方向的称为侧轴
            */
            flex-direction: row;
        }
        .a li{
            width: 100px;
            height: 100px;
            background-color: #bbffcc;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 
             弹性元素的一个属性
                flex-grow 指定单行元素的伸展系数
                    - 用于指定当父元素有多余的空间时，子元素如何伸展
                    -父元素的剩余空间会按照比例进行分配
                    默认值： 0   表示不伸展

                flex-shrink 指定弹性元素收缩的系数
                    -当父元素中的空间不足以容纳子元素，如何对子元素进行收缩
                    默认值： 1   表示等比例收缩

            */
            /* 设置伸展系数 */
            flex-grow: 1;
        }
        .a li:nth-child(2){
            background-color: pink;
            flex-grow: 2;
        }
        .a li:nth-child(3){
            background-color: orange;
            flex-grow: 3;
        }

        .b{
            width: 800px;
            border: 10px red solid;
            margin-top: 30px;
            /* 设置弹性容器 */
            display: flex;
            flex-direction: row;
        }
        .b li{
            /* 理论上会溢出，但是因为flex-shrink 的默认值为1  弹性元素会等比例收缩*/
            width: 400px;
            height: 100px;
            background-color: #bbffcc;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 设置收缩系数 */
            flex-shrink: 1;
        }
        .b li:nth-child(2){
            background-color: pink;
            flex-shrink: 2;
        }
        .b li:nth-child(3){
            background-color: orange;
            flex-shrink: 3;
        }
    </style>
</head>
<body>  
     <ul class="a">
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
     <ul class="b">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

StudiousTiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
31.1flex_弹性盒(弹性容器，弹性元素)——H5C3

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* flex （弹性盒，
复制链接

扫一扫