FlexibleBoxで期待通りに並んでくれない

Question

.box {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.box-1 {
  width: 10%;
}

.box-2 {
  width: 20%;
}

.box-3 {
  width: 30%;
}

.box-4 {
  width: 40%;
}

.box-5 {
  width: 50%;
}

.box-6 {
  width: 60%;
}

.box-7 {
  width: 70%;
}

.box-8 {
  width: 80%;
}

.box-9 {
  width: 90%;
}

.box-10 {
  width: 100%;
}
.box-1,.box-2,.box-3,.box-4,.box-5,.box-6,.box-7,.box-8,.box-9,.box-10{
    padding: 1rem;
    border: 1px solid;
}

    <div class="box">
        <div class="box-1">box-1</div>
        <div class="box-1">box-1</div>
        <div class="box-1">box-1</div>
        <div class="box-1">box-1</div>
        <div class="box-1">box-1</div>
        <div class="box-1">box-1</div>
        <div class="box-1">box-1</div>
        <div class="box-1">box-1</div>
        <div class="box-1">box-1</div>
        <div class="box-1">box-1</div>
    </div>

横に並んで欲しいのに9個目の時点で折り返してしまいます。
paddingとborderが犯人なのはわかっていますがどう対処したらいいのですか？
グリッドシステムを実装するのが目標なのですが、flexはいまいちわからないので横並びを実装するためだけに使いたいのですが・・・問題を解決するにはflexなんとかを使わないとダメですよね?

Answer 1

サイズの指定に width ではなく、
flex (flex-grow flex-shrink flex-basis) を使用しては。
box-sizing: border-box で逃げる手もありますが、
せっかく flexbox を使うなら最初の方法がいいでしょう。
使用方法はググってください。

Comments

[退会済みユーザー]

ありがとうございます！

[garamond]

ちなみに `flex-basis` にパーセント指定は効かないようです。注意。

Answer 2

.boxにbox-sizing: border-box;追加してもダメですか？

Comments

[退会済みユーザー]

ありがとうございます!