質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

14771閲覧

[CSS]子要素にposition: absolute;を指定した時のdisplay: flex;が利きません

Kelvin

総合スコア34

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

2クリップ

投稿2017/05/12 09:39

編集2017/05/12 10:15

###やりたいこと
このようなコードがあったとします。

HTML

1<div id="parent"> 2 <div class="child><img src="sample.png"></div> 3 <div class="child><img src="sample.png"></div> 4 <div class="child><img src="sample.png"></div> 5</div>

CSS

1#parent{ 2display: flex; 3flex-wrap: wrap; 4position: relative; 5} 6 7 .child{ 8 position: absolute; 9 height: 100px; 10 width: 200px; 11 clip: rect(2px, 198px, 98px, 2px);

clipを使って大きさが決まってない要素に対して等しい幅の隙間を開けたいと思っています。
しかしclipを使うためにはposition: absolute;にしなくてはならず、そうするとdisplay: flex;が利きません。
というよりすべての.childが重なってしまいます。
###なぜmarginを使わないか
例
上の画像はWindowsのニュースアプリのもので、僕が作っているものではありませんがこれを例とさせていただきます。
青い矢印の先を見ていただきたいのですが、
上の2枚の写真の隙間と下の2枚の写真の隙間の幅が異なっています。
これを避けたいと思っています。
すべての要素の幅が同じであればmarginで事足りるのですが、
横幅が倍のものなどが混在しますので単にmarginで隙間を開けただけだと上の写真のようなレイアウトになってしまいました。
###聞きたいこと
どうすればclipを使いつつ要素を並べることができるでしょうか?
よろしくお願いいたします。

ikuwow👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/05/12 09:43

HTMLも質問文に追記してください。
Kelvin

2017/05/12 09:52

すいません。追加しました。
kei344

2017/05/12 09:53

.childは画像でなく、「隙間」はどのような方法で開けても良い、という解釈であっていますか?
Kelvin

2017/05/12 09:55

div の中に入れる予定です。 隙間はどのような方法でも構いません。
Kelvin

2017/05/12 09:56

しかし、margin等は横がそろわないので避けてください。
kei344

2017/05/12 09:56

「横がそろわない」とは?
guest

回答1

0

ベストアンサー

サムネイルから推察するに「一定の幅/高さの中に整然と収めたい」ということでしょうか。
画像の高さや幅がばらばらでも下記のようなことも出来ます。(clipよりは扱いやすいと思います)

HTML

1<div id="parent"> 2 <div class="child"><img alt="" src="//placehold.jp/24/cc9999/993333/750x150.png" /></div> 3 <div class="child"><img alt="" src="//placehold.jp/24/cc9999/993333/350x150.png" /></div> 4 <div class="child"><img alt="" src="//placehold.jp/24/cc9999/993333/150x550.png" /></div> 5</div>

CSS

1#parent { 2 display: flex; 3 flex-wrap: wrap; 4} 5#parent .child { 6 flex-grow: 1; 7 height: 100px; 8 margin: 5px; 9 overflow: hidden; 10 position: relative; 11} 12#parent .child > img { 13 position: absolute; 14 left: 50%; 15 top: 50%; 16 -webkit-transform: translate(-50%, -50%); 17 transform: translate(-50%, -50%); 18 max-height: none !important; 19 max-width: none !important; 20 min-height: 100%; 21 min-width: 100%; 22} 23```**動くサンプル:**[https://jsfiddle.net/ary81khv/](https://jsfiddle.net/ary81khv/)

投稿2017/05/12 16:37

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kelvin

2017/05/15 09:19

返信遅れてすみません。 ありがとうございます。 ベストアンサーにさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問