css3 flex弹性盒子布局简单使用-526互联

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./csses/mycss.css">
</head>

<body>
    <!-- <div class="mydiv">wwwwqqq</div> -->
    <div class="flexcontent">
        <div class="flexitem">1justify-content: center</div>
        <div class="flexitem">2justify-content: center</div>
        <div class="flexitem">3justify-content: center</div>
        <div class="flexitem">4justify-content: center</div>
    </div>
    <div class="flexcontent2">
        <div class="flexitem2">1justify-content: space-between</div>
        <div class="flexitem2">2justify-content: space-between</div>
        <div class="flexitem2">3justify-content: space-between</div>
        <div class="flexitem2">4justify-content: space-between</div>
    </div>
    <div class="flexcontent3">
        <div class="flexitem3">1justify-content: space-around</div>
        <div class="flexitem3">2justify-content: space-around</div>
        <div class="flexitem3">3justify-content: space-around</div>
        <div class="flexitem3">4justify-content: space-around</div>
    </div>
    <div class="flexcontent4">
        <div class="flexitem4">1justify-content: space-evenly</div>
        <div class="flexitem4">2justify-content: space-evenly</div>
        <div class="flexitem4">3justify-content: space-evenly</div>
        <div class="flexitem4">4justify-content: space-evenly</div>
    </div>
</body>

</html>

.flexcontent{
    margin-top: 10px;
    display: flex;
    width: 1000px;
    height: 120px;
    border: 1px solid rebeccapurple;
    justify-content: center;
    /* direction: rtl; */
    /* direction:ltr; rtl; 排列開始從左到右還是從右到左側*/
}
.flexcontent2{
    margin-top: 10px;
    display: flex;
    width: 1000px;
    height: 120px;
    border: 1px solid rgb(44, 143, 46);
    justify-content:space-between
   
}
.flexcontent3{
    margin-top: 10px;
    display: flex;
    width: 1000px;
    height: 120px;
    border: 1px solid rgb(143, 84, 44);
    justify-content:space-around
  
}
.flexcontent4{
    margin-top: 10px;
    display: flex;
    width: 1000px;
    height: 120px;
    border: 1px solid rgb(75, 44, 143);
    justify-content:space-evenly
}
.flexitem{
    width: 120px;
    height: 80px;
    border: 1px solid rgb(127, 153, 51);
    margin: 10px;
    background-color: bisque;
    text-align: center;
}
.flexitem2{
    width: 120px;
    height: 80px;
    border: 1px solid rgb(127, 153, 51);
    margin: 10px;
    background-color: rgb(167, 165, 162);
    text-align: center;
}
.flexitem3{
    width: 120px;
    height: 80px;
    border: 1px solid rgb(127, 153, 51);
    margin: 10px;
    background-color: rgb(121, 139, 120);
    text-align: center;
}
.flexitem4{
    width: 120px;
    height: 80px;
    border: 1px solid rgb(127, 153, 51);
    margin: 10px;
    background-color: rgb(102, 189, 150);
    text-align: center;
}

盒子