flex space-between doesn't work

Question

I'm trying to center horizontally (img - .info - img) using `space-between` property. I'm facing a little issue the `space-between` doesn't add spaces between elements. I know I'm missing something but I can't figure it out! HTML: ```

10:30 0-2

``` CSS: ``` a{ text-decoration: none; width: 98px; height: 40px; display: flex; flex-flow: row no-wrap; align-items: center; align-content: space-between; background-color: lightgray; } .info{ text-align: center; display: block; width: 40px; } ul{ list-style: none; } ``` http://codepen.io/eldev/pen/EaQJvR?editors=110

Accepted Answer

You are looking for `justify-content: space-between`.

Updated Example

MDN `justify-content`

The CSS `justify-content` property defines how a browser distributes available space between and around elements when aligning flex items in the main-axis of the current line. The alignment is done after the lengths and auto margins are applied, meaning that, if there is at least one flexible element, with `flex-grow` different than 0, it will have no effect as there won't be any available space.

```
a {
  text-decoration: none;
  width: 98px;
  height: 40px;
  display: flex;
  flex-flow: row no-wrap;
  align-items: center;
  justify-content: space-between;
  background-color: lightgray;
}
```

flex space-between doesn't work

Solution

Problem