最近有頁面是像這樣的：
左右並排的圖和字，兩邊同高，需要讓文字的行與行之間延展讓兩邊看起來幾乎一樣高如果用 CSS 去調整行寬也不是不行，但並不 responsive ，這時如果你有用 bootstrap 就可以很容易地達成。
Flex
首先我們的段落大概會像這樣：
<div class="row">
<div class="col-md-4"> // 圖片
<img src="...">
</div>
<div class="col-md-8"> // 文字段落
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>可以看得出來，左邊是圖，右邊是字。圖會因為 col-md-4 而有一個固定的高度，那我們希望右邊的字也能自動的變動。
由於我們希望文字是橫向書寫，所以先寫成這樣：
<div class="col-md-8 d-flex flex-column"> // 文字段落這樣他就會採用 flex 並且是垂直排列了。
Justify Content
然後是調整文字內容，我們要的是文字段落上下展開到與圖片同高，但又不要貼住上下邊。
<div class="col-md-8 d-flex flex-column justify-content-around"> // 文字段落這樣文字段落就會很好的展開了。
Unordered List
我們的 unordered list 是長這樣：
<div class="row">
<div class="col-md-6"> // 圖片
<img src="...">
</div>
<div class="col-md-6"> // 文字段落
<ul> // unordered list
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>一開始也是一樣的：
<div class="col-md-6 d-flex flex-column justify-content-around"> // 文字段落這樣才能把裡面的 ul 給上下展開。
因為需要把 ul 用 flex-fill 給展開，所以又需要使用 d-flex ：
<ul class="d-flex flex-column flex-fill"> // unordered list但這時 li 們並不會彼此拉開，所以要用 my-auto 去拉開他們：
<li class="my-auto">...</li>
<li class="my-auto">...</li>
<li class="my-auto">...</li>這樣就完成了。
