display:flexがうまく機能しません。(display: flexbox; や display: -webkit-box;も機能しません。)

display:flexがうまく機能しません。

「ホスティングの収入でキッチンを新調したり、
他の改装費用の一部を賄うことができました」

Tessaさんはロンドン在住。
ホストになって経済的なゆとりができました」
をimgの右に移動させたいです。

●display: -webkit-box;　や　display: flexbox;も試しましたが上手くいきませんでした。
●div class="A"で文字はきちんと含んでいます。
●cssのリンク自体は機能しています。

以下、コードです。

------------------------------------------HTML------------------------------

<div class="A"> <img src="../mother.jpg" alt="ホストマザー"> <div class="s1"> <p class="s2">ホスティングの収入でキッチンを新調したり、<br>他の改装費用の一部を賄うことができました」</p> <p class="s3">Tessaさんはロンドン在住。<br>ホストになって経済的なゆとりができました</p> <button type="button" class="btn btn-light">実践例をチェック</button> </div>

---------------------------------------------CSS------------------------------

.A {
margin-bottom: 40px;
width: 2500px;
height: 140px;
}

img {
width: 380px;
height: 380px;
margin-bottom: 30px;
margin-left: 120px;
margin-right: 30px;
display: flex;????????????
}

.s1 {
margin-top: 70px;
}
.s2 {
columns: #484848;
font-size: 32px;
}
.s3 {
color: #767676;
font-size: 16px;
}
.btn {
font-weight: bold;
border: solid black;
font-size: 16px;
}

hatena19

2020/02/11 10:01

前の質問の時も、修正依頼で、「コードはマークダウンのコードブロック内に入れてください」とお願いしました。下記のようにしてください。 ```html htmlコードをここに記述 ``` ```css cssコードをここに記述 ```

kazuki_user

2020/02/11 10:06

返信遅くなり申し訳ありません。コードの挿入ですね！了解です。

m.ts10806

2020/02/11 10:13

「マークダウンのcode機能」と認識してください。 https://teratail.com/help#about-markdown

kazuki_user

2020/02/11 10:19

了解です????

行動規範の内容に同意します

回答1件

ベストアンサー

display: flex;は親要素に設定してください。
親要素（Flexコンテナ）内で子要素(Flexアイテム)が横並びになります。

css
1.A {
2  margin-bottom: 40px;
3  width: 2500px;
4  height: 140px;
5  display: flex; /*ここ*/
6}

もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends

無意味に広い幅を設定していたり、位置調整をmarginでしていたり、いろいろまずい点が目についたので、それらを修正したサンプルを提示しておきます。参考になれば幸いです。

css
1.A {
2  margin-bottom: 40px;
3/*  width: 2500px; 無意味に大きい幅にしない */
4/*  height: 140px; 中身に合わせるので高さは不要 */
5  max-width: 1100px; /*適切な最大幅を設定*/
6  margin: 0 auto; /*中央寄せ*/
7  display: flex; /*アイテムを横並び*/
8  align-items: center; /*アイテムの垂直位置を中央に*/
9}
10
11img {
12  width: 380px;
13  height: 380px;
14  margin-right: 30px;
15}
16
17.s2 {
18  columns: #484848;
19  font-size: 32px;
20  margin-top: 0; /*Flexboxで垂直位置を決めるので不要なマージンは無しに*/
21}
22.s3 {
23  color: #767676;
24  font-size: 16px;
25}
26.btn {
27  font-weight: bold; 
28  border: solid black;
29  font-size: 16px;
30}