フレックスボックスを使用したスライドパネルの作成

Question

フレックスボックスを使用してこのウェブサイトhttp://12dishes.com/からスライドパネルを再作成しようとしています。私は絶対配置でスライドを作成するように見えることができない全体のレイアウトが消える私は何の原因がわからないのですか？私はこれまで何をやったかここで

：position: absoluteと

.wrapper { 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flex; 
 
    display: -o-flex; 
 
    display: flex; 
 
    overflow: hidden; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    flex-wrap: wrap; 
 
    align-items: stretch; 
 
    position: relative; 
 
} 
 
#slider { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
} 
 
.slide { 
 
    display: inline-block; 
 
    width: 30%; 
 
    flex: 1; 
 
    border: solid 1px rgba(255, 255, 255, 0.8); 
 
    background-color: lightblue; 
 
    margin: 10px; 
 
    position: absolute; 
 
} 
 
h2 { 
 
    font-size: 3em; 
 
    font-family: cursive; 
 
    text-align: center; 
 
}

<main class="wrapper"> 
 
    <section id="slider"> 
 
    <article class="slide"> 
 
     <h2>Slide 1</h2> 
 
    </article> 
 
    <article class="slide"> 
 
     <h2>Slide 1</h2> 
 
    </article> 
 
    <article class="slide"> 
 
     <h2>Slide 1</h2> 
 
    </article> 
 
    </section> 
 
    <section id="slider"> 
 
    <article class="slide"> 
 
     <h2>Slide 2</h2> 
 
    </article> 
 
    <article class="slide"> 
 
     <h2>Slide 2</h2> 
 
    </article> 
 
    <article class="slide"> 
 
     <h2>Slide 2</h2> 
 
    </article> 
 
    </section> 
 
</main>

Answer 1

要素は、文書の流れから削除されます。つまり、スペースを取らないということです。したがって、容器は内部に「何もない」があり、完全に崩壊する。

この問題を解決するには、コンテナの高さを指定してみてください。

例えば、あなたのコードにこれを追加します。

.wrapper { height: 80vh; } 

改訂コードをします。http：

.wrapper { 
 
    display: flex; 
 
    overflow: hidden; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    flex-wrap: wrap; 
 
    align-items: stretch; 
 
    position: relative; 
 
    height: 80vh; 
 
} 
 
#slider { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
} 
 
.slide { 
 
    display: inline-block; 
 
    width: 30%; 
 
    flex: 1; 
 
    border: solid 1px rgba(255, 255, 255, 0.8); 
 
    background-color: lightblue; 
 
    margin: 10px; 
 
    position: absolute; 
 
} 
 
h2 { 
 
    font-size: 3em; 
 
    font-family: cursive; 
 
    text-align: center; 
 
}

<main class="wrapper"> 
 
    <section id="slider"> 
 
    <article class="slide"> 
 
     <h2>Slide 1</h2> 
 
    </article> 
 
    <article class="slide"> 
 
     <h2>Slide 1</h2> 
 
    </article> 
 
    <article class="slide"> 
 
     <h2>Slide 1</h2> 
 
    </article> 
 
    </section> 
 
    <section id="slider"> 
 
    <article class="slide"> 
 
     <h2>Slide 2</h2> 
 
    </article> 
 
    <article class="slide"> 
 
     <h2>Slide 2</h2> 
 
    </article> 
 
    <article class="slide"> 
 
     <h2>Slide 2</h2> 
 
    </article> 
 
    </section> 
 
</main>