0

I know why it isn't possible to align center in flex wrapped container with flex-started items. As you know, if you try to whatever you do, it would make right space. What I know is that I could align those items to center using css-grid and media queries so far. However, I'm looking for another way, less annoying way.

For example, the structure is like below.

<Container>
    <Item/>
    <Item/>
    <Item/>
    <Item/>
    <Item/>
    <Item/>
    <Item/>
    <Item/>
</Container>

If you have any of ideas and tips, please let me know. Thank you.

I think I need to add more detail. It should be looked like this.

---- [] [] [] [] [] ---- 1row
---- [] []          ---- 2row
same spaces on right and left sides
Mingyu Jeon
  • 1,755
  • 5
  • 23
  • 40

1 Answers1

1

By using flex you can easily make items align center with less code. align-items: center; will help you to make center your element into middle of your screen.

.wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
<div class="wrapper">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</div>
Irin
  • 1,274
  • 1
  • 8
  • 9
  • Thanks for the reply, but it's not what I'm looking for. I edited my question cause I think I made you misunderstand what my question is. – Mingyu Jeon Jul 06 '19 at 08:30
  • to keep some space for left and right you need to use margin or padding. and align-item center will keep your text middle base on your viewport size – Irin Jul 06 '19 at 09:41
  • I know, but the problem is if I use flexbox and align-item center, last two items won't be flex-start, but the center. So, it's different from my expectation. – Mingyu Jeon Jul 07 '19 at 03:01