傻瓜式flex布局实现盒子二、四、N等分教学

最新推荐文章于 2024-03-26 17:18:41 发布

前端小葛

最新推荐文章于 2024-03-26 17:18:41 发布

阅读量2.9k

点赞数 1

分类专栏：技术分享个人学习文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_61570458/article/details/126884793

版权

技术分享同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

个人学习

26 篇文章 0 订阅

订阅专栏

二等分盒子部分代码

//用div一样   
 <ul class="contentUl">
      <li></li>
      <li></li>
 </ul>

css部分代码

  .contentUl {
    background-color: red;
    display: flex;
    margin: 0;
    padding: 10px;
    width: 100%;
    height: 100%;
    /* flex布局 */
    display: flex;
    // 开启换行
    flex-wrap: wrap;
    // 主轴上两端对齐
    justify-content: space-between;
    // 副轴上两端对齐
    align-content: space-between;
    //li盒子大小设置
    li {
      width: 49.5%;
      height: 100%;
      list-style: none;
      background-color: skyblue;
    }
  }

实现效果

四等分盒子部分代码

    <ul class="contentUl">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

css部分代码

  .contentUl {
    background-color: red;
    display: flex;
    margin: 0;
    padding: 10px;
    width: 100%;
    height: 100%;
    /* flex布局 */
    display: flex;
    // 开启换行
    flex-wrap: wrap;
    // 主轴上两端对齐
    justify-content: space-between;
    // 副轴上两端对齐
    align-content: space-between;
    //li盒子大小设置
    li {
      width: 49.5%;
//高度调整
      height: 49%;
      list-style: none;
      background-color: skyblue;
    }
  }

实现效果

实现N等分只需要增加盒子数量并按需求减少width或者height即可

8等分

    <ul class="contentUl">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
//css部分
  .contentUl {
    background-color: red;
    display: flex;
    margin: 0;
    padding: 10px;
    width: 100%;
    height: 100%;
    /* flex布局 */
    display: flex;
    // 开启换行
    flex-wrap: wrap;
    // 主轴上两端对齐
    justify-content: space-between;
    // 副轴上两端对齐
    align-content: space-between;
    //li盒子大小设置
    li {
      width: 24.5%;
      height: 49%;
      list-style: none;
      background-color: skyblue;
    }
  }

效果图