flexbox equal width with certain number of item

Question

I'm trying to create a calendar layout using flexbox, which it will always has 7 item in a row. I'm stuck at making that without specifying a fixed with on parent.

https://jsfiddle.net/t4ay065h/

#calendar {
  display: flex;
  flex-flow: row wrap;
}

#calendar div {
  flex: 1;
  text-align: center;
}

possible duplicate of http://stackoverflow.com/questions/42801610/add-border-to-inline-block-equally — Ivin Raj, Mar 15 '17 at 06:38
not that, but this is duplicate of [Line break in multi-line flexbox](http://stackoverflow.com/q/29732575/2803565) — S.Serpooshan, Mar 15 '17 at 07:44
`flex: 1` is effectively equivalent to `flex-grow: 1`, which tells flex items to distribute the space on the line equally among themselves. This won't get items to wrap. You need to use `flex-basis` or `width`. — Michael Benjamin, Mar 15 '17 at 18:07

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

3

You can solve this by adding width to the child elements.

#calendar {
  display: flex;
  flex-flow: row wrap;
}

#calendar div {
  display: inline-block;
  margin:10px 0 0 10px;
  flex-grow: 1;
  text-align: center;
  width: calc(100% * (1/4) - 10px - 1px)
}

See this jsfiddle. For more reference refer this stackoverflow post how-to-force-a-flex-box-to-display-4-items-per-row.

edited May 23 '17 at 12:25

Community

1
1

answered Mar 15 '17 at 06:51

SabirAmeen

153
9

ur example of fiddle has nothing. – Mellisa Mar 15 '17 at 06:53
@Mellisa Updated – SabirAmeen Mar 15 '17 at 06:56

score 0 · Answer 2 · answered Mar 15 '17 at 06:49

0

i think you need to add ' flex-basis: 14.28%;' on your #calendar div like this

#calendar div {
  flex: 1;
  text-align: center;
  flex-basis: 14.28%;
}

answered Mar 15 '17 at 06:49

hameeda naz

287
3
13

score 0 · Answer 3 · answered Mar 15 '17 at 06:49

Try this code

#calendar {
  display: flex;
  flex-flow: row wrap;
}

#calendar div {
    text-align: center;
    margin: 10px 0 0 10px;
    height: 20px;
    flex-basis: calc(100%/8);
    background-color: red;
}

<div id="calendar">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
  <div>
    9
  </div>
  <div>
    10
  </div>
  <div>
    11
  </div>
  <div>
    12
  </div>
  <div>
    13
  </div>
  <div>
    14
  </div>
</div>

score 0 · Answer 4 · answered Mar 15 '17 at 06:49

As you are adding flex item property of 1, so by default it takes full width horizontally for each items according to the width of container and that's why flex:wrap doesn't works, instead add as below,

The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.

#calendar {
  display: flex;
  flex-flow: row wrap;
}

#calendar div {
  width:14%;
  text-align: center;
}

<div id="calendar">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
  <div>
    9
  </div>
  <div>
    10
  </div>
  <div>
    11
  </div>
  <div>
    12
  </div>
  <div>
    13
  </div>
  <div>
    14
  </div>
</div>

flexbox equal width with certain number of item

4 Answers4