Display flexの解除について

現在、レイアウトの学習を行っており、添付画像のようなレイアウトを作成しておりますが、

<main>ないに、回り込みをしない要素やClassを追加したいのですが、試行錯誤していますが、何か方法は、ありますでしょうか？

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="style_1025.css">
7    <title>Document</title>
8</head>
9<body>
10    <div class="container">
11        <header>
12            <div class="img-logo"><img src="img-logo.png"></div>
13        </header>
14
15        <main>
16            <div class="content">
17                <h2>h2-h2-h2</h2>
18                    <section>
19                        <img src="img1.png">
20                        <div class="desc">
21                            <p>説明、説明、説明、説明、説明、説明、説明</p>
22                        </div>
23                    </section>
24            </div>
25
26            <div class="sideber">
27                <h3>h3-h3-h3</h3>
28                <p>説明、説明、説明、説明、説明、説明、説明</p>
29                <img src="img2.png">
30            </div>
31        </main>
32
33        <footer>
34            footer
35        </footer>

CSS
1.container{
2    margin: 0 auto;
3    background-color: #eeeeee;
4    max-width: 1140px;
5    border: 1px solid black;
6}
7
8main{
9    border: 1px solid black;
10}
11
12.content{
13    border: 1px solid black;
14}
15
16.sideber{
17    border: 1px solid black;
18}
19
20main{
21    display: flex;
22}
23
24.content{
25    flex: 3;
26}
27
28section{
29    display: flex;
30}
31
32.sideber{
33    flex: 1;
34}
35

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

回答1件

追加する要素のクラス名が bottom だとして、

html
1    <div class="bottom">
2      <p>説明、説明、説明、説明、説明、説明、説明</p>
3    </div>

CSSは下記で。

css
1main{
2    display: flex;
3    flex-wrap: wrap; /* 追加 */
4}
5
6/* 以下追加 */
7.bottom {
8  flex: 0 0 100%;
9}

投稿2020/10/25 07:16

hatena19

総合スコア34075

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Display flexの解除について

関連した質問