【CSS】ボックス内で画像を下に合わせたい

##現状
下記のように、タイトルの長さに合わせて画像の部分が上下をしてしまうので画像を一律で下に揃えたいです。
アドバイスお願いします。

##現状

html
1    <div class="col-lg-2">
2      <div class="gymbox">
3        <div class="gymtitle">
4          <%= link_to (gym.name), gym_path(gym) %>
5        </div>
6        <div class="gympicture">
7          <%= image_tag gym.picture.first.url %>
8        </div>
9      </div>
10    </div>

##現状

css
1.gymbox {
2  height: 150px;
3  width: auto;
4  text-align: center;
5  background: #fff;
6  padding : 10px;
7  box-shadow: 0 2px 5px #ccc;
8  margin : 10px;
9}
10
11.gympicture img {
12width: 80%;
13bottom : 10px;
14}
15
16.gympicture {
17bottom : 10px;
18}
19

行動規範の内容に同意します

回答1件

ベストアンサー

画像を一律で下に揃えたいです。

画像の下辺を、.gymbox内の下辺に揃えたいという意味だと理解しました。
(画像の上辺や、上方向の余白はバラバラでも可、という理解)

こちらでいかがでしょうか?

CSS
1.gymbox {
2  display: flex;
3  flex-direction: column;
4}
5.gympicture {
6  margin-top: auto;
7}
8.gympicture img {
9  display: block; /* 本件と直接関係ないですが、inlineのままだと上下に微妙にズレるため指定 */
10}