回答編集履歴
3
追記
test
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
.notice-tem4 img{
|
|
22
22
|
|
|
23
23
|
height: 100%;
|
|
24
24
|
|
|
@@ -29,3 +29,19 @@
|
|
|
29
29
|
画像の横サイズを変えたくない場合は、
|
|
30
30
|
|
|
31
31
|
`img.notice-tem4`の`height`を消して`flex-grow: 1;`に書き換えてみてください。
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
**追記**
|
|
36
|
+
|
|
37
|
+
質問文が編集されて、HTMLの構造が違う話になってきたので要点だけ伝えますと、
|
|
38
|
+
|
|
39
|
+
1. `display: flex;` を指定すると 子要素の縦サイズは自動的に大きいものに合わせるモードになってます。
|
|
40
|
+
|
|
41
|
+
2. `display: flex;` を指定した要素の中身は `display: flex;` ではありません。（＝縦サイズを自動的に合わせてくれません。）
|
|
42
|
+
|
|
43
|
+
3. 全ての中身の要素を、きちんと縦サイズをあわせてくれるように `display: flex;` を指定したうえで、
|
|
44
|
+
|
|
45
|
+
画像に `height: 100%;` を書けば、ちゃんと合うとおもいます。
|
|
46
|
+
|
|
47
|
+
4. `display: flex;`にすると自動的に、中身をすべて横並びにしてしまうので、縦に並べたい部分には `flex-direction: column;` を書いてください。
|
2
追記
test
CHANGED
|
@@ -25,3 +25,7 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
```
|
|
28
|
+
|
|
29
|
+
画像の横サイズを変えたくない場合は、
|
|
30
|
+
|
|
31
|
+
`img.notice-tem4`の`height`を消して`flex-grow: 1;`に書き換えてみてください。
|
1
追記
test
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
1
|
[Flexboxのチートシート](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)
|
|
2
2
|
|
|
3
3
|
こちらにできること書いてますご覧ください。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
**追記**
|
|
8
|
+
|
|
9
|
+
とりあえず下記で縦サイズ揃いました。
|
|
10
|
+
|
|
11
|
+
```css
|
|
12
|
+
|
|
13
|
+
.notice-item4{
|
|
14
|
+
|
|
15
|
+
display: flex;
|
|
16
|
+
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
img.notice-tem4{
|
|
22
|
+
|
|
23
|
+
height: 100%;
|
|
24
|
+
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
```
|