AllDani.com AllDani.com - 23 days ago 9
CSS Question

CSS Flex not working

I want to apply some CSS to a

div
in my footer.

I added this CSS, but the HTML elements pile up against the left.

I want them to be
justified
, as the code states.

CSS:

.item {
justify-content: center;
}


HTML:

<div class="item">
<div>
<a href="example.com">
<img src="img.png" />
</a>
</div>
<div>
<a href="example.com">
<img src="img.png" />
</a>
</div>
<div>
<a href="example.com">
<img src="img.png" />
</a>
</div>
</div>​


Snippet:


.item {
justify-content: center;
}

<div class="item">
<div>
<a href="example.com">
<img src="img.png" />
</a>
</div>
<div>
<a href="example.com">
<img src="img.png" />
</a>
</div>
<div>
<a href="example.com">
<img src="img.png" />
</a>
</div>
</div>​





And this to my footer:

<div class="item">
<div>
<a href="example.com">
<img src="img.png" />
</a>
</div>
<div>
<a href="example.com">
<img src="img.png" />
</a>
</div>
<div>
<a href="example.com">
<img src="img.png" />
</a>
</div>
</div>​

Answer

The justify-content property only aligns the content/s of a given container if the container is a flexible one.

Add this to your CSS:

display: flex;

The full CSS code in the head section should be:

<style type="text/css">
    .flex-item {
        display: flex;
        justify-content: center; 
    }
</style>

Source: http://www.w3schools.com/cssref/css3_pr_justify-content.asp

Example: http://www.w3schools.com/cssref/playit.asp?filename=playcss_justify-content&preval=center

Fidde example: https://jsfiddle.net/L4tmgs18/1/