CSSフレキシボックス洗面所独立列

Question

私はここで非常に基本的な応答性のWebページを構築しています：

https://codepen.io/beckytownsend/pen/wqaoRR

を、私は誰のセクションへの主要コンテンツを分割したい、右のときにそれを上の左のサイドバー上の段落を...そうのように、過去1200pxを拡大

P =段落、S =サイドバー

PS
P

私はまた、2つのセクションがページの中央に座るようにします。私はこれを動作させる方法を理解していないようです！誰かが自分のコードを見て、私ができることを教えてもらえますか？

.main-content{ 
 
    justify-content: center; 
 
    align-items: center; 
 
    display: inline-flex; 
 
    display: -webkit-flex; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
} 
 
    
 
/*Paragraphs within main content*/ 
 
    .paragraph { 
 
    float:left; 
 
    width: 60%; 
 
    order: 1; 
 
flex-direction: column; 
 
} 
 

 
    /*Sidebar*/ 
 
.sidebar { 
 
background: teal; 
 
float: right; 
 
width: 30%; 
 
order: 2; 
 
}

<div class="main-content"> 
 
<div class="paragraph"> 
 
    <h2> Lorem ipsum dolor. </h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat. 
 

 
Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</div> 
 
<div class="paragraph"> 
 
    <h2> Lorem ipsum dolor. </h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat. 
 
<br><br> 
 
Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
<br><br> 
 
Curabitur leo enim, feugiat sed ligula in, laoreet lobortis dui. In semper porta nibh ut scelerisque. Nam commodo sapien in nisi tempor, vel dignissim nisl gravida. Aliquam erat volutpat. Suspendisse mattis urna quis arcu vehicula lacinia. Fusce convallis lorem vitae scelerisque ullamcorper. Vivamus vel est nec diam iaculis cursus non in lacus. Proin eu libero sed urna vehicula. 
 
<br><br> 
 
Proin accumsan, velit id commodo blandit, odio felis dictum diam, ut tempor lacus metus non dolor. In hac habitasse platea dictumst. Phasellus viverra lectus rutrum tristique feugiat. Etiam sit amet mi vel neque fringilla viverra at sit amet risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et turpis vestibulum, aliquam ex vel, imperdiet felis. Nam luctus velit nulla. Praesent tempor dignissim magna vel euismod. In auctor gravida nibh, ut facilisis dui tincidunt bibendum. Aliquam et nisi ac velit consectetur dapibus. Fusce consectetur semper mauris eu tempus. Aenean leo tortor, interdum quis pharetra at, varius vel orci. Nulla facilisi. Nulla facilisi. Sed ligula nunc, consequat nec purus non, volutpat egestas mauris. 
 
</p> 
 
</div> 
 

 

 
<div class="sidebar"> 
 
    
 
    <h3> Lorem ipsum </h3> 
 
    <p>Quisque hendrerit metus id justo congue hendrerit non in libero. Phasellus quis enim vel sem sagittis eleifend. Aenean gravida, metus id pharetra imperdiet, nibh risus vestibulum lacus, nec gravida felis arcu id tortor. Donec id lectus eu enim accumsan aliquam. Etiam nunc arcu, volutpat quis erat vel, rhoncus condimentum nunc. Integer pulvinar lectus non pulvinar iaculis. Maecenas lorem libero, egestas ac mi ac, hendrerit commodo sapien. Cras finibus sem neque, in mollis eros facilisis eget. Quisque id lacus aliquam, tristique est id, facilisis nulla. Donec vitae faucibus nunc.</p> 
 
</div> 
 
    </div>

Answer 1

ラップは、新しいコンテナ内の段落と、次のことを与える：

.left { 
    display: flex; 
    flex-direction: column; 
} 

あなたはその後、段落からすべてのflexboxプロパティを削除することができます。 floatはフレックスコンテナでは機能しません。

.main-content { 
 
    justify-content: center; 
 
    display: inline-flex; 
 
    display: -webkit-flex; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
} 
 

 
.left { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding-right: 50px; 
 
} 
 

 

 
/*Sidebar*/ 
 

 
.sidebar { 
 
    background: teal; 
 
    min-width: 30%; 
 
}

<div class="main-content"> 
 
    <div class="left"> 
 
    <div class="paragraph"> 
 
     <h2> Lorem ipsum dolor. </h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. 
 
     Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat. Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non 
 
     euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est 
 
     lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
    <div class="paragraph"> 
 
     <h2> Lorem ipsum dolor. </h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. 
 
     Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat. 
 
     <br><br> Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui 
 
     sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna 
 
     ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     <br><br> Curabitur leo enim, feugiat sed ligula in, laoreet lobortis dui. In semper porta nibh ut scelerisque. Nam commodo sapien in nisi tempor, vel dignissim nisl gravida. Aliquam erat volutpat. Suspendisse mattis urna quis arcu vehicula lacinia. 
 
     Fusce convallis lorem vitae scelerisque ullamcorper. Vivamus vel est nec diam iaculis cursus non in lacus. Proin eu libero sed urna vehicula. 
 
     <br><br> Proin accumsan, velit id commodo blandit, odio felis dictum diam, ut tempor lacus metus non dolor. In hac habitasse platea dictumst. Phasellus viverra lectus rutrum tristique feugiat. Etiam sit amet mi vel neque fringilla viverra at sit 
 
     amet risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et turpis vestibulum, aliquam ex vel, imperdiet felis. Nam luctus velit nulla. Praesent tempor dignissim magna vel euismod. In auctor gravida 
 
     nibh, ut facilisis dui tincidunt bibendum. Aliquam et nisi ac velit consectetur dapibus. Fusce consectetur semper mauris eu tempus. Aenean leo tortor, interdum quis pharetra at, varius vel orci. Nulla facilisi. Nulla facilisi. Sed ligula nunc, 
 
     consequat nec purus non, volutpat egestas mauris. 
 
     </p> 
 
    </div> 
 

 
    </div> 
 
    <div class="sidebar"> 
 

 
    <h3> Lorem ipsum </h3> 
 
    <p>Quisque hendrerit metus id justo congue hendrerit non in libero. Phasellus quis enim vel sem sagittis eleifend. Aenean gravida, metus id pharetra imperdiet, nibh risus vestibulum lacus, nec gravida felis arcu id tortor. Donec id lectus eu enim accumsan 
 
     aliquam. Etiam nunc arcu, volutpat quis erat vel, rhoncus condimentum nunc. Integer pulvinar lectus non pulvinar iaculis. Maecenas lorem libero, egestas ac mi ac, hendrerit commodo sapien. Cras finibus sem neque, in mollis eros facilisis eget. Quisque 
 
     id lacus aliquam, tristique est id, facilisis nulla. Donec vitae faucibus nunc.</p> 
 
    </div> 
 
</div>