回答編集履歴

4

コード追記

2021/12/19 14:46

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -113,3 +113,35 @@
113
113
 
114
114
 
115
115
  Gridレイアウト使った方がシンプルにできるとは思います。
116
+
117
+
118
+
119
+ ```scss
120
+
121
+ section{
122
+
123
+ display: grid;
124
+
125
+ grid-template-columns:1fr 1fr;
126
+
127
+ gap: 10px;
128
+
129
+ border:1px solid;
130
+
131
+ padding: 10px;
132
+
133
+ > * {
134
+
135
+ border:1px solid;
136
+
137
+ }
138
+
139
+ div {
140
+
141
+ grid-row: 2;
142
+
143
+ }
144
+
145
+ }
146
+
147
+ ```

3

コード追記

2021/12/19 14:46

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -67,3 +67,49 @@
67
67
  どちらにしても、たぶん、期待しているレイアウトと違うような気がします。目的と手段が合致していない状況ではないでしょう。。
68
68
 
69
69
  どのようなレイアウトが希望なのか図示されたら、いい手段が提案されると思います。
70
+
71
+
72
+
73
+ ---
74
+
75
+ 完成イメージ図が提示されたので、
76
+
77
+ Flexboxを使う場合の一例を。
78
+
79
+
80
+
81
+ ```scss
82
+
83
+ section{
84
+
85
+ display: flex;
86
+
87
+ justify-content: space-between;
88
+
89
+ flex-wrap: wrap;
90
+
91
+ border:1px solid;
92
+
93
+ padding: 10px;
94
+
95
+ > * {
96
+
97
+ border:1px solid;
98
+
99
+ width: 45%;
100
+
101
+ }
102
+
103
+ h1 {
104
+
105
+ margin-right: 40%;
106
+
107
+ }
108
+
109
+ }
110
+
111
+ ```
112
+
113
+
114
+
115
+ Gridレイアウト使った方がシンプルにできるとは思います。

2

説明追記

2021/12/19 13:40

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  この言葉通りにコード化すると、下記になりますね。
48
48
 
49
- これで、h1以外の要素に`display:flex;`が設定されます。ただし、子要素がp要素しかないので無意味な設定です。
49
+ これで、h1以外の要素に`display:flex;`が設定されます。ただし、子要素がp要素一つしかないので無意味な設定です。
50
50
 
51
51
 
52
52
 
@@ -61,3 +61,9 @@
61
61
  }
62
62
 
63
63
  ```
64
+
65
+
66
+
67
+ どちらにしても、たぶん、期待しているレイアウトと違うような気がします。目的と手段が合致していない状況ではないでしょう。。
68
+
69
+ どのようなレイアウトが希望なのか図示されたら、いい手段が提案されると思います。

1

説明追記

2021/12/19 13:03

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -37,3 +37,27 @@
37
37
  }
38
38
 
39
39
  ```
40
+
41
+
42
+
43
+ > <section>タグ内の<h1>タグを除いた<div>タグにdisplay:flex;を適用させたい
44
+
45
+
46
+
47
+ この言葉通りにコード化すると、下記になりますね。
48
+
49
+ これで、h1以外の要素に`display:flex;`が設定されます。ただし、子要素がp要素しかないので無意味な設定です。
50
+
51
+
52
+
53
+ ```css
54
+
55
+ section :not(h1) {
56
+
57
+ display: flex;
58
+
59
+ justify-content: space-between;
60
+
61
+ }
62
+
63
+ ```