flex-basis

最新推荐文章于 2022-10-06 00:33:52 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2022-10-06 00:33:52 发布

阅读量817

点赞数

分类专栏： css系列（精通精通）

本文链接：https://blog.csdn.net/qq_37805832/article/details/108742999

版权

css系列（精通精通）专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>131-伸缩布局</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
        width: 600px;
        height: 600px;
        border: 1px solid #000;
        margin: 100px auto;
        display: flex;
    }
    ul>li{
        /*width: 100px;*/
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 30px;
        background: red;
    }
    ul>li:nth-child(1){
        /*
        1.在伸缩布局中可以通过flex-basis属性设置伸缩项的宽度
        注意点: flex-basis 只有在伸缩布局中才有效
        2.在伸缩布局中如果通过flex-basis设置了宽度, 那么再通过width设置宽度就会无效
        也就是说flex-basis的优先级要高于width的优先级
        3.在伸缩布局中如果同时通过flex-basis和width设置了宽度, 而且一个设置的是auto,一个设置的是具体的值, 那么会按照具体的值来显示
        */

        /*flex-basis: 100px;*/
        /*width: 200px;*/
        /*width: auto;*/

        /*width: 200px;*/
        /*flex-basis: auto;*/

        flex-basis: auto;
        width: 600px;
    }
    ul>li:nth-child(2){
        background: green;
    }
    ul>li:nth-child(3){
        background: blue;
    }
</style>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

贵哥的编程之路(热爱分享)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
flex-basis

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>131-伸缩布局</title></head><style> *{ margin: 0; padding: 0; } ul{ list-style: none; wid
复制链接

扫一扫