Как отобразить содержимое внутри div с помощью flexbox - PullRequest
Новая
       18

Как отобразить содержимое внутри div с помощью flexbox

0 голосов
/ 07 мая 2020

У меня проблемы с размещением моих предметов / карточек с помощью flexbox в моем первом приложении для реагирования.

Я помещаю div в свою карточку (см. Компонент Card) и помещаю display: flex; есть, но кажется, что каждая карта в моем выводе похожа на блок (столбец), и он сгибает только мой контент, а не все div моей карты, и я хочу, чтобы мой div был строкой.

Я пробую также flex-direction, но ничего не происходит. Есть идеи, как это сделать, ребята? 

//My code in my Main//

const data = [
  {id: 1, t: 'Card-1',  description: 'This is a Card-1'},
  {id: 2, t: 'Card-2', description: 'This is a Card-2'},
  {id: 3, t: 'Card-3', description: 'This is a Card-3'},
  {id: 4, t: 'Card-4', description: 'This is a Card-4'},
  {id: 5, t: 'Card-5', description: 'This is a Card-5'},
]

function Main () {
return (
<div>
<div className="main-container">

          {data.map(d => {
          return (
              <Card 
                key = {d.id}
                title = {d.t}
                description = 
{d.description}
              />
              )
          })}
          </div>  

</div>)

export default Main;


//end of my Main//

// My code in my Card //

import React from 'react';
import './style.css';

function Card ({ title, description }) {
  return (
  <div className="items">

      <h2>{title}</h2>
        <p>{description}</p>

  </div>
)
}

export default Card;
//

//The style.css of my Card //

div.items {
  display: flex;
  border: 2px solid darkgreen;
  margin: 15px;
  max-width: 250px;
  min-height: 200px;
  background-color: deeppink;
  flex-direction: column;
}

div.items h2 {
  flex: 1;
  text-align: center;
}

div.items p {
  flex: 1;
  text-align: center;
}

//ends here

Ответы [ 2 ]

0 голосов
/ 28 июля 2020

Я только что поместил гибкий дисплей в основной контейнер: 

.main-container{
  display: flex
}
.div-1 {
  flex: 1 //depends on your taste
}
0 голосов
/ 07 мая 2020

Вы хотите, чтобы все карточки отображались в строке, а содержимое внутри карточки должно быть единственным, что отображалось в столбце, я ошибаюсь? Если только это: 

.main-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
...