align-items with justify content not working properly

Question

I want to make the 2 li in the last row, next to each other, and not in the middle. I am using flex, so that it can be responsive in smaller screens.

http://codepen.io/anon/pen/VexZQK

ul {
  display: flex;
  margin: 0 auto;
  padding: 0;
  width: 800px;
  list-style: none;
  flex-wrap: wrap;
  background-color: red;
  justify-content: space-between;
}

li {
  display: flex-item;
  padding: 15px 0;
  transition: transform .5s ease-in-out;
  transform: scale(1);
  margin: 10px auto;
  background-color: blue;
  width: 150px;
}

not sure it is a duplicate, if desire output is : http://codepen.io/gc-nomade/pen/PZeYdE then it doesn't require flex. If it does, a pseudo-element :after will do — G-Cyrillus, Jan 27 '16 at 12:22

score 0 · Answer 1 · answered Jan 27 '16 at 11:54

0

you can try this one:\

ul {
  display: flex;
  margin: 0 auto;
  padding: 0;
  width: 800px;
  list-style: none;
  flex-wrap: wrap;
  background-color: red;
  justify-content: space-between;
  display:inline-block;
}

li {
  display: flex-item;
  padding: 15px 0;
  transition: transform .5s ease-in-out;
  transform: scale(1);
  margin: 10px auto;
  background-color: blue;
  width: 150px;
  display:inline-block;
}

DEMO HERE

answered Jan 27 '16 at 11:54

Ivin Raj

3,308
2
23
55

Why? downvote Sir Can u Explain? – Ivin Raj Jan 27 '16 at 12:20
no idea, looks fine to me unless it is not output desired. to me flex is not even needed – G-Cyrillus Jan 27 '16 at 12:23
okay thanks sir @GCyrillus – Ivin Raj Jan 27 '16 at 12:31

align-items with justify content not working properly

1 Answers1