前端工程日記２8日 Flex 並排選單

換行 f flex wrap

九四帥 2021-05-25 21:24:02 ‧ 1184 瀏覽

分享至

練習六張圖，三張一行用css的 flex-wrap: wrap;換行

<!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>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrap">
        <div class="left">
            <img src="https://i.imgur.com/O1TpNpL.png" alt="logo">
            <ul class="menu">
                <li><a href="#"></a>回到首頁</li>
                <li><a href="#"></a>關於我們</li>
                <li><a href="#"></a>熱銷產品</li>
                <li><a href="#"></a>購物車</li>
            </ul>
        </div>
        <div class="right">
            <h2>關於我們</h2>
            <p>Lorem ipsum dolor sit amet consectetur adip
                isicing elit. Minus vero architecto explicabo suscipit officiis
                 fugit qui perferendis. Amet repellat similique, ex deserunt saepe
                  dolor ipsum. Consectetur id dicta, odit vitae omnis repellendus 
                  nobis maxime facilis nulla facere, possimus al
                  ias.</p>
          <p>lorem            dolor ipsum. Consectetur id dicta, odit vitae omnis repellendus 
                  nobis maxime facilis nulla facere, possimus al
                  ias </p>
            <div class="rightbuttom">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
                <img src="https://i.imgur.com/m8ujWe3.png" alt="pic">
               
            </div>
        </div>
    </div>
    
</body>
</html>

.wrap{
    width: 1100px;
    height: 835px;
    display: flex;
  margin: 0 auto;
}
.left{
  background:#e7eeea;
}
ul menu{
  padding: 20px;
  line-height: 20px;
}
ul menu li{
 font-weight: 40px;
   line-height: 20px;
 font-size: 39;
 margin: 30px;
 padding: 20px;
  color:#37523d;
}
.menu li a:hover{
    background: #00ffe2;
    color: #0f503d;
  padding-top: 10px;
    padding-bottom: 10px;
}
.right{
  width: 610px;
  flex-wrap: 300px;
}
.rightbuttom{
    display: flex;
    flex-wrap: wrap;
  margin: 8px;
  justify-content:space-between;

}
h2{
 color:#37523d;
  padding-left: 87px;
  padding-top: 82px;
  padding-bottom: 34px;
}