借助Flexbox调整Bootstrap 4中团队成员卡片的列顺序

Nice one! Alternating the image position for every other team member is a clean, engaging layout pattern, and Flexbox makes implementing it totally straightforward. Let's adjust your existing SCSS code to achieve this reversed column order for every n+1 (even-indexed) team member.

Step 1: Set Up the Parent Container #

First, wrap all your team member cards in a parent container to manage the overall layout. This helps with spacing and consistent alignment:

.team-members {
  display: flex;
  flex-direction: column;
  gap: 32px; // Adjust spacing between cards as needed
}

Step 2: Convert Cards to Flex Containers #

Turn each .team-member-card into a flex container so we can control the order of its image and text content. We'll use flex-direction to toggle the layout for even-numbered cards:

.team-member-card {
  display: flex;
  align-items: stretch; // Ensures text and image sections are the same height
  flex-direction: row; // Default order: image first, text second

  // Reverse order for every 2nd, 4th, 6th... card (n+1 where n starts at 1)
  &:nth-child(even) {
    flex-direction: row-reverse;
  }

  // Your existing styles, updated for flex compatibility
  &__text-content {
    background-color: red;
    padding: 16px;
    overflow-y: scroll;
    flex: 1; // Lets text section fill remaining space
    max-height: 400px; // Optional: Sets a fixed height to enable scrolling
  }

  &__name {
    font-family: CircularStd;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: $white;
  }

  &__role {
    font-family: CircularStd;
    font-size: 18px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.44;
    letter-spacing: normal;
    color: $white;
  }

  &__biography {
    font-family: Balto;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    color: $white;
  }

  &__image-container {
    position: relative;
    flex: 0 0 40%; // Sets image container to 40% of the card width
  }

  &__image {
    height: 100%;
    width: 100%;
    object-fit: cover; // Fills container without distortion (swap back to contain if needed)
    background-color: #ffffff;
  }

  &__social-link {
    position: absolute;
    width: 48px;
    height: 48px;
    object-fit: contain;
    bottom: 16px;
    right: 16px; // Positions social link in bottom-right corner of image
  }
}

Key Details Explained: #

• display: flex on .team-member-card transforms it into a flex container, giving us control over child element order and alignment.
• flex-direction: row is the default, placing the image container first followed by the text content.
• :nth-child(even) targets every second card, flipping the layout with flex-direction: row-reverse to put text first and image second.
• flex: 1 on the text content ensures it takes up all remaining space in the card, while flex: 0 0 40% fixes the image container to a consistent width.
• align-items: stretch makes sure both the image and text sections match in height, creating a polished, uniform look.

内容的提问来源于stack exchange，提问作者Jesse Luke Orange