Flexbox: Responsive card layout where the cards stick to the left edge, but if there is one card left, it should be centered

Question

I have created an adaptive card layout (check the Codepen link, the code below won't work here because I use SCSS)

The list of cards will be dynamic, they can be added and removed. How can I make it so that if there is only one card left, it will be centered horizontally instead of sticking to the left side of the screen?

//Root fonts and colors
$root-font-size: 16px;
html {
  font-size: $root-font-size;
}
body {
  background-color: #e5e5e5;
}


//breakpoints
$breakpoint-small: 576px;
$breakpoint-large: 992px;
$breakpoint-extralarge: 1200px;

.page-wrapper {
  margin: 50px 250px;
}

@media only screen and (max-width: $breakpoint-extralarge) {
  .page-wrapper {
    margin: 50px 150px;
  }
}

@media only screen and (max-width: $breakpoint-small) {
  .page-wrapper {
    margin: 50px 50px;
  }
}

//Card

$card-title-fontsize: 2rem;
$card-subtitle-fontsize: 0.875rem;
$card-transition-speed: 0.3s;
$card-border-radius: 4px;

.cards-section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
}

.card-main {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-basis: calc(100% / 2 - 20px);
  height: 200px;
  border-radius: $card-border-radius;
  background-color: white;
  border: solid #e0e0e0 1px;
  box-sizing: border-box;
  overflow: hidden;
}

.card-main:hover {
  transition: all $card-transition-speed;
  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%),
    0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
  cursor: pointer;
  
  .card-title {
    opacity: 0;
    transition: all $card-transition-speed;
  }
  
  .card-icon-1 {
    width: 150px;
    height: 150px;
    opacity: 0;
    transition: all $card-transition-speed;
  }
  
  .card-icon-2 {
    width: 150px;
    height: 150px;
    opacity: 0.3;
    transition: all $card-transition-speed;
  }
  
  .card-subtitle {
    height: 50%;
    opacity: 1;
    transition: all $card-transition-speed;
  }
}

.card-icon-1 {
  width: 100px;
  height: 100px;
  background-color: darkgrey;
  border-radius: 100%;
  margin: 0 auto;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  opacity: 1;
  transition: all $card-transition-speed;
}

.card-icon-2 {
  width: 100px;
  height: 100px;
  background-color: #00ffb9;
  border-radius: 100%;
  margin: 0 auto;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transition: all $card-transition-speed;
}

.card-title {
  font-size: $card-title-fontsize;
  line-height: 2rem;
  font-weight: 500;
  letter-spacing: 0.0125em;
  margin: 130px auto;
  opacity: 1;
  transition: all $card-transition-speed;
  
  .text-container {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    //word-break: break-all;
    overflow: hidden;
  }
}

.card-subtitle {
  position: absolute;
  bottom: 0%;
  //background-color: white;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 255, 185, 0.3) 100%
  );
  height: 0%;
  width: 100%;
  font-size: $card-subtitle-fontsize;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.0178571429em;
  box-sizing: border-box;
  padding: 0px 20px;
  opacity: 0;
  transition: all $card-transition-speed;
  
  .text-container {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    //word-break: break-all;
    overflow: hidden;
  }
}

@media only screen and (max-width: $breakpoint-extralarge) {
  .card-main {
    flex-basis: calc(100% / 1 - 20px);
  }
}

