CODEWITHSUNDEEP
javascriptcssreactjsflexboxcss-position
Zowy
Zowy

Reputation: 64

How to display the contents inside a div using flexbox

I'm having trouble in positioning my items/card using flexbox in my first react app.

I put a div in my card (See the Card component) and I put a display: flex; there but it seems that every card in my output is like a block (column like) and it flex only my content, not the every divs of my card, and what I want is my div to be a row.

I try also flex-direction, but nothing happens, Any idea on how to make that guys?

//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

Upvotes: 0

Views: 1249

Answers (2)

Zowy
Zowy

Reputation: 64

I did just put a flex display in main container:

.main-container{
  display: flex
}
.div-1 {
  flex: 1 //depends on your taste
}

Upvotes: 1

Marco Edoardo Duma
Marco Edoardo Duma

Reputation: 71

Do you want all the cards display in a row, and the content inside the card has to be the only thing displayed in a column, am I wrong? If it's only that:

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

Upvotes: 0

Related Questions