位置固定サイドバーとセンタリングコンテンツ

Question

私は完全にCSSで迷っています。誰でもCSSをハッキングせずにコンテンツエリアにセンタリングして反応性の高い写真を作ってくれますか？固定サイドバーは、サイドバーの下に隠されるので、正当化コンテンツと整列アイテムを使用することができないので、難しくなります。

おかげ

<div class="container"> 
     <div class="sidebar"> 
     <ul> 
     <li> 
      <span>Home</span> 
     </li> 
     <li> 
      <span>Home</span> 
     </li> 
     </ul> 
     </div> 
     <div class="content"> 
     <img src="http://placehold.it/350x150" /> 
     <img src="http://placehold.it/350x150" /> 
     <img src="http://placehold.it/350x150" /> 
     </div> 
    </div> 

    .container { 
     padding-left:200px 
    } 

    .sidebar { 
     position:fixed; 
     height:100%; 
     width:200px; 
     top:0; 
     left:0; 
     background:#fff; 
     border-right:2px solid; 
    } 

JSFIDDLE

Answer 1

あなただけの画像を中心にしようとしている場合は、あなただけのルールを追加することができます

.content { 
    text-align: center; 
} 

Answer 2

あなたはフレキシボックスを使用することができます。 flex: 0 0 200px;に移動してposition: fixed;を使用せずにサイドバーを維持し、高さを変えずにコンテナにalign-items: flex-start;を追加することができます。より具体的には.containerにalign-self: flex-start;を入れてください。

チェックアウトフル例：

.container { 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    flex: 0 0 200px; 
 
    height:100vh; 
 
    width:200px; 
 
    background:#fff; 
 
    border-right:2px solid; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-self: flex-start; 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    <ul> 
 
     <li><span>Home</span></li> 
 
     <li><span>Home</span></li> 
 
    </ul> 
 
    </div> 
 
    <div class="content"> 
 
    <img src="http://placehold.it/350x150" /> 
 
    <img src="http://placehold.it/350x150" /> 
 
    <img src="http://placehold.it/350x150" /> 
 
    </div> 
 
</div>