【CSS/html】inline-blockを改行する方法

inline-blockはインライン要素とブロック要素の特徴を合わせ持った要素です。

インライン要素はbrで改行するし、ブロック要素は自動で改行されます。

「inline-blockはどうやって改行するの？」

display:inline-blockを改行する方法を解説します。

【基本】親要素に入りきらないとき改行される

inline-blockは親要素の幅を超えるとき改行されます。改行されるときはその要素単位で改行されます。

<style>
.example{
    border: 1px solid #333;
    background: #cfeafa;
    padding: 10px;
}
.example>div{
    display: inline-block;
    padding: 10px;
    margin: 10px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example">
    <div>inline-block</div>
    <div>inline-block</div>
    <div>inline-block</div>
    <div>inline-block</div>
    <div>inline-block</div>
    <div>inline-block</div>
</div>

【inline-blockの中で改行】br

inline-block要素内で改行するには改行したい任意のテキスト箇所に<br>をいれます。

html(CSSは同じ)

<div class="example">
    <div>inline<br>-block</div>
    <div>in<br>line-block</div>
    <div>inline-block</div>
    <div>inline-block</div>
    <div>inline-<br>block</div>
    <div>inline-block</div>
</div>

【inline-blockの後で改行】br

inline-blockの後に<br>を入れるとinline-block単位で改行できます。

html(CSSは同じ)

<div class="example">
    <div>inline-block</div><br>
    <div>inline-block</div><br>
    <div>inline-block</div><br>
    <div>inline-block</div><br>
    <div>inline-block</div><br>
    <div>inline-block</div>
</div>

【inline-blockの後で改行】divで囲う

inline-blockをdivで囲うとinline-block単位で改行できます。

囲ったdivはブロック要素であり、ブロック要素は縦に並ぶためです。

html

<style>
.example2{
    border: 1px solid #333;
    background: #cfeafa;
    padding: 10px;
}
.example2>div>div{
    display: inline-block;
    padding: 10px;
    margin: 10px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example2">
    <div><div>inline-block</div></div>
    <div><div>inline-block</div></div>
    <div><div>inline-block</div></div>
    <div><div>inline-block</div></div>
    <div><div>inline-block</div></div>
    <div><div>inline-block</div></div>
</div>

display:flexを使う

要素の幅を内容量に合わせた上で改行させたい（縦に並べたい）のであればdisplay:flexを使う方法があります。

display:inline-blockは使いません。

brを使ったりdivでさらに囲う必要はありません。

<style>
.example3{
    /*コレ*/display: flex;
    /*コレ*/flex-direction: column;
    /*コレ*/align-items: flex-start;
    border: 1px solid #333;
    background: #cfeafa;
    padding: 10px;
}
.example3>div{
    padding: 10px;
    margin: 10px;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example3">
    <div>ブロック</div>
    <div>ブロック</div>
    <div>ブロック</div>
    <div>ブロック</div>
    <div>ブロック</div>
    <div>ブロック</div>
</div>

「display: flex」は子要素を横並びにしますが、「flex-direction: column」を指定すると縦並びになります。

さらに「align-items: flex-start」を指定すると内容量に合わせた幅になります。

【まとめ】inline-blockを改行する方法

• 要素の後にbr
• 要素をdivで囲う
• 親にdisplay:flex; flex-direction:column; align-items:flex-startを指定する

以上、inline-blockを改行する方法でした。