0
 justify-content: space-evenly;

works fine but not getting expected output

What Actually I Want to achieve is

enter image description here

And Here is what I can create

enter image description here

Let me show you my code

function App() {
    return (<div className="App">
        <div className={'card'}>
            // My Stuff
            <Footer/>
        </div>
    </div>);
}


function Footer() {
    return (<div className={'footer'}>
        <img src={TwitterIcon}/>
        <img src={FaceBookIcon}/>
        <img src={InstagramIcon}/>
        <img src={GithubIcon}/>
    </div>)
}
body {
    margin: 0;
    background-color: #23252C;
}

.App {
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: 100vh;*/
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: #23252C;
    padding-bottom: 0px;
}

.card {
    border-radius: 08px;
    overflow: hidden;
    background-color: #1A1B21;
    max-width: 28%;
    padding-bottom: 0px;
}

.footer {
    background-color: #161619;
    padding: 15px 10px 15px 10px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
}
Pratik Fagadiya
  • 1,195
  • 7
  • 21

3 Answers3

2

There is a property that allows you to define the size of the space between the lines and between the columns, whether in flexbox or grid. So you could do something like this:

Align and center all your img elements of your Footer component to the center horizontally and use the gap to increase the spacing only between them.

Here is an example that is assembled:

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

.App {
    width: 300px;
}

.footer {
    padding: 15px 10px;
    background-color: #000;

    gap: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

span {
    min-width: 30px;
    min-height: 30px;
    background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="App">
        <div class="card">
            <footer class="footer">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </footer>
        </div>
    </div>
</body>
</html>

The mentioned property is the 'gap'

Yuri Aguiar
  • 36
  • 4
0

You are currently setting the contents of the footer to be spaced evenly across the whole width and if I understand you correctly you want the contents to be spaced evenly across a part of the footer width. If this is correct you can either set footer to have a certain percent width using for example "width: 75%" which will set the footer to be 75% of the width of the parent element or you can set a margin for the left and right side using for example "margin-left: 50px" and "margin-right: 50px" which will mean that the footers content will be 100px less wide than the parent element but still centered.

LazyJ
  • 386
  • 1
  • 7
0

Wrap your images inside another div within the footer. Set the footer display to justify-content: center and display:flex; align-items:center; justify-content: space-evenly on the new div that contains the images. Then set the width on the new div to less than 100% to bring them more towards the center.

Hope this helps!

David-T-John
  • 16
  • 2