Размещение элементов - Flex

Question

3 контейнера одинаковой длины, хочу понять, как разместить кнопку в нижней части контейнера на все три одном уровне. Это можно сделать с помощью относительного позиционирования, но я хочу понять как это сделать с помощью флексов или каким-то другим способом.

*{
  margin: 0;
  padding: 0;
}

#sail{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: center;
  padding-top: 80px;
  gap: 1rem;
  
}

.product{
  width: 25%;
  border: 2px solid black;
  text-align: center; 
  /*position: relative;*/
}

.product-pages{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
  
}

.product-page{
  margin: 20px;
  margin-bottom: 50px;
  
}

h3{
  text-align: center;
  padding: 5px;
  background: #dcd5d5;
  font-size: 1.5rem;
}

.product-price{
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 10px;
}



button{
  width: 50%;
  font-weight: bold;
  font-size: 1rem;
  background: #a9e5db;
  color: #326;
  border: none;
  padding: 5px;
  margin-bottom: 10px;
  text-transform: uppercase; 
 /* position: absolute;
  bottom: 0;*/
  
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <container id="sail">
       <article class="product">
     <h3>TENOR TROMBONE</h3>
      <div class="product-pages">
      <div class="product-page">
      <span class="product-price">
                <span class="product-price">600</span>
                <span class="product-rub">$</span>
              </span>
      <p>Духовой инструмент, изготовляемый из меди, способный воспроизводить звуки басово-тенорового регистра.</p>
      </div>
      <button>Выбрать</button>
    
        </div>
    </article>
    <article class="product">
     <h3>BASS TROMBONE</h3>
      <div class="product-pages">
      <div class="product-page">
           <span class="product-price">
                <span class="product-price">900</span>
                <span class="product-rub">$</span>
              </span>
      <p> С большим отверстием, раструбом и мундштуком для облегчения игры в низких регистрах, и обычно двумя клапанами для заполнения недостающего диапазона непосредственно над тонами педалей.</p>
        </div>
      
      <button>Выбрать</button>
      </div>
    </article>
    <article class="product">
      <h3>VALVE TROMBONE</h3>
      <div class="product-pages">
      <div class="product-page">
      <span class="product-price">
                <span class="product-price">1200</span>
                <span class="product-rub">$</span>
              </span>
      <p>Духовой инструмент семейства тромбонов, который имеет набор клапанов для изменения высоты тона вместо (или в дополнение к) ползуна.</p>
        </div>
    
      <button>Выбрать</button>
    </div> 
    </article>
 </container> 
</body>

</html>

Answer 1

Можно таким способом https://codepen.io/GRCR13/pen/MWBrNNm

.wrapper {
  display: flex;
  justify-content: space-evenly;
}

.product {
  display: flex;
  width: 25%;
  border: 2px solid black;
  text-align: center;
  flex-direction: column;
}

.product_title {
  text-align: center;
  padding: 5px;
  background: #dcd5d5;
  font-size: 1.5rem;
}

.product_price {
  font-size: 1.3rem;
  font-weight: bold;
  margin: 15px;
}

.product_description {
  margin-bottom: 30px;
}

.product_button {
  margin-top: auto;
  width: 50%;
  font-weight: bold;
  font-size: 1rem;
  background: #a9e5db;
  color: #326;
  border: none;
  padding: 5px;
  margin-bottom: 10px;
  text-transform: uppercase;
  align-self: center;
  display: flex;
  justify-content: center;
}

<div class="wrapper">
  <div class="product">
    <div class="product_title">TENOR TROMBONE</div>
    <div class="product_price">600 $</div>
    <div class="product_description">Духовой инструмент, изготовляемый из меди, способный воспроизводить звуки басово-тенорового регистра.</div><button class="product_button">Выбрать</button>
  </div>
  <div class="product">
    <div class="product_title">BASS TROMBONE </div>
    <div class="product_price">900 $</div>
    <div class="product_description">С большим отверстием, раструбом и мундштуком для облегчения игры в низких регистрах, и обычно двумя клапанами для заполнения недостающего диапазона непосредственно над тонами педалей.</div>
    <button class="product_button">Выбрать</button>
  </div>
  <div class="product">
    <div class="product_title">VALVE TROMBONE</div>
    <div class="product_price">1200 $</div>
    <div class="product_description">Духовой инструмент семейства тромбонов, который имеет набор клапанов для изменения высоты тона вместо (или в дополнение к) ползуна. </div><button class="product_button">Выбрать</button>
  </div>
</div>

БЛОГ НА HUSL

Размещение элементов - Flex

Ответы (1 шт):