【CSS】Flex布局中遇到的问题汇总

最新推荐文章于 2024-08-23 14:45:51 发布

春风十里不如你I

最新推荐文章于 2024-08-23 14:45:51 发布

阅读量272

点赞数 5

分类专栏： CSS疑难点汇总 CSS基础文章标签： css Flex布局

本文链接：https://blog.csdn.net/kakaai77/article/details/137721895

版权

CSS基础同时被 2 个专栏收录

27 篇文章 2 订阅

订阅专栏

CSS疑难点汇总

12 篇文章 1 订阅

订阅专栏

Flex布局问题

当我们给flex布局中设置了just-content:space-between,如果遇到如下问题该怎么解决？

在这里插入图片描述

如图，显然，space-between并不能达到我们预期的效果，一般来说我们预期的效果应该是最后一行盒子从左到右依次排列，并空出一个位置

在这里插入图片描述

到底该怎么做呢，我们应该想这样一个问题，父元素设置为flex时，所有的子元素都将不再遵循行内元素或者块级元素的限制，默认的宽度（主轴的方向为x轴时）为0，高度最大为充满单行交叉轴的高度，所以为了解决盒子排布不规范，我们可以这样做

在最后一行中添加多余的元素，设置其宽度和其他盒子一样，高度为auto，这样子盒子因为有宽度会占据位置，因为没有高度不会撑开盒子，代码贴上

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul,
      li {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .box ul {
        width: 430px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
      }
      .box ul .item {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
        text-align: center;
        line-height: 100px;
        font-size: 40px;
        background-color: pink;
        color: #fff;
      }
      .box ul .item2 {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
        <li class="item">10</li>
        <li class="item">11</li>
        <li class="item2"></li>
        <li class="item2"></li>
      </ul>
    </div>
  </body>
</html>

春风十里不如你I

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS】Flex布局中遇到的问题汇总

到底该怎么做呢，我们应该想这样一个问题，父元素设置为flex时，所有的子元素都将不再遵循行内元素或者块级元素的限制，默认的宽度（主轴的方向为x轴时）为0，高度最大为充满单行交叉轴的高度，所以为了解决盒子排布不规范，我们可以这样做。如图，显然，space-between并不能达到我们预期的效果，一般来说我们预期的效果应该是最后一行盒子从左到右依次排列，并空出一个位置。在最后一行中添加多余的元素，设置其宽度和其他盒子一样，高度为auto，这样子盒子因为有宽度会占据位置，因为没有高度不会撑开盒子，代码贴上。
复制链接

扫一扫

专栏目录