回答編集履歴

2 追記:スクリーンショット

horse_n_deer

horse_n_deer score 448

2015/11/01 18:56  投稿

![イメージ説明](54c3c632ff2ad1c96b34092a5775fc14.png)  
 
横並びにしたいブロック要素の親要素に対して`display:flex`を指定すると、均等に要素を分割することができます。
[DEMO](https://jsfiddle.net/59naga/uyfho2pj/)
```css
.btn-group{
   display:-webkit-box;
   display:-webkit-flex;
   display:-ms-flexbox;
   display:flex
}
.btn-group form{
   -webkit-box-flex: 1;
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1
}
```
ベンダプレフィックスの生成は[pleeease](http://pleeease.io/play/)か[autoprefixer](https://github.com/postcss/autoprefixer)が利用できます。
[このプロパティはIE10、Android4.1以上で利用できます](http://caniuse.com/#feat=flexbox)。
> 参考
[A Complete Guide to Flexbox | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
1 追記:均等に分割することを指定する`flex:1`と、参考文献の追加

horse_n_deer

horse_n_deer score 448

2015/11/01 18:55  投稿

横並びにしたいブロック要素の親要素に対して`display:flex`を指定すると、均等に要素を分割することができます。
[DEMO](https://jsfiddle.net/59naga/uyfho2pj/)
```css
.btn-group{
   display:-webkit-box;
   display:-webkit-flex;
   display:-ms-flexbox;
   display:flex
}
.btn-group form{  
   -webkit-box-flex: 1;  
   -webkit-flex: 1;  
       -ms-flex: 1;  
           flex: 1  
}  
```
ベンダプレフィックスの生成は[pleeease](http://pleeease.io/play/)か[autoprefixer](https://github.com/postcss/autoprefixer)が利用できます。
[このプロパティはIE10、Android4.1以上で利用できます](http://caniuse.com/#feat=flexbox)。
[このプロパティはIE10、Android4.1以上で利用できます](http://caniuse.com/#feat=flexbox)。
> 参考
[A Complete Guide to Flexbox | CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る