弹性布局----子级属性

最新推荐文章于 2022-09-14 19:56:13 发布

十八般变化

最新推荐文章于 2022-09-14 19:56:13 发布

阅读量468

点赞数 1

本文链接：https://blog.csdn.net/m0_55785131/article/details/118435355

版权

1.常用子级属性

1.1 flex属性用于定义项目分配剩余空间，flex用来表示占据的份数。

语法： .item{

flex:<number>；/默认值为零

}

例：

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
    .flex{
        margin: 100px 100px;
        width: 400px;
        height: 100px;
        background-color: white;
        border: 1px solid black;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .flex li{
        width: 60px;
        height: 60px;
        border: 1px solid black;
        background-color: rgb(49, 226, 13);
    }
    .two{
        flex: 0.9;
       
    }
    </style>
</head>
<body>
    <div class="flex">
        <li class="neo"></li>
        <li class="two"></li>
        <li class="four"></li>
    </div>

2.align-self控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目（子元素）与其他项目有不一样的对齐方式，可以覆盖掉父级属性中的align-items属性。align-self 的默认值为 auto 表示继承了父元素的 align-items 属性。如果没有父级元素，则相当于 stretch. align-self 的相关属性与align-items 相同

例：

 <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
   .flex{
       width: 400px;
       height: 300px;
       margin: 100px 100px ;
       display: flex;
       border: 1px solid black;
       flex-direction: row;
       align-items: flex-start;
   }
   .neo{
       width: 100px;
       height: 50px;
       background-color: blue;
       font-size: 36px;
   }
   .two{
       width: 100px;
       height: 50px;
       background-color: rgb(255, 166, 0);
       font-size: 36px;
   }
   .four{
       width: 100px;
       height: 50px;
       background-color: cadetblue;
       font-size: 36px;
       align-self: flex-end;
   }
    </style>
</head>
<body>
    <div class="flex">
        <li class="neo">1</li>
        <li class="two">2</li>
        <li class="four">3</li>
    </div>
</body>

3.order属性定义项目的排列顺序，且 order 的值必须是数字，默认值 0.

order 属性的值越小项目排列越靠前，与 z-index是不相同的。

.four{
       width: 100px;
       height: 50px;
       background-color: cadetblue;
       font-size: 36px;
       order: -1;
   }

在弹性布局中的子级属性肯定不止以上的几种属性，但是以上的属性是在开发中最常用的。如果你还想了解子级元素其他相关属性可访问https://www.w3school.com.cn/css/css3_flexbox.asp 查看更多属性。

十八般变化

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性布局----子级属性

1.常用子级属性1.1 flex属性用于定义项目分配剩余空间，flex用来表示占据的份数。语法： .item{ flex:<number>；/默认值为零 }例：<style> *{ margin: 0; padding: 0; list-style: none; } ...
复制链接

扫一扫