Comments on: justify-content

By: David Spector

David Spector — Fri, 21 May 2021 16:20:17 +0000

This is so frustrating. The effect of display:flex and justify-content is not just to align small items along the major axis, but also to wrap along the cross axis. I can’t find any information about why items are not flush together along the cross axis when they are wrapped!

By: joe

joe — Tue, 06 Apr 2021 09:07:23 +0000

I'm trying to obtain the same result with justify-content as I get with {align-items:stretch} Any idea how to accomplish this safely across devices? Ideally I'd need to also be able to override {justify-content: flext-start} for example. I've been using {justify-content: stretch} but the results are mixed.

By: Kate

Kate — Mon, 05 Aug 2019 10:23:40 +0000

Hi, I think syntax section is a bit misleading as justify-content is flex container property, not flex-item, so should be

.flex-container {
justify-content: center;
}

instead of

.flex-item {
justify-content: center;
}

By: Mat

Mat — Wed, 27 Mar 2019 14:59:59 +0000

If we define a flex-fallback with floats, a .clearfix on the wrapper-element can be necessary. But the usual pseudo-element clearfix causes problems with the justify-content: space-between declaration, cause it reacts as a additional flex-element. I.e. the space will distributet unevenly. In this case we have to distribute the space manually (margin-x: auto;) or use another clearfix-method, which can have other issues. Any other workarounds for that?

By: ceving

ceving — Mon, 02 Oct 2017 16:46:39 +0000

The option is not an attribute of a flex-item, but of the flex container.

By: Matthew Neal

Matthew Neal — Sat, 23 Sep 2017 01:54:49 +0000

space-evenly currently doesn’t work on Safari on iPhone 6 :(

By: Christa

Christa — Mon, 28 Aug 2017 02:45:58 +0000

In reply to Patrick Ryll. I'm using Chrome too, and space-evenly works great. I hope the other browsers support it soon, as I much prefer that look over space-around in my current project.

By: Crystal Gardner

Crystal Gardner — Thu, 17 Aug 2017 15:29:04 +0000

In reply to Patrick Ryll. It also works in Chrome. I'm on version 60.0.3112.90 and justify-content: space-evenly works just fine.

By: Chris Coyier

Chris Coyier — Mon, 07 Aug 2017 00:14:38 +0000

In reply to Patrick Ryll. As of that date, yep, you're correct.

By: Patrick Ryll

Patrick Ryll — Sun, 06 Aug 2017 04:08:53 +0000

I am pretty sure that as of today (August 4th, 2017), justify-content: space-evenly is not yet available. It seems to work in Firefox; however, I can’t find anything that explictly says this. Can anyone confirm this? Thanks.

By: 小小

小小 — Thu, 25 Aug 2016 02:30:59 +0000

In reply to Glynn Phillips. have a test

By: Mark

Mark — Mon, 14 Mar 2016 20:09:17 +0000

Is it just me or is the term ‘justify’ completely wrong here? In a typographic context, ‘Justified’ text is text is text that is adjusted so that the first and last items on a line are anchored left and right with the items in the middle distributed evenly.

The ‘space-between’ and ‘space-around’ properties would probably accurately show this in action but ‘flex-start’ and ‘flex-end’ properties have absolutely nothing to do with ‘justifying’.

It really bugs me when clients ask for copy to be ‘left justified’ when they actually mean ‘left aligned’.

Just me?

By: Marc

Marc — Thu, 11 Feb 2016 11:01:37 +0000

Hi !
I tried to use “justify-content” on Sublime Text 2, but it seems not to work.
Do I have to upgrade my ST2 or is it simply impossible ?
Thanks in advance.

By: RRKUK

RRKUK — Tue, 12 Jan 2016 11:53:05 +0000

for better understanding of “display:flex” property further checkout this. I found this was more easy to understand by playing a game with CSS editor.
http://flexboxfroggy.com/

By: Ken

Ken — Fri, 25 Dec 2015 19:08:03 +0000

It doesn’t seem to work in WinJs at all.