0

Scenario :

  • I have a list of inline-block elements that I'm able to center.
  • But when the number of elements don't fit on a line,
    Todo : I would like them to be justified to the left.
  • I've been messing with flex boxes and other things, but I seem to only be able to do one at a time (center the entire element or justify the elements left).

Anyone know how to accomplish this?

Below is the jsfiddle I've been messing around with, as well as some images that are hopefully helpful.

What I have: what I have

What I want: what I want

https://jsfiddle.net/bonbonlemon/bu1y93Ls/52/

Code:

jsx:

<div>
  <button onClick={this.handleClick}>Increase!</button>
  <div id="items-box">
    { items.map((item, idx) => (
      <div className="item-box" key={idx}>{item}</div>
    ))}
  </div>
</div>

CSS:

#items-box {
  margin: 50px;
  text-align: center;
}

.item-box {
  display: inline-block;
  height: 100px;
  width: 110px;
  margin-right: 15px;
  margin-top: 20px;
  outline: thin solid black;
}
Abhishek Kumar
  • 2,501
  • 10
  • 25
Stephen R Chen
  • 111
  • 2
  • 8

1 Answers1

-1

Try to use flexbox:

https://jsfiddle.net/hapu8ny2/

html,
body {
   min-height: 100%;
}

#items-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap
}

.item-box {
  display: flex;
  min-height: 100px;
  min-width: 110px;
  margin-right: 15px;
  margin-top: 20px;
  outline: thin solid black;
}

Note: see i use min-height and min-width instead

Efeyabel
  • 508
  • 4
  • 18