回答編集履歴
2
追記：スクリーンショット
answer
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
1
3
|
横並びにしたいブロック要素の親要素に対して`display:flex`を指定すると、均等に要素を分割することができます。
|
|
2
4
|
|
|
3
5
|
[DEMO](https://jsfiddle.net/59naga/uyfho2pj/)
|
1
追記：均等に分割することを指定する`flex:1`と、参考文献の追加
answer
CHANGED
|
@@ -9,7 +9,16 @@
|
|
|
9
9
|
display:-ms-flexbox;
|
|
10
10
|
display:flex
|
|
11
11
|
}
|
|
12
|
+
.btn-group form{
|
|
13
|
+
-webkit-box-flex: 1;
|
|
14
|
+
-webkit-flex: 1;
|
|
15
|
+
-ms-flex: 1;
|
|
16
|
+
flex: 1
|
|
17
|
+
}
|
|
12
18
|
```
|
|
13
19
|
|
|
14
20
|
ベンダプレフィックスの生成は[pleeease](http://pleeease.io/play/)か[autoprefixer](https://github.com/postcss/autoprefixer)が利用できます。
|
|
15
|
-
[このプロパティはIE10、Android4.1以上で利用できます](http://caniuse.com/#feat=flexbox)。
|
|
21
|
+
[このプロパティはIE10、Android4.1以上で利用できます](http://caniuse.com/#feat=flexbox)。
|
|
22
|
+
|
|
23
|
+
> 参考
|
|
24
|
+
[A Complete Guide to Flexbox | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|