画像と文章を横並びにして中央に寄せて画像のトップと文章の頭が揃うようにし、文章は両端揃えになるように作りたいのですが教えて下さい

Question

画像と説明文がをdisplay:flexにして横並びし、justfy-content:　space-around　margin:0 autoにしてやってみましたが、
もっと近寄って欲しいのと文章の両端をそろえたいと思ってtext-align:justfyを用いてみましたがあてがう場所が違う為反応しません

<section class="section3">
            <div section3-view>
                <div class="contents">
                    <img src="images/hokkaido.jpg" alt="青空">
                    <div class="content">
                        <p>北海道を旅行するのに最適な季節は8月をおいて他にない。<br>
                            トウモロコシ畑はいよいよ隆盛を極め、今正にその旬を謳歌しようとしている。<br>
                            そんな黄色の恵みを背に帯広から十数キロ北に車を走らせたところ、その場所は見えてきた。<br>
                            一面に広がる緑には、おおよそ商業的農業としての役割を全うしているであろう空間は1ヘクタールも見つからない。<br>
                            広大な庭の持ち主と、その隙間から覗く青空が伝える「夏」と<br>いう言葉の解釈は、きっとまだどの辞書にも載っていないだろう。
                        </p>
                    </div>
                </div>
            </div>

.section3 .contents {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin: 0 auto;
}

画面均等に二つが並び両サイド若干空くようにして作りたいのですがどうすれば良いでしょうか。
ご教授願います。

Answer 1

imgとcontentにflex:1;を当てると均等になります。
余白はmarginもしくはpaddingで調整して下さい。

text-align: justify;はpもしくはpの親要素に当ててください。
おそらく、打ち間違いだと思いますが。
justfyこれだとiが抜けているので。

Comments

[JUN2938]

ご丁寧にありがとうございます。
.content img {
　　flex:1;
}
という認識で合っていますか？

[退会済みユーザー]

.content , img {
　　flex:1;
}
こっちです。.contentとimg、両方に当てたいので。
flex: 〇〇;はflexboxの中身の割合を設定する記述になります。
1と1を当ててあげると、半分ずつになるということです。

imgとすると他のimgにもあたってくるので、
img要素が他にも増える場合は適切にclass等のセレクタを追加してあげてくださいね。

[JUN2938]

遅くなりました。
ご丁寧にありがとうございます。