flex justify-content

space-evenly 等间距展示 --- 阮一峰的无此属性解释

<!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>
</head>
<style>
    *{
        margin:0px;
        padding:0px;
    }

    .con{
        width:100%;
        height:300px;
        display:flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .con a{
        display:block;
    }

    /* .con a:nth-of-type(1){
        margin-right:60px;
    } */

    .one{
        height:300px;
        background-color:aqua;
    }

    .two{
        height:300px;
        background-color:red;
    }

    .three{
        height:300px;
        background-color:blue;
    }

</style>
<body>
    

    <div class="con">
        <a class="one" href="#">aaa</a>
        <a class="two" href="#">bbb</a>
        <a class="three" href="#">cdddddddddddcc</a>
    </div>


</body>
</html>

center 在中间展示，中间无间隔----阮一峰的文档有误

<!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>
</head>
<style>
    *{
        margin:0px;
        padding:0px;
    }

    .con{
        width:100%;
        height:300px;
        display:flex;
        flex-direction: row;
        justify-content: center;
    }

    .con a{
        display:block;
    }

    /* .con a:nth-of-type(1){
        margin-right:60px;
    } */

    .one{
        height:300px;
        background-color:aqua;
    }

    .two{
        height:300px;
        background-color:red;
    }

    .three{
        height:300px;
        background-color:blue;
    }

</style>
<body>
    

    <div class="con">
        <a class="one" href="#">aaa</a>
        <a class="two" href="#">bbb</a>
        <a class="three" href="#">cdddddddddddcc</a>
    </div>


</body>
</html>

posted @ 2022-07-14 15:48  盘思动  阅读(32)  评论(0)    收藏  举报