Giving last flex item a 0 margin

[toolman]

Hi,

I have the following code:

.row-colours-patterns{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	
	.row-colours-patterns .pattern{
		margin-right: 15px;
		width: 180px;
		height: 180px;
	}
	
	.pattern-blue{
		background: #334876
	}
	
	.pattern-grey{
		background: #e3e3e3
	}

<div class="row-colours-patterns">
	<div class="col pattern pattern-blue"></div>
	<div class="col pattern pattern-grey"></div>
		<div class="col pattern pattern-blue"></div>
	<div class="col pattern pattern-grey"></div>
		<div class="col pattern pattern-blue"></div>
	<div class="col pattern pattern-grey"></div>
	<div class="col pattern pattern-blue"></div>
	<div class="col pattern pattern-grey"></div>
		<div class="col pattern pattern-blue"></div>
	<div class="col pattern pattern-grey"></div>
		<div class="col pattern pattern-blue"></div>
	<div class="col pattern pattern-grey"></div>
</div>

At the moment, the items flow onto a new line which is fine, but each one carries the margin-right. Is there a way to calculate and give the last item no matter when it breaks onto a new line a margin-right: 0 so they are all centered?

Hope that makes sense!

Thanks

[coothead]

Hi there toolman,

have you not considered just changing this…

	.row-colours-patterns .pattern{
		margin-right: 15px;
		width: 180px;
		height: 180px;
	}

…to this…

	.row-colours-patterns .pattern{
		margin: 0 8px;
		width: 180px;
		height: 180px;
	}

coothead

[toolman]

Nice thinking! Thanks

[coothead]

 
 
        No problem, you’re very welcome.
 
 
        coothead