ブログ

display:flexが効かない・横並びにならない

親要素が改行可能で子要素が幅100％になっている

display:flexが効かない・横並びにならない原因のひとつは横並びになる条件を満たしてないからです。
幅を設定していない場合、子要素の内容によって幅が自動で広がります。この状態で改行を許可している場合、横並びにならず改行されます。
修正方法.flex-wrap:no-wrapで折り返さない flex-wrap:no-wrapはflexの子要素の折り返しを許可しないCSSです。
flex-wrapは初期がno-wrap（改行不許可）なので「flex-wrap:wrap;」を削除するだけでもOKです。
また、子要素のwidthを調整することも重要です。

レスポンシブWebデザインのブレイクポイント

モバイル端末別の画面幅（ブレークポイント）
スマホ 479px
タブレット 800px

このHTMLおよびCSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ブログ</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
.container {
    display: flex;
}

main {
    flex: 70%;
    padding: 15px;
    background-color: khaki;
}

aside {
    flex: 30%;
    padding: 15px;
    background-color: olive;
}

header, footer {
    background-color: gray;
    padding: 15px;
    text-align: center;
}

@media (max-width: 800px) {
    .container {
        flex-direction: column; /* フレックスアイテムを縦に並べる */
    }
    main, aside {
        flex: 100%;
    }
}
    </style>
</head>
<body>
    <header>
        <h1>ブログタイトル</h1>
    </header>
    <div class="container">
        <main>
            <article>
                <h2>記事タイトル</h2>
                <p>記事の内容</p>
            </article>
            
        </main>
        <aside>
            <h3>サイドバー</h3>
            <p>サイドバーの内容</p>
        </aside>
    </div>
    <footer>
        <p>フッターの内容</p>
    </footer>
</body>
</html>