无法将flex元素.shirt-box排列为行的技术求助

Hey there! I see you've been grinding to get your .shirt-box elements to line up in a row—let's get this sorted out for you.

The Root of the Problem #

Looking at your HTML structure, each .shirt-box is wrapped in its own separate .container-fluid + .row pair. That means every box is getting its own full-width row container, so they can't sit next to each other by default. Bootstrap's .row is built to hold multiple columns in one single row, not one column per row.

The Solution #

We'll restructure your HTML to group all .shirt-box elements into the same .row container-flex, and tweak the styling to make sure your custom flex rules play nicely with Bootstrap. Here's the corrected code:

Updated CSS

.shirt-box {
  flex: 0 0 300px; /* Keep your fixed width setting */
  height: 300px;
  background-image: url("Blue_Tshirt.jpg");
  background-size: cover;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  box-shadow: 1px 1px 8px 0px rgba(0,0,0,0.75);
  /* Removed the conflicting margin/float styles you had commented out */
}

.shirt-box:hover {
  transform: translateY(-3px);
}

.container-flex {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  gap: 20px; /* Adds clean, consistent spacing between boxes (optional but recommended) */
  padding: 20px 0; /* Adds vertical padding to the row for better spacing */
}

body {
  font-family: 'Dosis', sans-serif;
}

Updated HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Dosis:300,400,600,700,800" rel="stylesheet">

<section class="centerpage">
  <div class="container-fluid">
    <!-- All shirt boxes live in ONE single row container -->
    <div class="row container-flex">
      <div class="shirt-box">
      </div>
      <div class="shirt-box">
      </div>
      <!-- Add as many additional .shirt-box elements as you need right here -->
    </div>
  </div>
</section>

Key Changes Explained #

• Grouped all boxes into one row: This lets the flex layout arrange them side by side instead of each taking up a full row.
• Removed duplicate containers: No need for multiple .container-fluid and .row pairs when you want elements in the same horizontal line.
• Added gap to the flex container: This is a flex-friendly way to add spacing between boxes, avoiding messy margin hacks.
• Dropped the .col class: Bootstrap's .col adds its own flex properties that were conflicting with your custom flex: 0 0 300px rule. If you still want to use Bootstrap's grid system, you could replace it with col-auto (which lets the column match its content size) instead.

Testing It Out #

With these changes, your .shirt-box elements will line up in a row, wrap to the next line on smaller screens (thanks to flex-flow: row wrap), and keep all your hover effects and styling intact.

内容的提问来源于stack exchange，提问作者Timilehin Osaze Adegbulugbe