flex布局实现两行两列

小橘子皮__兜兜

已于 2024-03-25 11:40:26 修改

阅读量397

点赞数 8

文章标签： css javascript 前端

于 2024-03-25 11:16:50 首次发布

本文链接：https://blog.csdn.net/weixin_43657954/article/details/137008449

版权

利用flex布局，实现两行两列效果：

父元素

section {

display: flex;

width: 100%;

height: 100px;

border-radius: 4px;

margin-top: 20px;

justify-content: space-around;

align-items: center;

flex-wrap: wrap; //设置换行

gap: 10px; //每个元素间隔10px

}

子元素

.section:nth-child(1) {

display: flex;

border-radius: 5px;

background-color: rgb(189, 231, 241);

justify-content: space-around;

align-items: center;

width: calc(50% - 20px); //设置所占宽度50%，再减去20px

padding: 10px;

box-sizing: border-box; //设置后宽高不变，不会因为间隔而变小

}

完整代码：直接找一个html文件粘贴看效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      /* 在此处补充代码*/
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      section {
        display: flex;
        width: 100%;
        height: 100px;
        border-radius: 4px;
        margin-top: 20px;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
      }
      .section:nth-child(1) {
        display: flex;
        border-radius: 5px;
        background-color: rgb(189, 231, 241);
        justify-content: space-around;
        align-items: center;
        width: calc(50% - 20px);
        padding: 10px;
        box-sizing: border-box;
      }
      .section:nth-child(2) {
        display: flex;
        border-radius: 5px;
        background-color: rgb(189, 231, 241);
        justify-content: space-around;
        align-items: center;
        width: calc(50% - 20px);
        padding: 10px;
        box-sizing: border-box;
      }
      .section:nth-child(3) {
        display: flex;
        border-radius: 5px;
        background-color: rgb(189, 231, 241);
        justify-content: space-around;
        align-items: center;
        width: calc(50% - 20px);
        padding: 10px;
        box-sizing: border-box;
      }
      .section:nth-child(4) {
        display: flex;
        border-radius: 5px;
        background-color: rgb(189, 231, 241);
        justify-content: space-around;
        align-items: center;
        width: calc(50% - 20px);
        padding: 10px;
        box-sizing: border-box;
      }
      .shopping {
        width: 90px;
        height: 30px;
        border-radius: 5px;
        background-color: orange;
        color: #fff;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
      }
      .box {
        line-height: 35px;
      }
    </style>
  </head>
  <body>
    <!-- 主体内容 -->
    <section>
      <div class="section">
        <div class="box">
          <p>《前端小白入门手册》</p>
          <div>适用人群：没有任何前端基础的小白</div>
          <div>费用：￥499</div>
        </div>
        <div class="shopping">
          <div class="btn">加入购物车</div>
        </div>
      </div>
      <div class="section">
        <div class="box">
          <p>《HTML5月CSS3实现动态网页》</p>
          <div>适用人群：有html和css基础的童鞋</div>
          <div>费用：￥599</div>
        </div>
        <div class="shopping">
          <div class="btn">加入购物车</div>
        </div>
      </div>
      <div class="section">
        <div class="box">
          <p>《前端小白入门手册》</p>
          <div>适用人群：没有任何前端基础的小白</div>
          <div>费用：￥599</div>
        </div>
        <div class="shopping">
          <div class="btn">加入购物车</div>
        </div>
      </div>
      <div class="section">
        <div class="box">
          <p>《HTML5月CSS3实现动态网页》</p>
          <div>适用人群：有html和css基础的童鞋</div>
          <div>费用：￥699</div>
        </div>
        <div class="shopping">
          <div class="btn">加入购物车</div>
        </div>
      </div>
    </section>
  </body>
</html>