回答編集履歴
2
追記：スクリーンショット
test
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
横並びにしたいブロック要素の親要素に対して`display:flex`を指定すると、均等に要素を分割することができます。
|
|
2
6
|
|
|
3
7
|
|
1
追記：均等に分割することを指定する`flex:1`と、参考文献の追加
test
CHANGED
|
@@ -20,6 +20,18 @@
|
|
|
20
20
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
.btn-group form{
|
|
24
|
+
|
|
25
|
+
-webkit-box-flex: 1;
|
|
26
|
+
|
|
27
|
+
-webkit-flex: 1;
|
|
28
|
+
|
|
29
|
+
-ms-flex: 1;
|
|
30
|
+
|
|
31
|
+
flex: 1
|
|
32
|
+
|
|
33
|
+
}
|
|
34
|
+
|
|
23
35
|
```
|
|
24
36
|
|
|
25
37
|
|
|
@@ -27,3 +39,9 @@
|
|
|
27
39
|
ベンダプレフィックスの生成は[pleeease](http://pleeease.io/play/)か[autoprefixer](https://github.com/postcss/autoprefixer)が利用できます。
|
|
28
40
|
|
|
29
41
|
[このプロパティはIE10、Android4.1以上で利用できます](http://caniuse.com/#feat=flexbox)。
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
> 参考
|
|
46
|
+
|
|
47
|
+
[A Complete Guide to Flexbox | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|