align div elements in div container using flexbox

Question

can you help me here in this issue? I have this div which contains 7 divs. Currently, using the flex box, I get this output

However, what I want to happen should be like this:

Below are some codes that I roughly have

.Container {
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
.Items {
  margin-bottom: 7px;
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 12px;
  line-height: 10px;
  border: 0px;
  padding-bottom: 7px;
  align-self: center;
}

<div class="Container">
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
</div>

UPDATE Thank you for those who replied. However, I forgot to add these things.

I want that the icons be spread out evenly that's why I need the justify-content: space-around
I also want that the icons be horizontally at the center that's why I used the align-items: center; align-content: center;

The problem is this: Is it possible to have both?

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

Instead of justify-content: space-around use justify-content: flex-start.

Demo: http://jsfiddle.net/rsvmsku6/

Update (based on comments):

For guidance creating a grid that is horizontally centered, but the child elements are left-aligned, see these posts:

edited May 23 '17 at 12:07

Community

1
1

answered Oct 29 '15 at 12:18

Michael Benjamin

346,931
104
581
701

You want the icons aligned-left with space in between (like in your second image), but you want the container centered horizontally on the screen? – Michael Benjamin Oct 30 '15 at 00:24

Dominic · Answer 2 · 2015-10-29T12:29:57.237

0

Remove the following css from Container:

justify-content: space-around;

edited Oct 29 '15 at 12:29

answered Oct 29 '15 at 12:17

Dominic

62,658
20
139
163

score 0 · Answer 3 · answered Oct 29 '15 at 12:17

0

justify-content: space-around;

That's your problem. If you remove that line, the items will display as you want them too

JSFiddle

space-around:

items are evenly distributed in the line with equal space around them

flex-start (default)

items are packed toward the start line

answered Oct 29 '15 at 12:17

SlashmanX

2,489
18
16

Don't know why this got a downvote so I'll balance you out – Dominic Oct 30 '15 at 11:36

score 0 · Answer 4 · answered Oct 29 '15 at 12:17

You dont have a need for some of the elements.

align-items
align-content

and you also need to set the justify-content to be flex-start which will always set it to the left.

.Container {
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 320px;
}
.Items {
  margin-bottom: 7px;
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 12px;
  line-height: 10px;
  border: 0px;
  padding-bottom: 7px;
  align-self: center;
}

<div class="Container">
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
  <div class="Items">
    <img height="40px" width="40px" src="http://img10.deviantart.net/af75/i/2014/242/1/9/kawaii_potato_by_hashtagpony-d7xbs1t.png" />
    <br/>
    <span>Icon 1</span>
  </div>
</div>

align div elements in div container using flexbox

4 Answers4