Radio 单选
使用方法
对label追加ax-radio类，将radio和对应的文字装入即可。基本结构如下：
<label class="ax-radio"><input name="" value="" type="radio"><span>文字</span></label>
块分布
对label追加ax-chera类，将radio和对应的文字装入即可。基本结构如下：
<label class="ax-chera"><input name="" value="" type="radio"><span>文字</span></label>
占满均分布局
以ax-flex-block作为外围可实现占满平均布局。基本格式如下：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="0" checked="" type="radio"><span>文字</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="1" type="radio"><span>文字</span></label></div>
</div>
</div>
</div>
</div>
单选：
单选：
单选风格：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="0" checked="" type="radio"><span>军事类</span></label></div>
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="1" type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-6"><label class="ax-radio"><input name="fix-clock-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="0" checked="" type="radio"><span>军事类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><span>文学类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><span>小说类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><span>教材类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="1" type="radio"><span>动漫类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-3"><label class="ax-radio"><input name="fix-bike-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选风格：</div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="0" checked="" type="radio"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="1" type="radio"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-egg-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-flex-block">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-draw" value="0" checked="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-draw" value="0" disabled="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
</div>
</div>
</div>
</div>
自定义宽度均分布局
对外围标签设定固定宽度，单选项将在此宽度内平均分布。基本格式如下：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div style="width:400px;">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="0" checked="" type="radio"><span>文字</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="1" type="radio"><span>文字</span></label></div>
</div>
</div>
</div>
</div>
单选(定宽400px)：
单选(定宽600px)：
单选风格：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选(定宽400px)：</div>
<div style="width:400px;">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="0" checked="" type="radio"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="1" type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-long-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选(定宽600px)：</div>
<div style="width:600px;">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="0" checked="" type="radio"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="1" type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cow-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选风格：</div>
<div style="width:600px;">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="0" checked="" type="radio"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="1" type="radio"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-woman-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div style="width:600px;">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-big" value="0" checked="" type="radio"><span>阅读《XXX使用协议》300px</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-big" value="0" disabled="" type="radio"><span>阅读《XXX使用协议》300px</span></label></div>
</div>
</div>
</div>
</div>
表单定宽均分布局
如果表单中还有其他输入控件，可以使用ax-form-input来统一外围宽度，宽度是460px。基本格式如下：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="0" checked="" type="radio"><span>文字</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="" value="1" type="radio"><span>文字</span></label></div>
</div>
</div>
</div>
</div>
</div>
单选：
单选风格：
姓名：
评论内容：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="0" checked="" type="radio"><span>军事类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="1" type="radio"><span>人物志类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
<div class="ax-col ax-col-8"><label class="ax-radio"><input name="fix-cat-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选风格：</div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="0" checked="" type="radio"><span>军事类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="1" type="radio"><span>人物志类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man" value="2" disabled="" type="radio"><span>娱乐类</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-8"><label class="ax-chera"><input name="fix-man-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label></div>
</div>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">姓名：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">评论内容：</div>
<div class="ax-flex-block">
<div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="输入评论"></textarea></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-form-con">
<div class="ax-form-input">
<div class="ax-row">
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-paper" value="0" checked="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
<div class="ax-col ax-col-12"><label class="ax-radio"><input name="fix-paper" value="0" disabled="" type="radio"><span>阅读《XXX使用协议》</span></label></div>
</div>
</div>
</div>
</div>
</div>
自由布局
根据外围宽度自由填充单选项，不过由于单选项长度不一而导致视觉上不整齐。基本格式如下：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">名称</div>
<div class="ax-flex-block">
<div class="ax-flex-block"><label class="ax-radio"><input name="" value="0" checked="" type="radio"><span>文字</span></label>
<label class="ax-radio"><input name="" value="1" type="radio"><span>文字</span></label>
</div>
</div>
</div>
</div>
单选：
单选：
单选风格：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-flex-block">
<div class="ax-flex-block"><label class="ax-radio"><input name="free-apple" value="0" checked="" type="radio"><span>军事类</span></label>
<label class="ax-radio"><input name="free-apple" value="1" type="radio"><span>人物志类</span></label>
<label class="ax-radio"><input name="free-apple" value="2" disabled="" type="radio"><span>娱乐类</span></label>
<label class="ax-radio"><input name="free-apple-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label>
</div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选：</div>
<div class="ax-flex-block"><label class="ax-radio"><input name="free-orange" value="0" checked="" type="radio"><span>军事类</span></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>文学类</span></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>人物志类</span></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>小说类</span></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>教材类</span></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>动漫类</span></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>历史类</span></label>
<label class="ax-radio"><input name="free-orange" value="1" type="radio"><span>人文类</span></label>
<label class="ax-radio"><input name="free-orange" value="2" disabled="" type="radio"><span>娱乐类</span></label>
<label class="ax-radio"><input name="free-orange-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">单选风格：</div>
<div class="ax-flex-block">
<label class="ax-chera"><input name="free-girl" value="0" checked="" type="radio"><span>军事类</span></label>
<label class="ax-chera"><input name="free-girl" value="1" type="radio"><span>人物志类</span></label>
<label class="ax-chera"><input name="free-girl" value="2" disabled="" type="radio"><span>娱乐类</span></label>
<label class="ax-chera"><input name="free-girl-x" value="3" checked="" disabled="" type="radio"><span>其他</span></label>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label"></div>
<div class="ax-flex-block">
<div class="ax-flex-block"><label class="ax-radio"><input name="free-agree" value="0" checked="" type="radio"><span>阅读《XXX使用协议》</span></label><label class="ax-radio"><input name="free-agree" value="0" type="radio"><span>阅读《XXX使用协议》</span></label>
</div>
</div>
</div>
</div>
不同尺寸
本框架的单选默认高是38px(ax-md)，对ax-radio或ax-chera追加尺寸类实现不同大小效果以适应不同行高。
高22px的ax-xs。
<label class="ax-radio ax-xs"><input name="pen03" value="0" checked type="radio"><span>是</span></label>
<label class="ax-radio ax-xs"><input name="pen03" value="0" type="radio"><span>否</span></label>
<div class="ax-row">
<div class="ax-col ax-col-12"> <label class="ax-chera ax-xs"><input name="pen04" value="0" checked type="radio"><span>是</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-12"><label class="ax-chera ax-xs"><input name="pen04" value="0" type="radio"><span>否</span></label></div>
</div>
高28px的ax-sm。
<label class="ax-radio ax-sm"><input name="pen05" value="0" checked type="radio"><span>是</span></label>
<label class="ax-radio ax-sm"><input name="pen05" value="0" type="radio"><span>否</span></label>
<div class="ax-row">
<div class="ax-col ax-col-12"> <label class="ax-chera ax-sm"><input name="pen06" value="0" checked type="radio"><span>是</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-12"><label class="ax-chera ax-sm"><input name="pen06" value="0" type="radio"><span>否</span></label></div>
</div>
高48px的ax-lg。
<label class="ax-radio ax-lg"><input name="pen07" value="0" checked type="radio"><span>是</span></label>
<label class="ax-radio ax-lg"><input name="pen07" value="0" type="radio"><span>否</span></label>
<div class="ax-row">
<div class="ax-col ax-col-12"> <label class="ax-chera ax-lg"><input name="pen08" value="0" checked type="radio"><span>是</span></label></div>
<span class="ax-gutter-md"></span>
<div class="ax-col ax-col-12"><label class="ax-chera ax-lg"><input name="pen08" value="0" type="radio"><span>否</span></label></div>
</div>