CODEWITHSUNDEEP
javascripthtmlcssflexbox
Ibrahim Mohamed
Ibrahim Mohamed

Reputation: 45

display flex not working with my data I want display data side by side

I fetch data from API and I would to display data side by side. this data contain images and text. and when i use display flex but nothing change. so any help will be great

my html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="title">
        <h1>Api Data</h1>
    </div>
    <div class="contanier">

        <div id="contain">
           
        </div>
       </div>
    <script src="script.js"></script>
</body>
</html>

my CSS code:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#contain img{
    width:20rem;
    display:flex;
    border: 1px solid fuchsia;
    border-radius: 10px;
    
}

JavaScript code:

async function getMyData(){
     const response = await fetch(api)
     const myData = await response.json()
    //  printData(myData)

     console.log(myData)
    const Name = document.querySelector('#contain');
    Name.innerHTML = 
    `   
    ${myData.map(actor =>`<img src='${actor.img}'>` + `<h3>${actor.name}</h3>`)}
    ` 
    }

    

getMyData()

Upvotes: 1

Views: 409

Answers (1)

naxsi
naxsi

Reputation: 622

Put flex on row(parent) and not in image or child.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#contain {
    display:flex;
}

#contain img{
    width:20rem;
    display:flex;
    border: 1px solid fuchsia;
    border-radius: 10px;
    
}

Upvotes: 1

Related Questions