How to set width of a flexbox div - css

Please look my code in the JSFiddle link.
Now, the output looks like this:
Please help me change the code so it looks like this:
CSS:
.card {
display: contents;
}
.card > div {
width: 150px;
height: 120px;
margin: 10px;
}
.breakLine::after {
content: '';
width: 100%;
}
.hiddenCard {
background-color: red;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.MemoryGame {
display: flex;
align-items: center;
flex-direction: column;
}
.controlSection {
display: flex;
justify-content: space-between;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
HTML:
<body>
<div id="root">
<div>
<div class="MemoryGame">
<h1>Memory Game !</h1>
<div class="gameWrapper">
<div class="controlSection">
<h2>score: 5</h2>
<h2>level: 3</h2>
</div>
<div class="cardList">
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>


.card {
display: contents;
}
.card > div {
width: 150px;
height: 120px;
margin: 10px;
}
.breakLine::after {
content: '';
width: 100%;
}
.hiddenCard {
background-color: red;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gameWrapper{
max-width: 90%;
}
.MemoryGame {
display: flex;
align-items: center;
flex-direction: column;
}
.controlSection {
display: flex;
justify-content: space-between;
margin: 0 2rem;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}


Try with the following CSS for the controlSection
.controlSection {
width: 660px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
I just set the width to the width of the boxes (150*4 width + margin 10*6 = 660px) and aligned the container to the middle with margin: 0 auto;
This is not really responsive though.
Good luck


You can try this: justify-content:space-around;
.controlSection {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
}
.card {
display: contents;
}
.card > div {
width: 150px;
height: 120px;
margin: 10px;
}
.breakLine::after {
content: '';
width: 100%;
}
.hiddenCard {
background-color: red;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.MemoryGame {
display: flex;
align-items: center;
flex-direction: column;
}
.controlSection {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
text-align:center;
}
<div class="MemoryGame">
<h1>Memory Game !</h1>
<div class="gameWrapper">
<div class="controlSection">
<h2>score: 5</h2>
<h2>level: 3</h2>
</div>
<div class="cardList">
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
</div>
</div>
</div>
If this does not work for you, you may need to set boundaries by assigning width to the parent container. Like so,
.controlSection {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width:65%;
margin: 0 auto;
}
.card {
display: contents;
}
.card > div {
width: 150px;
height: 120px;
margin: 10px;
}
.breakLine::after {
content: '';
width: 100%;
}
.hiddenCard {
background-color: red;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.MemoryGame {
display: flex;
align-items: center;
flex-direction: column;
}
.controlSection {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
width:65%;
margin: 0 auto;
}
<div class="MemoryGame">
<h1>Memory Game !</h1>
<div class="gameWrapper">
<div class="controlSection">
<h2>score: 5</h2>
<h2>level: 3</h2>
</div>
<div class="cardList">
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
</div>
</div>
</div>


The justify-content property is a sub-property of the Flexible Box Layout module.
space-between items are evenly distributed in the line; the first item is on the start line, the last item on the end line.
space-around items are evenly distributed in the line with equal space around them.
Change the justify-content: space-between to space-around. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
.card {
display: contents;
}
.card > div {
width: 150px;
height: 120px;
margin: 10px;
}
.breakLine::after {
content: '';
width: 100%;
}
.hiddenCard {
background-color: red;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.MemoryGame {
display: flex;
align-items: center;
flex-direction: column;
}
.controlSection {
display: flex;
justify-content: space-around;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>React App</title>
</head>
<body>
<div id="root">
<div>
<div class="MemoryGame">
<h1>Memory Game !</h1>
<div class="gameWrapper">
<div class="controlSection">
<h2>score: 5</h2>
<h2>level: 3</h2>
</div>
<div class="cardList">
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card ">
<div class="hiddenCard"></div>
</div>
<div class="card breakLine">
<div class="hiddenCard"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


You could add an extra div, to wrap it up all together
<!-- the whole game area, including the white area -->
<div id="main-div">
<!-- only the area where stuff should be displayed -->
<!-- the title div and the header div will align accordingly with the width of the game div -->
<div id="game-wrapper">
<div id="title">
<p>memory game</p>
</div>
<div id="header">
<p>score: 5</p>
<p>level: 3</p>
</div>
<div id="game">
<!-- actual game -->
</div>
</div>
</div>

Related

why my <div></div> is overlaying on another div on small screen

Whenever I check the responsiveness and check it on the small screen my one div starts overlaying another div. I have tried the ```position : relative and overflow: hidden as well but it makes no sense call you please tell me what I have to do to stop it from being overlaying another div
my HTML code is :
<div class="container-grid">
<div class="grid_upper">
<h1 class="grid_Heading">My recent projects</h1>
<div class="grid_para">
Ask me a Question if you are unable to solve it.
</div>
</div>
<div class="cardContainer1">
<div class="container">
<div class="row">
<div class="col-sm">
<div class="card h-200">
<img
src="./istockphoto-1074239826-170667a.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card </h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card h-200">
<img
src="./istockphoto-1272685152-612x612.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="card h-200">
<img
src="./photo-1473090826765-d54ac2fdc1eb.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
</div>
<div class="row my-3">
<div class="col-sm-4">
<div class="card h-200">
<img
src="./creative-book-cover-design-vintage-260nw-1115305040.webp"
class="card-img-top"
alt="..."
/>
<div class="card-footer">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
<div class="col-sm-8" style="background-color: white;">
<div class="card card2 h-200" >
<img style="width: 100%;"
src="./wide-view-image-young-woman-paddling-sup-board-calm-morning-sea-water-rear-view_254268-2063.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-footer laster">
<small class="card_text_1">Business</small>
<small class="text-muted"> 3 mins</small>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
<div class="card-footer footerNo2_laster">
<img class="shortImg" src="./istockphoto-1074239826-170667a.jpg" alt="">
<div class="FooterInsideContainer">
<small class="text" style="color: black;"> Micheal Corleone</small>
<small class="text-muted"> Senior web developer</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Approach">
<div class="app_head">
<h1 class="main_approach_Heading">My approach</h1>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<h1 class="pic_char no1">1</h1>
<div class="card-body">
<h5 class="card-title">We will sit and talk drinking coffee</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer approach_footer">
<div class="triangle arrow-up"></div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<h1 class="pic_char no2">2</h1>
<div class="card-body">
<h5 class="card-title">We will sketch some ugly Frameworks</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer approach_footer">
<div class="app_circle"> </div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<!-- <img src="..." class="card-img-top" alt="..."> -->
<h1 class="pic_char no3">3</h1>
<div class="card-body">
<h5 class="card-title">You will pay alot for my services</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer approach_footer">
<div class="triangle arrow-up"></div>
</div>
</div>
</div>
</div>
</div>
</div>
and the CSS code is :
.grid_upper {
display: flex;
flex-direction: column;
width: 67%;
margin: auto;
}
.grid_Heading {
font-size: clamp(2em, 2.5vw, 7em);
padding: 0.5em 0.21em 0em 0em;
color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.grid_para {
color: white;
}
.container-grid {
display: flex;
position: relative;
height: 160vh;
overflow: visible;
flex-wrap: wrap;
background-color: #3e4245;
}
.cardContainer1 {
position: relative;
display: flex;
flex-wrap: wrap;
padding: 2em 0em;
width: 70%;
margin: auto;
}
.cardContainer2 {
position: relative;
display: flex;
flex-wrap: wrap;
padding: 2em 0em;
width: 70%;
margin: auto;
}
.card {
background-color: #252728;
border: none;
border-radius: 20px;
height: 100%;
}
.card2 {
background-color: white;
}
.card2 .card-title {
color: black;
}
.card2 .card-text {
color: grey;
}
.card-title {
color: white;
}
.card-text {
color: rgba(255, 255, 255, 0.522);
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(255, 255, 255, 0.522);
background-color: #252728;
/* background-color: red; */
margin: none;
border: none;
}
.card_text_1 {
color: rgba(255, 255, 0, 0.659);
}
.card-img-top {
width: 100%;
height: 25vh;
object-fit: cover;
}
.shortImg {
height: 40px;
width: 40px;
border-radius: 50%;
}
.footerNo2 {
display: flex;
align-items: flex-start;
justify-content: flex-start;
/* flex-direction: column; */
padding: 1em 1em;
/* background-color: aqua; */
}
.footerNo2_laster {
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-color: white;
}
.FooterInsideContainer {
display: flex;
flex-direction: column;
padding: 0em 1em;
}
.laster {
background-color: white;
}
.laster .card_text_1 {
color: skyblue;
}
.Approach {
position: relative;
/* overflow: hidden; */
height: 100vh;
width: 100%;
margin-top: 10em;
}
.app_head {
padding: 7em 5em;
display: flex;
font-weight: bold;
/* background-color: red; */
}
.main_approach_Heading {
font-size: clamp(1.5rem, 10.5vw, 4rem);
font-family: "Roboto", sans-serif;
margin: auto;
text-align: center;
}
.pic_char {
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* margin-top: 200px; */
text-align: center;
font-weight: bold;
text-transform: uppercase;
/* font-family: 'Times New Roman', Times, serif; */
font-weight: 800;
-webkit-font-smoothing: antialiased;
}
.no1 {
background-image: url("./istockphoto-1288917639-170667a.jpg");
font-family: "Montserrat Alternates", sans-serif;
font-size: 13em;
}
.no2 {
background-image: url("./polygonal-square-background-black-blue-purple-vector-21357114.jpg");
/* font-family: 'Anton', sans-serif; */
font-size: 12em;
}
.no3 {
background-image: url("./android-marshmallow-6-hd-orange-yellow-and-gray-blocks-illustrarion-wallpaper-preview.jpg");
font-size: 12em;
}
.Approach .card {
display: flex;
background-color: white;
color: black;
/* width: 50%; */
}
.Approach .card-body {
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
padding: 0em 4em;
/* background-color: pink; */
}
.Approach .card-title {
color: black;
font-weight: 700;
font-size: 1.4em;
font-feature-settings: "vrt2";
}
.Approach .card-text {
color: grey;
text-align: center;
}
.approach_footer {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: grey;
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
.app_circle{
width: 25px;
height: 25px;
border-radius: 50%;
background-color: white;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}

Flexbox make columns equal heights

I am trying to get 3 columns in a row and be the same height.
I am using the HTML/CSS below. I can't figure out why the boxes arent the same height.
.container {
text-align: center;
display: block;
width: 100%;
}
.grid {
width: 100%;
height: 100%;
}
.row {
display: flex;
height: 100%;
flex-direction: row;
}
.col {
background: #444;
padding: 2em;
flex: 1;
height: 100%;
border: 1px solid blue;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>
How can I make the boxes all the same height. thanks

Simply, remove the height: 100% from .col.
flex: 1; will do the job.
.row {
display: flex;
}
.col {
flex: 1;
background: #444;
padding: 2em;
border: 1px solid blue;
text-align: center;
}
<div class="container">
<div class="data">
<div class="grid">
<div class="row">
<div class="col">
<p>col 1</p>
</div>
<div class="col">
<p>col </br>2</p>
</div>
<div class="col">
<p>col 3</p>
</div>
</div>
</div>
</div>
</div>

Display items in one line with scroll CSS

I am trying to display images in a single line horizontal with scroll but I can't figure how to I would appreciate it if anyone could help me.
CSS
.img {
max-width: 400px;
position: relative;
}
.animal {
float: left;
background-color: #fff;
}
.image-grid{
flex-wrap: wrap;
width: 1400px;
margin: 0 auto;
}
.pet-photo {
padding: 10px;
display: block;
box-sizing: border-box;
flex-basis: 100%;
float: left;
padding: 20px;
width: 200px;
height: 300px;
display: block;
}
js
<div class ="image-grid">
<div class="animal">
<img class="pet-photo " src="${pet.photo}" >
<div class="olay" onclick="location.href='${pet.href}';" style="cursor: pointer;">
<div id="mydiv">
<h2 class="pet-name">${pet.name}
<h1 class="species">${pet.species}
</div>
<div></div></div>
</div>
</div>
That's all thank you for reading :) really appreciate it.

solution is display: flex; with flex-wrap: nowrap;
.container-items {
overflow: auto;
width: 100%;
}
.items {
display: flex;
flex-wrap: nowrap;
}
.items .item {
min-width: 150px;
text-align: center;
padding: 5px;
}
.items .item h2,
.items .item h3 {
margin: 0;
}
.items .item img {
width: 100%;
}
<div class ="container-items">
<div class ="items">
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3>here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
<div class="item">
<img src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL-320-80.jpg">
<h2>here title</h2>
<h3 class="species">here text</h3>
</div>
</div>
</div>

CSS manage nested flexbox width by content priority

I struggling with flexbox wrapping.
I have this 2 levels list:
<div class="wrapper">
<div class="list list-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="list list-2">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
<div class="item">★</div>
</div>
The HTML structure can be modified if its needed.
Base on wrapper width render should fit these rules:
mimic one list (same margin between all items);
The first item of all lists have to be visible;
but list-1 content has priority of list-2;
items only complete item can be visible in the list;
Render example:
1 A X
1 2 3 A X
1 2 3 4 5 6 7 8 9 A X
1 2 3 4 5 6 7 8 9 A B C D E F X
With my current achievement, I miss the priority wrapping (the both list get the same width and number of elements), and the spaces between items in both lists are not the same.
.wrapper {
display: flex;
flex-flow: row nowrap;
width: 100%;
height: 37px;
border-radius: 5px;
background-color: #222;
justify-content: flex-end;
}
.list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.list div:not(:first-child) {
margin-left: 2px;
}
.item {
display: flex;
width: 45px;
height: 26px;
align-items: center;
justify-content: center;
margin: 4px 4px 10px;
color: #fff;
background-color: #3d3d3d;
}
Any idea are welcome!

You can add flex-shrink:0 to the first list so it will never shrink and you will have your priority rule and add min-width:0 to the other list to allow it to shrink when there isn't enough space. You should also allow the wrap so that you don't see half an element when it overflow.
With your new rule there will be a wrong space with the last element.
.wrapper {
display: flex;
flex-flow: row nowrap;
height: 37px;
border-radius: 5px;
background-color: #222;
justify-content: flex-end;
}
.list {
display: flex;
flex-wrap:wrap;
}
/*added this*/
.list-1 {
flex-shrink:0;
}
.list-2 {
min-width:0;
overflow:hidden;
}
/**/
.item {
display: flex;
width: 45px;
height: 26px;
align-items: center;
justify-content: center;
margin: 4px 4px 10px;
color: #fff;
background-color: #3d3d3d;
flex-shrink:0; /*this is also mandatory to avoid the item to shrink*/
}
<div class="wrapper">
<div class="list list-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="list list-2">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
<div class="item">★</div>
</div>
Without overlfow here is a hack to hide the non needed element:
.wrapper {
display: flex;
flex-flow: row nowrap;
height: 37px;
border-radius: 5px;
background-color: #222;
justify-content: flex-end;
}
.list {
display: flex;
flex-wrap:wrap;
position:relative;
align-self: flex-start;
}
.list::after {
content:"";
position:absolute;
bottom:0;
top:37px;
left:0;
right:0;
background:#fff;
}
/*added this*/
.list-1 {
flex-shrink:0;
}
.list-2 {
min-width:0;
}
/**/
.item {
display: flex;
width: 45px;
height: 26px;
align-items: center;
justify-content: center;
margin: 4px 4px 10px;
color: #fff;
background-color: #3d3d3d;
flex-shrink:0; /*this is also mandatory to avoid the item to shrink*/
}
<div class="wrapper">
<div class="list list-1">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="list list-2">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
</div>
<div class="item">★</div>
</div>

CSS Flexbox - Aligning by card description

I have a simple card layout and I want to align it by the card description.
Can anyone help me, please? :)
Here is a Pen: CODEPEN
Here is my HTML structure:
<div class="card-container">
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">A veeeeery very very very large title</h4>
<p class="card-desc">omg, that description have broken :(</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
</div>

By changing the .card elements to
display: flex;
flex-direction: column;
and adding margin-top: auto; to the descriptions. This will cause the description element to be pushed to the bottom of the card. Because the cards are stretched vertically, the alignment works on the horizontal axis. This would not be the case if you changed align-items on the .card-container to be something other than stretch.
.card {
display: flex;
flex-direction: column;
text-align: center;
flex: 50%;
padding: 15px 0;
}
.card-img img {
width: 60px;
padding: 15px;
}
.card-title {
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 1.2rem;
}
.card-desc {
font-weight: 400;
margin: 0;
margin-top: auto;
line-height: 1rem;
}
.card-container {
background: rgba(255, 0, 0, 0.432);
display: flex;
flex-wrap: wrap;
justify-content: center;
flex: 100%;
}
#media screen and (min-width: 500px) {
.card {
flex: 1;
}
.card-img img {
width: 50px;
}
.card-title {
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
font-size: 1.2rem;
}
.card-desc {
font-weight: 400;
line-height: 1rem;
}
.card-container {
background: rgba(255, 0, 0, 0.432);
display: flex;
flex-wrap: wrap;
justify-content: center;
flex: 100%;
}
}
<div class="card-container">
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">A veeeeery very very very large title</h4>
<p class="card-desc">omg, that description have broken :(</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
<div class="card">
<div class="card-img"><img src="https://via.placeholder.com/500x500"></div>
<h4 class="card-title">Just a title</h4>
<p class="card-desc">A simple description</p>
</div>
</div>

Resources