Я изучаю HTML и CSS, и у меня проблемы с CSS flex box так что у меня есть этот код
: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 class = "sub-hero" id = "sub-hero">
<div class = "buttons-all">
<div class = "slideshow-mid">
<img src = "img/bime-banner-site.png" alt = "cc" />
</div>
<div class = "buttons">
<div class = "button1">
<a href = "#" target = "_blank">
<img class = "home-fire" src = "img/home.svg" alt = "home" />
<img class = "fire1" src = "img/fire.svg" alt = "fire" />
<img class = "fire2" src = "img/fire.svg" alt = "fire" />
<img class = "fire3" src = "img/fire.svg" alt = "fire" />
<span>بیمه آتش سوزی</span>
</a>
</div>
<div class = "button2">
<a href = "#" target = "_blank">
<div class = "barbari-icons">
<img class = "truck" src = "img/truck.svg" alt = "truck" />
<img class = "plane" src = "img/plane.svg" alt = "plane" />
</div>
<span>بیمه باربری</span>
</a>
</div>
<div class = "button3">
<a href = "#" target = "_blank">
<img class = "car-normal" src = "img/normal-car.svg" alt = "car" />
<img class = "car-hitting" src = "img/hitting-car.svg" alt = "car" />
<img src = "img/explosion.png" alt = "explosion" class = "explosion" />
<img src = "img/shield.svg" alt = "shield" class = "shield" />
<span>بیمه اتومبیل</span>
</a>
</div>
<div class = "button4">
<a href = "#" target = "_blank">
<img
class = "home-heart"
src = "img/home-with-heart.svg"
alt = "home"
/>
<img class = "family" src = "img/family.svg" alt = "family" />
<span>بیمه عمر</span>
</a>
</div>
<div class = "button5">
<a href = "#" target = "_blank">
<img class = "ppl1" src = "img/ppl1.svg" alt = "ppl" />
<img class = "ppl2" src = "img/ppl2.svg" alt = "ppl2" />
<img src = "img/umbrella.svg" alt = "umbrella" class = "umbrella" />
<img src = "img/cloud.svg" alt = "cloud" class = "cloud" />
<span>بیمه مسئولیت</span>
</a>
</div>
<div class = "button6"></div>
<div class = "button7"></div>
<div class = "button8"></div>
</div>
</div>
</section>
</body>
</html>
и я хочу, чтобы мои кнопки складывались друг на друга вот так
но проблема в том, что я не знаю, как их установить и как установить ширину каждого столбца, чтобы требовалось только это количество места (например, я хочу, чтобы мои столбцы были 550 пикселей, и если 2 кнопки могут поместиться, тогда будет так и если не тогда только одна кнопка будет в этом столбце). теперь я видел много видео на YouTube, и это еще больше меня запутало Пожалуйста, помогите мне!
Я думаю, вы хотите установить в css следующее: .buttons-all .buttons { display: flex; flex-wrap: wrap; width: 550px; }
Вы хотите, чтобы, скажем, любая кнопка определенной ширины занимала целую строку, а любая кнопка меньшей ширины могла разделять строку (если есть место)? Из вашего описания непонятно, каковы размеры ваших кнопок. А порядок кнопок имеет значение?
например, у меня есть div шириной 500 пикселей, и у меня есть 2 кнопки шириной 300 пикселей, 200 пикселей, 490 пикселей. Я хочу, чтобы он автоматически помещал 300 пикселей и 200 пикселей в один столбец, а другую кнопку под ними. а если кнопок еще больше то проделайте то же самое с другими
Пожалуйста, прочтите Как спросить, особенно раздел под названием «Напишите заголовок, который резюмирует проблему». Текущее название — это всего лишь несколько ключевых слов.
Мы создаем родительский контейнер и используем flexBox внутри и устанавливаем его направление на ряд, что означает, что если есть еще дочерние элементы, всегда добавляйте их в одну строку, и мы используем flex-wrap: wrap;
, чтобы разрешить, если некоторые из полей внутри первой строки превышают ограничение ширины, которое он создаст. другой ряд.
display:flex;
flex-direction: row;
flex-wrap: wrap;
Затем в блоках мы используем flex-grow: 1
, что позволяет каждому гибкому дочернему элементу (.box) максимально увеличиваться внутри своих строк.
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 class = "container">
<div class = "box">
<p>Lorem ipsum dolor</p>
</div>
<div class = "box">
<p>Lorem, ipsum.</p>
</div>
<div class = "box">
<p>Lorem ipsum dolor sit amet consectetur hello</p>
</div>
<div class = "box">
<p>Lorem.</p>
</div>
<div class = "box">
<p>Lorem, ipsum.</p>
</div>
<div class = "box box-fullrow">
<p>Lor</p>
</div>
</div>
да, но работает ли это также с тегами (ссылка)? а что, если мой текст не такой длинный, но я хочу, чтобы эта кнопка заполнила всю строку? как расширяться в зависимости от экрана
ссылки действуют так же с текстом, и для вашего второго вопроса о всей строке я отредактировал код и добавил последний класс блока .box-fullrow
, чем применил этот класс a flex-basis:100%
, который в основном говорит этому блоку, иди и расширь 100% родительской ширины. Вот почему ему нужно создать еще один ряд, потому что с другими братьями и сестрами он не может расширяться на 100% @Arsenkho
Вопросы, требующие справки по коду, должны включать кратчайший код, необходимый для его воспроизведения в самом вопросе, желательно в Фрагмент стека. Хотя вы предоставили ссылку, если она станет недействительной, ваш вопрос не будет иметь значения для других будущих пользователей SO с той же проблемой. См. Что-то на моем сайте/примере не работает, могу я просто вставить ссылку.