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