flexboxを使った余白固定の方法

flexboxで両端ぞろえ、アイテム間の余白寸法については固定したい際のCSSの参考です。
justify-content:space-betweenではいけないのか・・・と思うところではありますが、これのメリットは、両端ぞろえでありながら左詰めにできることですね♪

sample

sample text

sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text

sample text

sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
sample text sample text sample text sample text sample text

html

<div class="inner">
    <div class="box_block">
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>sample text sample text sample text sample text sample text</p>            
        </div>
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>
                sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text<br>
                sample text sample text sample text sample text sample text<br>
            </p>
        </div> 
    </div>
    <div class="box_block block_3column">
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>sample text sample text sample text sample text sample text</p>
        </div>
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>
                sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text<br>
                sample text sample text sample text sample text sample text<br>
            </p>
        </div>
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>sample text sample text sample text sample text sample text</p>
        </div>
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>sample text sample text sample text sample text sample text</p>
        </div>
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>
                sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text<br>
                sample text sample text sample text sample text sample text<br>
            </p>
        </div>
    </div>
    <div class="box_block block_4column">
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>sample text sample text sample text sample text sample text</p>
        </div>
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>
                sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text<br>
                sample text sample text sample text sample text sample text<br>
            </p>
        </div>
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>sample text sample text sample text sample text sample text</p>
        </div>
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>
                sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text<br>
                sample text sample text sample text sample text sample text<br>
            </p>
        </div>
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>sample text sample text sample text sample text sample text</p>
        </div>
        <div class="box_item">
            <img src="forest-931706.jpg" alt="">
            <p>sample text</p>
            <p>
                sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text<br>
                sample text sample text sample text sample text sample text<br>
            </p>
        </div>

</div> 
</div>

css

コードのポイント

■flexboxの親要素(box_block)に対して、widthを余白分大きく設定する。

■flexboxのアイテム要素(box_item)のwidthをcalcを使って、余白分少なくした上で、margin-right:余白サイズ；を設定。
※widthを50px、paddingで余白調整でもよかったのですが、アイテム背景にヌリを入れたいときを考えると、こっちの方が汎用性あるかなと。
※3カラム、4カラムにするときもcalc使って、余白分だけひけばOK。

■flexboxの親要素(box_block)で、widthを余白分大きくしたが、余白分は、表示不要なので、overflow: hidden;で非表示にする。