css flex 左边固定右边自适应是我们开发中常见的一种布局,本章节将来演示如何用css flex来实现左边固定右边自适应的布局。
Ant Design Vue Radio属性和事件列表
在实际业务场景中也经常会用按钮样式的Radio,Ant Design也通过了该形式的单选组。
flex align-self属性允许子元素有与其他元素不一样的对齐方式,比如父元素设置align-items: flex-start 那么所有子元素全部从上往下对齐,而设置了align-self属性的子元素可以不遵循这个规则,可覆盖父元素的align-items属性。默认值为auto,表示继承父元素的对齐规则。
css flex 子元素flex属性是flex-grow, flex-shrink 和 flex-basis的简写方式,默认值为0 1 auto,后两个属性可选。
flex-basis表示子元素被放入flex容器之前的大小,即你想要的子元素大小而不是其真实大小,子元素最终的大小取决于flex容器的宽度。
flex-shrink属性定义了子元素的缩小比例,默认为1,当父元素空间不足时,子元素将等比例缩小,如果其中一个子元素flex-shrink为0其他为1,那么为0的不缩小其他等比例缩小。
css flex flex-grow属性设置子元素放大比例,如果父元素有剩余空间而所有子元素的flex-grow属性设置为1,那么这些子元素等分剩余空间。如果子元素B的flex-grow属性为2,其他子元素都为1,那么B元素占据的剩余空间将比其他子元素多一倍。
css flex order属性子元素的排列顺序,值越小越排前面。父元素的flex-direction属性也可以对子元素进行排序,但是没有order灵活。
css flex align-content属性在多根交叉轴(flex-wrap: wrap换行会产生多根交叉轴)上对齐方式垂直对齐方式,功能是不是和align-items类似呢,不好理解和align-items的区别?请仔细看我们两者对比的例子
justify-content属性控制子元素在主轴上的对齐方式,支持flex-start 、 flex-end 、 center 、 space-between 、 space-around对齐方式。
css flex align-items属性子元素在交叉轴上对齐方式,如果不好理解,可以把flex-direction为row可以理解成垂直对齐方式即可,有flex-start 、 flex-end 、 center 、 baseline 、 stretch可选值。
css flex flex-flow属性为flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
Ant Design Vue Radio单选框分组
css flex flex-wrap属性,子元素换行方式支持nowrap、wrap、wrap-reverse,默认nowrap不换行。
css flex-direction属性,子元素在主轴的排列方向,有row、row-reverse、column、column-reverse四个值可选。
Ant Design Vue Radio单选框用法
Ant Design Vue Mentions属性和事件
Ant Design Vue提供了Mentions组件来实现类似@和#话题的功能,比如在微博和微信群中我们会用@符号去提醒某个人注意,也会用#符号去创建新的话题,Ant Design Vue在1.5.0+新增了此功能,用起来也特别的简单。
Ant Design Vue InputNumber数字输入框属性和事件