<div class="page-wrapper">
  <div class="cards-section">
    <div class="card-main">
      <div class="card-icon-1"></div>
      <div class="card-icon-2"></div>
      <div class="card-title">
        <div class="text-container"> Card title </div>
      </div>
      <div class="card-subtitle">
        <div class="text-container"> Nulla feugiat elit quis ante molestie fringilla. Donec vulputate lobortis convallis. Sed pellentesque massa nec ex semper blandit. Integer ornare dignissim velit, vel egestas nisl blandit at. Fusce eros lacus, auctor ac ligula vel, gravida pellentesque nibh. Morbi ut ante at elit pulvinar tempus. Ut dui est, aliquam ac lacus sed, pellentesque ultricies turpis. Donec non nisl volutpat, fringilla velit vel, accumsan mi. Phasellus vestibulum pulvinar facilisis. Nam auctor nisi lacus, id blandit lacus aliquet sit amet. </div>
      </div>
    </div>
    <div class="card-main">
      <div class="card-icon-1"></div>
      <div class="card-icon-2"></div>
      <div class="card-title">
        <div class="text-container"> Card title </div>
      </div>
      <div class="card-subtitle">
        <div class="text-container"> Vivamus a metus id massa pretium rhoncus vel eget elit. Aliquam consequat convallis nisi, id tincidunt lectus fringilla vel. Ut viverra vulputate felis. Aenean nisl lorem, commodo sit amet molestie vitae, hendrerit ut lectus. </div>
      </div>
    </div>
    <div class="card-main">
      <div class="card-icon-1"></div>
      <div class="card-icon-2"></div>
      <div class="card-title">
        <div class="text-container"> Card title </div>
      </div>
      <div class="card-subtitle">
        <div class="text-container"> Vivamus a metus id massa pretium rhoncus vel eget elit. Aliquam consequat convallis nisi, id tincidunt lectus fringilla vel. Ut viverra vulputate felis. Aenean nisl lorem, commodo sit amet molestie vitae, hendrerit ut lectus. </div>
      </div>
    </div>
    <div class="card-main">
      <div class="card-icon-1"></div>
      <div class="card-icon-2"></div>
      <div class="card-title">
        <div class="text-container"> Card title </div>
      </div>
      <div class="card-subtitle">
        <div class="text-container"> Vivamus a metus id massa pretium rhoncus vel eget elit. Aliquam consequat convallis nisi, id tincidunt lectus fringilla vel. Ut viverra vulputate felis. Aenean nisl lorem, commodo sit amet molestie vitae, hendrerit ut lectus. </div>
      </div>
    </div>
  </div>
</div>

@Gerard In this case, if we have 3 cards, the 3rd one will be centered as well, is there a way to avoid it? — Rumata, Oct 19 '22 at 14:06

Asmoth · Accepted Answer · 2022-10-19T15:09:26.617

2

You can add the following code :

.cards-section {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
    justify-content: center; // Line to add if there is one element per line
}

 .card-main:only-child { 
   margin: 0 auto;
 }

To update only one child of a div, you can use the CSS property only-child. See more in this doc : https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child

edited Oct 19 '22 at 15:09

answered Oct 19 '22 at 13:52

Asmoth

552
1
13

In this case, if we have 3 cards, the 3rd one will be centered as well, is there a way to avoid it? – Rumata Oct 19 '22 at 14:04
If I understand correctly, you want that if there are 3 divs, the 3rd div is aligned to the left, and if you have only one, it is aligned to the center? – Asmoth Oct 19 '22 at 14:16
Yes, this is correct – Rumata Oct 19 '22 at 14:19
I'm sure that it can be possible with the css property `only-child` https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child – Asmoth Oct 19 '22 at 14:51
Yes, it worked!!! Thank you for your help! Please include it in your answer, and I will accept it. – Rumata Oct 19 '22 at 15:06
Nice ! I did it – Asmoth Oct 19 '22 at 15:10

score 1 · Answer 2 · answered Oct 19 '22 at 13:52

1

just add this in your class

 .card-main{
   margin: 0 auto;
}

answered Oct 19 '22 at 13:52

Abdul Nafay

85
8

In this case, if we have 3 cards, the 3rd one will be centered as well, is there a way to avoid it? – Rumata Oct 19 '22 at 14:05
but right now there are only two – Abdul Nafay Oct 19 '22 at 14:10
can you make changes to your code pen and show me what you are trying. – Abdul Nafay Oct 19 '22 at 14:10

Flexbox: Responsive card layout where the cards stick to the left edge, but if there is one card left, it should be centered

2 Answers2