flexboxを使用したimgタグを縦に並べられません

２カラム内の画像を縦に並べたいのですが、
うまくできません。

試したこととして、flex-direction:columnなどを
使用しましたができませんでした。
２カラムレイアウトで使ったdisplay:flexとの併用はできないのでしょうか。

以下、コードと完成レイアウトの枠組みを添付いたしました。
よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>●○○○○●○○○○●○○○○</title>
6        <link rel="stylesheet" href="style02.css">
7    </head>
8    <body>
9        <div class="contents wrapper">
10            <div class="container">
11                <aside>
12                    <a href="#"><img class="aside-img" src="●○○○○●○○○○●○○○○.png">
13                    </a>
14                    <a href="#"><img class="aside-img" src="●○○○○●○○○○●○○○○.png">
15                    </a>
16                    <a href="#"><img class="aside-img" src="●○○○○●○○○○●○○○○.png">
17                    </a>
18                    <a href="#"><img class="aside-img" src="●○○○○●○○○○●○○○○.png">
19                    </a>
20                    <a href="#"><img class="aside-img" src="●○○○○●○○○○●○○○○.png">
21                    </a>
22                </aside>
23                
24                <article>
25                    ●○○○○●○○○○●○○○○●○○○○●○○○○
26                </article>
27            </div>
28        </div>
29        <footer>
30            <div class="container">
31                <p><small>&copy; 2020 testCopy</small></p>
32            </div>
33        </footer>
34    </body>
35</html>

CSS
1body {
2    margin: 0;
3    font-family: "Hiragino Mincho ProN";
4}
5a {
6    text-decoration: none;
7}
8.container {
9    width: 1170px;
10    margin: 0 auto;
11}
12.aside-img {
13    width: 180px;
14}
15.contents > .container {
16    display: flex;
17    flex-direction: column;
18    align-items: center;
19    padding: 30px 0 20px 0;
20}
21aside {
22    width: 14%;
23    color: dimgrey;
24    letter-spacing: 5px;
25    font-size: 14px;
26}
27article {
28    width: 82%;
29    color: dimgrey;
30    letter-spacing: 5px;
31    font-size: 14px;
32}
33footer {
34    height: 80px;
35    background-color: #f2f2f2;
36}
37footer p {
38    line-height: 80px;
39    letter-spacing: 5px;
40    color: dimgrey;
41    text-align: center;
42    font-size: 12px;
43}
44

ku__ra__ge

2020/08/11 06:39

質問文から、どのようなレイアウトにしたいのか分かりませんでした。画像で簡単に枠だけ描いたもので構わないので、目的とするレイアウトの提示をしてください。

user20

2020/08/11 07:17

ku_ra_ge　様ご連絡ありがとうございます。伝わりづらい内容で質問してしまい、申し訳ございませんでした。完成レイアウトの枠組みイメージ図を添付いたしました。 asideのimgを添付図のimg01〜05のように配置したいです。よろしくお願いいたします。

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

回答2件

ベストアンサー

イメージとしてはaside部分が左端でその右の水色部分にarticleが入るという認識でよろしいでしょうか？
containerのflex-directionをcolumnにするとasideとarticleが縦に並ぶことになります。
flex-directionをrowにしてください。

画像を縦に並べたいならasideにdisplay:flexを指定してflex-directionをcolumnにすればいいと思いますが、現在asideはcontainerの横幅1170pxに対して14%の横幅＝163.8pxになっています。
対してimgの横幅が180pxに指定されているので自動で段落ちして縦に並んでいるように見えます。
（むしろasideをはみ出してarticleのコンテンツ内容と重なると思いますがそういうデザインということでいいのでしょうか？）

投稿2020/08/11 07:41

gogoweb_ikeda

総合スコア1426

user20

2020/08/11 12:55

ご回答いただき、ありがとうございます。 asideが赤色箇所、articleが水色部分となります。また、imgの横幅180pxに関しては、こちらの誤りです。自動で段落ちしない値にしたいと思います。ご回答につきまして、追加でお聞きしたい点があるのですが、 CSSの「.contents > .container」箇所のflex-directionはcolumnではなくrowに変更、 asideにdisplay:flexを指定後、flex-direction:columnもasideに指定するということでしょうか。お手数おかけ致しますが、よろしくお願いいたします。

gogoweb_ikeda

2020/08/11 13:10

はい。イメージに近づけるならcontainerのalgin-itemsをflex-startにした方がいいでしょう。（centerのままだとコンテンツが中央に配置されます） asideの設定は上記の設定でもいいですが、asideの横幅を自動で段落ちしない値にするということは（現在は高さを指定していませんが）下まで画像が並んだら2段目に表示する予定なのでしょうか？その場合はflex-wrapまたはflex-flowをnowrapからwrapに変更してください。

user20

2020/08/11 23:36

丁寧なご回答、誠にありがとうございます。 flex-wrapも使用してみます。ベストアンサーとさせていただきます。

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

あっ、そうか。
aside と article は2カラムでレイアウトして、aside内の画像を縦並びということか。
だとしたら、下記の回答はスルーしてください。

提示のコードで縦並びはできていると思いますが。
あと、画像を左寄せにするなら、align-items: center;をalign-items: flex-start;に変更すればOKです。

css
1.contents > .container {
2    display: flex;
3    flex-direction: column;
4    align-items:  flex-start; /* 修正 */
5    padding: 30px 0 20px 0;
6}