I'm learning HTML and CSS and I'm kinda in trouble with CSS flex box so I have this code
:root {
--blue-color: #18479f;
--gold-color: #e8b224;
}
html,
body {
box-sizing: border-box;
margin: 0;
scroll-behavior: smooth;
padding: 0;
height: 100%;
}
.sub-hero{
height: 60vh;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.buttons-all{
display: flex;
justify-content: center;
position: relative;
}
.slideshow-mid{
overflow: hidden;
width: 550px;
height: 400px;
border: var(--blue-color) 3px solid;
}
.slideshow-mid img{
width: 550px;
}
.buttons-all .buttons{
}
.buttons .button1{
display: flex;
position: relative;
justify-content: center;
align-items: center;
border: solid var(--blue-color) 3px;
width: 300px;
height: 80px;
border-radius: 20px;
overflow: hidden;
/* margin-left: 1300px;
margin-top: 100px; */
box-shadow: 0px 5px var(--gold-color);
}
.buttons .button1:hover{
transform: translateY(5px);
box-shadow: 0px 0px var(--gold-color);
}
.buttons .button1 a:hover span{
color: var(--gold-color);
}
.buttons .button1 a{
text-decoration: none;
height: 80px;
padding-top: 46px;
}
.buttons .button1 .home-fire{
position: absolute;
right: 200px;
bottom: 0px;
height: 85px;
padding: 0;
}
.buttons .button1 .fire1{
position: absolute;
left: 43px;
height: 25px;
animation: fire 2s ease-in-out infinite;
}
.buttons .button1 .fire3{
position: absolute;
left: 70px;
bottom: 0px;
height: 25px;
animation: fire 5s ease-in-out .5s infinite;
}
.buttons .button1 .fire2{
position: absolute;
left: 73px;
top: 0px;
transform: rotate(45deg);
height: 20px;
animation: fire 2s ease-in-out .2s infinite;
}
@keyframes fire{
0%{
opacity: 50%;
transform: translateX(3px);
}
10%{
opacity: 100%;
transform: translateX(-3px);
}
20%{
opacity: 50%;
transform: translateX(3px);
}
30%{
opacity: 100%;
transform: translateX(-3px);
}
40%{
opacity: 50%;
transform: translateX(3px);
}
50%{
opacity: 100%;
transform: translateX(-3px);
}
60%{
opacity: 50% ;
transform: translateX(3px);
}
70%{
opacity: 100%;
transform: translateX(-3px);
}
80%{
opacity: 50%;
transform: translateX(3px);
}
90%{
opacity: 100%;
transform: translateX(-3px);
}
100%{
opacity: 50%;
transform: translateX(3px);
}
}
.buttons .button1 span {
font-family: vazirbold;
font-size: 1.3rem;
padding-left: 140px;
color: var(--blue-color);
}
.buttons .button2{
display: flex;
position: relative;
justify-content: center;
align-items: center;
border: solid var(--blue-color) 3px;
width: 200px;
height: 80px;
border-radius: 20px;
overflow: hidden;
/* margin-left: 1075px;
margin-top: -85px; */
box-shadow: 0px 5px var(--gold-color);
}
.buttons .button2:hover{
transform: translateY(5px);
box-shadow: 0px 0px var(--gold-color);
}
.buttons .button2 a{
position: relative;
text-decoration: none;
height: 80px;
padding-top: 46px;
}
.buttons .button2 a:hover span{
color: var(--gold-color);
}
.buttons .button2 .barbari-icons{
display: flex;
position: absolute;
overflow: hidden;
align-items: center;
height: 80px;
width: 95px;
top: 22px;
right: 95px;
}
.buttons .button2 .truck{
position: absolute;
bottom: 0px;
height: 50px;
padding-right: 25px;
animation: truck 3s ease-in-out infinite 1.5s;
}
.buttons .button2 .plane{
position: absolute;
left: 43px;
height: 50px;
padding-left: 25px;
animation: plane 3s ease-in-out infinite;
}
@keyframes plane{
0%{
transform: translateX(-125px);
}
100%{
transform: translateX(40px);
}
}
@keyframes truck{
0%{
transform: translateX(-60px);
}
50%{
transform: translateX(20px);
}
100%{
transform: translateX(100px);
}
}
.buttons .button2 span {
font-family: vazirbold;
font-size: 1.3rem;
padding-left: 85px;
color: var(--blue-color);
}
.buttons .button3{
display: flex;
position: relative;
justify-content: center;
align-items: center;
border: solid var(--blue-color) 3px;
width: 525px;
height: 100px;
border-radius: 20px;
overflow: hidden;
/* margin-left: 1075px;
margin-top: 25px; */
box-shadow: 0px 5px var(--gold-color);
}
.buttons .button3:hover{
transform: translateY(5px);
box-shadow: 0px 0px var(--gold-color);
}
.buttons .button3 a{
position: relative;
text-decoration: none;
height: 80px;
padding-top: 40px;
}
.buttons .button3 a:hover span{
color: var(--gold-color);
}
.buttons .button3 .car-normal{
position: absolute;
bottom: 10px;
height: 48px;
right: 150px ;
}
.buttons .button3 .car-hitting {
position: absolute;
height: 78px;
bottom: -6px;
left: -92px;
animation: car-hitting 3s ease-in-out infinite;
}
.buttons .button3 .shield {
position: absolute;
right: 210px;
height: 40px;
bottom: 65px;
animation: shield 3s ease-in-out infinite;
}
.buttons .button3 .explosion {
position: absolute;
right: 170px;
height: 40px;
bottom: 13px;
animation: 2s ease-in-out infinite;
padding-left: 25px;
animation: explosion 3s ease-in-out infinite;
}
@keyframes shield{
0%{
transform: scale(20%);
}
30%{
transform: scale(100%);
}
100%{
transform: scale(20%);
}
}
@keyframes car-hitting{
0%{
transform: translateX(90px);
}
30%{
transform: translateX(320px);
}
100%{
transform: translateX(90px);
}
}
@keyframes explosion{
0%{
transform: scale(0%)
}
25%{
transform: scale(0%);
}
32%{
transform: scale(100%);
opacity: 1;
}
65%{
opacity: 0;
}
100%{
opacity: 0;
}
}
.buttons .button3 span {
font-family: vazirbold;
font-size: 1.5rem;
color: var(--blue-color);
padding: 0 0 0 380px;
}
.buttons .button4{
display: flex;
position: relative;
justify-content: center;
align-items: center;
border: solid var(--blue-color) 3px;
width: 200px;
height: 80px;
border-radius: 20px;
overflow: hidden;
/* margin-left: 1400px;
margin-top: 25px; */
box-shadow: 0px 5px var(--gold-color);
}
.buttons .button4:hover{
transform: translateY(5px);
box-shadow: 0px 0px var(--gold-color);
}
.buttons .button4 a{
position: relative;
text-decoration: none;
height: 80px;
padding-top: 46px;
}
.buttons .button4 a:hover span{
color: var(--gold-color);
}
.buttons .button4 .home-heart{
position: absolute;
bottom: 35px;
height: 55px;
padding-right: 25px;
animation: home 1s ease-in-out infinite ;
transform-origin: center;
}
.buttons .button4 .family{
position: absolute;
left: -13px;
bottom: 35px;
height: 30px;
padding-left: 25px;
animation: family 1s ease-in-out infinite;
}
@keyframes home{
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
@keyframes family{
0%{
opacity: 20%;
}
50%{
opacity: 100%;
}
100%{
opacity: 20%;
}
}
.buttons .button4 span {
font-family: vazirbold;
font-size: 1.3rem;
padding-left: 85px;
color: var(--blue-color);
}
.buttons .button5{
display: flex;
position: relative;
justify-content: center;
align-items: center;
border: solid var(--blue-color) 3px;
width: 300px;
height: 80px;
border-radius: 20px;
overflow: hidden;
/* margin-left: 1075px;
margin-top: -86px; */
box-shadow: 0px 5px var(--gold-color);
}
.buttons .button5:hover{
transform: translateY(5px);
box-shadow: 0px 0px var(--gold-color);
}
.buttons .button5 a:hover span{
color: var(--gold-color);
}
.buttons .button5 a{
text-decoration: none;
height: 80px;
padding-top: 46px;
}
.buttons .button5 .cloud{
position: absolute;
right: 215px;
bottom: 51px;
height: 25px;
padding: 0;
animation: cloud 2s ease-in-out infinite;
}
.buttons .button5 .umbrella{
position: absolute;
left: 43px;
height: 45px;
animation: umbrella 2s ease-in-out infinite;
}
.buttons .button5 .ppl1{
position: absolute;
left: 70px;
bottom: 0px;
height: 28px;
/* animation: fire 5s ease-in-out .5s infinite; */
}
.buttons .button5 .ppl2{
position: absolute;
left: 48px;
bottom: 0;
height: 28px;
/* animation: fire 2s ease-in-out .2s infinite; */
}
@keyframes cloud{
0%{
transform: scale(1);
opacity: 100%;
}
50%{
transform: scale(1.2);
opacity: 50%;
}
100%{
transform: scale(1);
opacity: 100%;
}
}
@keyframes umbrella{
0%{
transform: rotate(5deg)
}
50%{
transform: rotate(-5deg);
}
100%{
transform: rotate(10deg);
}
}
.buttons .button5 span {
font-family: vazirbold;
font-size: 1.3rem;
padding-left: 140px;
color: var(--blue-color);
}<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<section id="sub-hero">
<div >
<div >
<img src="img/bime-banner-site.png" alt="cc" />
</div>
<div >
<div >
<a href="#" target="_blank">
<img src="img/home.svg" alt="home" />
<img src="img/fire.svg" alt="fire" />
<img src="img/fire.svg" alt="fire" />
<img src="img/fire.svg" alt="fire" />
<span>بیمه آتش سوزی</span>
</a>
</div>
<div >
<a href="#" target="_blank">
<div >
<img src="img/truck.svg" alt="truck" />
<img src="img/plane.svg" alt="plane" />
</div>
<span>بیمه باربری</span>
</a>
</div>
<div >
<a href="#" target="_blank">
<img src="img/normal-car.svg" alt="car" />
<img src="img/hitting-car.svg" alt="car" />
<img src="img/explosion.png" alt="explosion" />
<img src="img/shield.svg" alt="shield" />
<span>بیمه اتومبیل</span>
</a>
</div>
<div >
<a href="#" target="_blank">
<img
src="img/home-with-heart.svg"
alt="home"
/>
<img src="img/family.svg" alt="family" />
<span>بیمه عمر</span>
</a>
</div>
<div >
<a href="#" target="_blank">
<img src="img/ppl1.svg" alt="ppl" />
<img src="img/ppl2.svg" alt="ppl2" />
<img src="img/umbrella.svg" alt="umbrella" />
<img src="img/cloud.svg" alt="cloud" />
<span>بیمه مسئولیت</span>
</a>
</div>
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
</section>
</body>
</html>and I want my buttons to stack on each other like this
but the problem is I don't know how to set them and how to set the width of every column so only that amount of space is needed (like I want my columns to be 550px and if 2 buttons can fit then be it and if not then only one button be in that column). now I have seen a lot of YouTube videos and it got me more confused pls help me !
CodePudding user response：
We create a parent container and use flexBox inside and set its direction to row that means if there is more child always add them in same row and we use flex-wrap: wrap; to let if some of the boxes inside first row exceeds the limit of width it will create another row.
display:flex;
flex-direction: row;
flex-wrap: wrap;
Then in boxes we use flex-grow: 1 that let every flex child(.box) to grow as much as possible inside their rows.
body{
display: grid;
place-content: center;
background-color: bisque;
min-height: 100vh;
}
.container{
padding: 1rem;
background-color: tomato;
min-height: 70vh;
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 1.5rem;
max-width:550px;
margin:0 auto;
column-gap: 0.5rem;
row-gap: 0.5rem;
border-radius: 1rem;
}
.box{
background-color: yellowgreen;
flex-grow:1;
display: grid;
place-content: center;
height: 10rem;
border-radius: 1rem;
white-space: nowrap;
}
.box-fullrow{
flex-basis: 100%;
}<div >
<div >
<p>Lorem ipsum dolor</p>
</div>
<div >
<p>Lorem, ipsum.</p>
</div>
<div >
<p>Lorem ipsum dolor sit amet consectetur hello</p>
</div>
<div >
<p>Lorem.</p>
</div>
<div >
<p>Lorem, ipsum.</p>
</div>
<div >
<p>Lor</p>
</div>
</div>