Как я могу складывать кнопки друг над другом, используя flex box

Я изучаю 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>

и я хочу, чтобы мои кнопки складывались друг на друга вот так

Как я могу складывать кнопки друг над другом, используя flex box

но проблема в том, что я не знаю, как их установить и как установить ширину каждого столбца, чтобы требовалось только это количество места (например, я хочу, чтобы мои столбцы были 550 пикселей, и если 2 кнопки могут поместиться, тогда будет так и если не тогда только одна кнопка будет в этом столбце). теперь я видел много видео на YouTube, и это еще больше меня запутало Пожалуйста, помогите мне!

Вопросы, требующие справки по коду, должны включать кратчайший код, необходимый для его воспроизведения в самом вопросе, желательно в Фрагмент стека. Хотя вы предоставили ссылку, если она станет недействительной, ваш вопрос не будет иметь значения для других будущих пользователей SO с той же проблемой. См. Что-то на моем сайте/примере не работает, могу я просто вставить ссылку.

Paulie_D 05.04.2022 17:37

Я думаю, вы хотите установить в css следующее: .buttons-all .buttons { display: flex; flex-wrap: wrap; width: 550px; }

ShamPooSham 05.04.2022 17:37

Вы хотите, чтобы, скажем, любая кнопка определенной ширины занимала целую строку, а любая кнопка меньшей ширины могла разделять строку (если есть место)? Из вашего описания непонятно, каковы размеры ваших кнопок. А порядок кнопок имеет значение?

A Haworth 05.04.2022 17:50

например, у меня есть div шириной 500 пикселей, и у меня есть 2 кнопки шириной 300 пикселей, 200 пикселей, 490 пикселей. Я хочу, чтобы он автоматически помещал 300 пикселей и 200 пикселей в один столбец, а другую кнопку под ними. а если кнопок еще больше то проделайте то же самое с другими

Arsen kho 05.04.2022 18:20

Пожалуйста, прочтите Как спросить, особенно раздел под названием «Напишите заголовок, который резюмирует проблему». Текущее название — это всего лишь несколько ключевых слов.

Heretic Monkey 05.04.2022 18:49
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
5
41
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мы создаем родительский контейнер и используем 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>

да, но работает ли это также с тегами (ссылка)? а что, если мой текст не такой длинный, но я хочу, чтобы эта кнопка заполнила всю строку? как расширяться в зависимости от экрана

Arsen kho 05.04.2022 18:39

ссылки действуют так же с текстом, и для вашего второго вопроса о всей строке я отредактировал код и добавил последний класс блока .box-fullrow, чем применил этот класс a flex-basis:100%, который в основном говорит этому блоку, иди и расширь 100% родительской ширины. Вот почему ему нужно создать еще один ряд, потому что с другими братьями и сестрами он не может расширяться на 100% @Arsenkho

UPinar 05.04.2022 18:46

Другие вопросы по теме