flexboxのコンテンツ内で画像を左寄せにしたい。

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件

ベストアンサー

こういうことですか？

CSS
1.content1 {
2  flex: 1 1 0;
3  background-color: #333;
4  text-align: right;
5
6}
7.content2 {
8  flex: 1 1 0;
9  background-color: #0ee;
10}
11```**動くサンプル：**[https://jsfiddle.net/xd6xa3tx/1/](https://jsfiddle.net/xd6xa3tx/1/)