display: flex でリストを横に表示したいのですが、うまく表示ができません。

Question

最近HTML,cssの勉強を初めて見たのですが、
display: flex を使っても横に表示ができませんでした。

最終的には３列で表示したいと考えているですが、
どうやって実現したら良いのかがわかりません。

//html

<h1 class = "topics">最近の学習内容</h1>
        <div class="study">
            <ul>
                <li>
                    <img src="img/work1.png" width="400" height="200" alt="Sample">
                    <h1>Sample</h1>
                    <p>楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです
                        楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです</p>
                </li>
                <li>
                    <img src="img/work1.png" width="400" height="200" alt="Sample">
                    <h1>Sample</h1>
                    <p>楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです
                        楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです</p>
                </li>
                <li>
                    <img src="img/work1.png" width="400" height="200" alt="Sample">
                    <h1>Sample</h1>
                    <p>楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです
                        楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです</p>
                </li>
                <li>
                    <img src="img/work1.png" width="400" height="200" alt="Sample">
                    <h1>Sample</h1>
                    <p>楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです
                        楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです</p>
                </li>
                <li>
                    <img src="img/work1.png" width="400" height="200" alt="Sample">
                    <h1>Sample</h1>
                    <p>楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです
                        楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです</p>
                </li>
            </ul>
        </div>
       
//CSS
.topics {
    font-size: 40px;
    font-weight: normal;
    text-align: center;
}

.study > ul {
    margin: 0;
    flex-wrap: wrap;
    width: auto;
    list-style-type: none;
    justify-content:center;
    display: flex;
}

Answer 1

.study > ul {
  flex-wrap: wrap; // flexboxを改行させる
}
.study > ul　li {
  flex-basis: 50%; // 子要素の横幅指定
}

のような感じで適応すると思います。

以下のリンクを参考にするとflexboxについてやりやすいと思います。

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
https://suiq.jp/flex-layout-generator/

Comments

[tubuki]

ありがとうございます。
解決しました！！