flexboxのコンテンツ内に画像を配置したいと思っています。
下記のURLを参考にさせていただきました。
このコンテンツエリアの中に画像やテキストを配置し、画像を右寄せ・左寄せ
にする方法はあるでしょうか。
イメージとして、サイドバーとコンテンツの幅を1;1にして、
サイドバーでは右寄せ、コンテンツは左寄せにして、
拡大した際に、中央に文字や画像を中央にまとまって見えるようにしたいです。
widthは%を使用しています。
それぞれ、
margin-left: auto;
margin-right: 0px;
等記述しますが、うまくいかず困っており、教えて貰えたらうれしいです。
よろしくお願いします。
http://shared-blog.kddi-web.com/webinfo/187
<!DOCTYPE html> <html lang="ja"> <head> <title>Flexboxテスト</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="flex-cotainer"> <div class="wrapper"> <header>ヘッダー</header> <div class="flex-items"> <div class="content1"> <h1>サイドバー</h1> </div> <div class="content2"> <h1>コンテンツエリア</h1> </div> </div> <footer>フッター</footer> </div> </div> </body> </html> style.css .flex-cotainer { display: flex; flex-direction: column; } .wrapper{ display: flex; min-height: 100vh; flex-direction: column; } .flex-items { flex: 1; background-color: #ee0; display: flex; flex-wrap: wrap; } .content1 { flex: 1 1 150px; background-color: #333; } .content2 { flex: 3 1 350px; background-color: #0ee; } header{ height: 100px; background-color: #99c; } footer{ height: 100px; background-color: #99c; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。