css Flex容器内的Flex物品未正确 Package

0ejtzxu1 于 2023-02-17 发布在其他

关注(0)|答案(1)|浏览(122)

我希望所有的项目都一样宽（和最宽的项目一样宽），并且在没有空间的时候换到下一行。但是下面的代码不起作用，因为项目的宽度被设置为容器的1/7，而不是容器中内容的宽度。我该怎么修复呢？

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(255, 0, 0, 0.3);
  max-width: 25rem;
  gap: 1rem;
  padding: 1rem;
}

.flex-item {
  flex: 1 1 auto;
  width: 0;
  box-sizing: border-box;
  background: rgba(0, 0, 255, 0.3);
}

<div class='flex-container'>
  <div class='flex-item'>A</div>
  <div class='flex-item'>AB</div>
  <div class='flex-item'>ABC</div>
  <div class='flex-item'>ABCD</div>
  <div class='flex-item'>ABCDE</div>
  <div class='flex-item'>ABCDEF</div>
  <div class='flex-item'>ABCDEFG</div>
</div>

css

来源：https://stackoverflow.com/questions/75477953/flex-items-not-wrapping-correctly-inside-my-flex-contianer

1条答案

按热度按时间

rekjcdws1#

在flex-basis属性中设置最大宽度值

.flex-container {
            display: flex;
            flex-wrap: wrap;
            background-color: rgba(255, 0, 0, 0.3);
            max-width: 25rem;
            gap: 1rem;
            padding: 1rem;
        }

        .flex-item {
            flex-basis: 8ch;
            box-sizing: border-box;
            background: rgba(0, 0, 255, 0.3);
        }

<div class='flex-container'>
        <div class='flex-item'>A</div>
        <div class='flex-item'>AB</div>
        <div class='flex-item'>ABC</div>
        <div class='flex-item'>ABCD</div>
        <div class='flex-item'>ABCDE</div>
        <div class='flex-item'>ABCDEF</div>
        <div class='flex-item'>ABCDEFG</div>
    </div>

赞(0）回复(0）举报 2023-02-17

我来回答

css Flex容器内的Flex物品未正确 Package

1条答案

相关问题

热门标签

最新问答