Как используя flexbox поставить три блока в один ряд?

Question

[Петр Волханов]

Есть страница. Есть три блока - описание товара, фото, и блок цена и добавить корзину. Сейчас используется такой CSS:

#button-cart{
  width: 20%;
}
.product-tabs{
  width: 30%;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 13%;
  left: 0;
}

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

#product{
  display: flex;
  flex-direction: column;
}

@media all and (max-width:610px){
.product-tabs{
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
#button-cart{
  width: 100%;
}
}

Как используя flexbox поставить три блока в один ряд? Описание товара, затем картинка и последний блок "цена и добавить в корзину.

Answer 1

[Петр Волханов]

#button-cart{
  width: 20%;
}
.product-tabs{
  width: 30%;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 22%;
  left: 0;
}

.product-info {
  display: flex;
  margin-left: 30%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#product{
  display: flex;
  flex-direction: column;
}

@media all and (max-width:610px){
.product-tabs{
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
#button-cart{
  width: 100%;
}
}

Answer 2

[Сергей Горячев]

flexbox.help

Comments

[Александр Ф]

Добавлю в свою копилку)))