如何将多个元素包装在一个边框不延伸到页面整个宽度的 Flexbox 容器中？

问题描述 投票：0回答：1

我对此很陌生。我正在尝试为多个元素制作一个弹性盒容器，其边框不跨越页面的整个宽度，而是环绕元素，无论其“flex-basis”值如何。这是代码：

      body {
        color: rgb(0, 0, 0);
        font-size: 1.2rem;
      }

      .table {
        display: flex;
        flex-direction: row;
        border: 5px solid rgb(75, 100, 182);
      }

      .table > * {
        flex-basis: 100px;
      }

      .bronze {
        background-color: rgb(116, 97, 44);
      }
      .silver {
        background-color: silver;
      }
      .gold {
        background-color: gold;
      } 
      .platinum {
        background-color: rgb(69, 179, 173);
      }
      .diamond {
        background-color: rgb(175, 81, 175);
      }
 

 <body>
    <div class="table">
      <div class="bronze">Bronze</div>
      <div class="silver">Silver</div>
      <div class="gold">Gold</div>
      <div class="platinum">Platinum</div>
      <div class="diamond">Diamond</div>
    </div>
  </body>

我希望能够更改容器中所有项目的“flex-basis”值，并且仍然让边框环绕所有元素，而不是延伸到页面的整个宽度。

如果我将 

display: flex;
更改为 
display: inline-flex
，然后使用 
width
而不是 
flex-basis
那么它可以工作，但我不想使用 
width
，只想使用 
flex-basis
。我不想改变容器的
flex-direction
。我尝试将显示更改为 
inline-flex
并且不使用 
width
，但这样做会导致 
flex-basis
被完全忽略。我正在学习，所以我的知识有限，但我尝试了我所知道的一切，但没有任何效果。我被难住了。

html css flexbox responsive-design
1个回答
0
投票

听起来您想要调整容器内 

flex-basis
项目的 
flex
属性，同时保持项目周围的边框完整并防止它们延伸到页面的整个宽度。您提到将显示属性更改为 inline-flex 并使用 width 而不是 flex-basis 适用于您的布局，但您更喜欢使用 flex-basis。

要实现这一点，您可以设置 

flex-basis
项的 
flex
属性，但您还需要确保 
flex-basis
、
flex-grow
和 flex-shrink 的总和不超过可用空间
flex
容器。如果超出可用空间，项目将不再适合容器，并且边框将延伸到页面的整个宽度。

这是您需要做的：

 <body>
    <div class="table">
      <div class="bronze">Bronze</div>
      <div class="silver">Silver</div>
      <div class="gold">Gold</div>
      <div class="platinum">Platinum</div>
      <div class="diamond">Diamond</div>
    </div>
  </body>

   body {
        color: rgb(0, 0, 0);
        font-size: 1.2rem;
      }

      .table {
        display: flex;
        flex-direction: row;
        border: 5px solid rgb(75, 100, 182);
      }

    
    

      .table > * {
        flex-basis: 100px; /* Adjust the flex-basis as needed */
  flex-grow: 0;
      flex-shrink: 0;
     border: 1px solid red; /* these are the borders from the items */
      }

      .bronze {
        background-color: rgb(116, 97, 44);
      }
      .silver {
        background-color: silver;
      }
      .gold {
        background-color: gold;
      } 
      .platinum {
        background-color: rgb(69, 179, 173);
      }
      .diamond {
        background-color: rgb(175, 81, 175);
      }

我希望这有效，如果您还有任何问题可以问我！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.