画像が上配置・テキストを下配置を2セットを左右に均等に配置方法

画像が上配置・テキストが下配置を1セットとして、それを2セットを左右に均等に並べたいのですが、flex-boxでやろうと思ったのですが良い方法はあるでしょうか？

html
1 
2<!DOCTYPE html>
3<html lang="ja">
4<head></head> 
5<body>
6  <div class="container">
7    <div class="flex">
8      <img src="">
9      <p>********</p>
10    </div>
11
12    <div class="flex">
13      <img src="">
14      <p>********</p>
15    </div>
16  </div> 
17</body>
18</html>

m.ts10806

2018/10/01 14:35

ソースコードはマークダウンのcode機能を使ってください。質問・解説内容とコードとの境目が不明瞭となりますし、code機能では正しくコードをコピペできるようになりインデントもつけられて読みやすくなり、再現確認も容易となりますので、的確な回答が得やすくなります。https://teratail.com/help#about-markdown

blackdog

2018/10/01 21:51

ご指摘ありがとうございました。

_lemon2003_

2018/10/01 22:36

.flex クラスに、display:flexを指定すればよいのではないかと。

s8_chu

2018/10/01 23:27

_lemon2003_さん>本当に`flex`クラスに`display: flex`を与えれば「画像が上配置・テキストを下配置」になりますか？また、そのような投稿は「質問への追記、修正の依頼をする場所」で行うべきではないと思います。回答として投稿するべきではないでしょうか？

yoshinavi

2018/10/02 03:11

まずは質問者さん自ら考えたHTML・CSSのコードを提示して、どこが不具合なのか？どのようにしたいのか？を質問された方が、回答を得やすいと思います。

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

回答2件

こういう事ではないんでしょうか？
違っていたらスイマセン。

css
1.container {
2    display: -ms-flex;
3    display: -webkit-flex;
4    display: flex;
5    -ms-flex-direction: row;
6    -webkit-flex-direction: row;
7    flex-direction: row;
8    -ms-justify-content: center;
9    -webkit-justify-content: center;
10    justify-content: center;
11}

投稿2018/10/02 00:21

ukkari-ukachan

総合スコア50

x_x

2018/10/02 09:34

display: -ms-flex; や -ms-justify-content: center; に出典はあるのでしょうか？ IE10 に対応するなら、display: -ms-flexbox; ではないかと思うのですが

ukkari-ukachan

2018/10/02 11:39

あー！間違ってました。スイマセン。確かに display: -ms-flexbox; と -ms-flex-align: center; でした。お恥ずかしい回答でスイマセンでした。

blackdog

2018/10/02 13:20

ありがとうございました。望み通りの配置にならなかったので、floatでやってみました。不十分な質問者に回答ありがとうございました。今後失礼の無いように精進していきたいと思います。

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

自己解決

不十分な情報のなか回答ありがとうございました。次回から質問する際には、自分のコードを記載した上で解決したいことを分かりやすいように記載し失礼の無いようにしていきます。この度は大変失礼しました。

他に解決策を考えている際に問題は解決しました。ありがとうございました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>cat2</title>
6  <link rel="stylesheet" href="css/reset.css">
7  <link rel="stylesheet" href="css/styles.css">
8</head>
9<body>
10  <div class="container">
11    <div class="content">
12      <img src="../img/****" width="450" height="299.5">
13      <p>**************</p>
14    </div>
15    <div class="content">
16      <img src="../img/*******" width="450" height="299.5">
17      <p>**************</p>
18    </div>
19  </div>
20</body>
21</html>
22
23  styles.css
24@meta charset "utf-8";
25
26body {
27  color: #333;
28  font-size: 1.2rem;
29  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
30}
31
32* {
33  box-sizing: border-box;
34}
35
36.container {
37  width: 980px;
38  padding: 0 15px;
39  margin: 0 auto;
40}
41
42.content {
43  width: 50%;
44  float: left;
45}
46
47.content::after {
48  clear: both;
49}
50