横揃えをFlexboxで実現したい。

Question

以下のようにfloatを使ったclearfixで画像を左側、その右側に文字というレイアウトを実現しているのですが、これをflexboxで実現可能でしょうか？どのように記述すれば可能でしょうか？

[ HTML ]

<aside class="popular">
<h2>人気の記事</h2>
<ul>
<li><a href="#">
<img src="img/sakura-60x60.jpg" alt="">
<div class="text">花好きにおすすめの鑑賞スポット
<span>おでかけ</span>
</div>
</a></li>
<li><a href="#">
<img src="img/tel-60x60.jpg" alt="">
<div class="text">
通話アプリの便利な使い方
<span>スマホ＆タブレット</span>
</div>
</a></li>
<li><a href="#">
<img src="img/green-60x60.jpg" alt="">
<div class="text">
森林浴＆温泉を満喫するならココ！
<span>おでかけ</span>
</div>
</a></li>
<li><a href="#">
<img src="img/bag-60x60.jpg" alt="">
<div class="text">
世界各地の買い物袋
<span>雑貨</span>
</div>
</a></li>
</ul>
</aside>

/////////////////////////////////////////////////////////////////////////////////////////

[ CSS ]

.popular a::after {
content: "";
display: block;
clear: both;
}

.popular img {
width: 60px;
float: left;
}

.popular .text {
width: auto;
float: none;
margin-left: 60px;
padding-left: 15px;
}

.popular span {
display: block;
font-size: 12px;
color: #666666;
}

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

.popular a {
display: flex;
}/* 追加 */
/*
.popular a::after {
content: "";
display: block;
clear: both;
}
*//* 削除 */
.popular img {
width: 60px;
/*float: left;*//* 削除 */
}

.popular .text {
/*width: auto;
float: none;
margin-left: 60px;*//* 削除 */
padding-left: 15px;
}

.popular span {
display: block;
font-size: 12px;
color: #666666;
}
```**動くサンプル：**[https://jsfiddle.net/y2xbntmz/](https://jsfiddle.net/y2xbntmz/)

---

【よこ並びのCSS。フレキシブルボックスレイアウトでよこ並び】
[https://lopan.jp/flexible-layout/](https://lopan.jp/flexible-layout/)

【よこ並びのCSS。】
[http://lopan.jp/layout/](http://lopan.jp/layout/)

【段組みのCSS。】
[https://lopan.jp/layout2/](https://lopan.jp/layout2/)

Comments

[KonbanWatanabe]

ul や li に display: flex; を 記述してダメだ～ダメだ～と悩んでおりましたが、この場合 a に記述すればよかったのですね。
解答の通りに書き換えてみたところ見事に解決いたしました。
本当にありがとうございます。
参考サイトも熟読して精進いたします。