css flex 左边固定右边自适应

css flex 左边固定右边自适应是我们开发中常见的一种布局,本章节将来演示如何用css flex来实现左边固定右边自适应的布局。

Ant Design Vue Radio属性和事件

Ant Design Vue Radio属性和事件列表

Ant Design Vue Radio按钮样式

在实际业务场景中也经常会用按钮样式的Radio,Ant Design也通过了该形式的单选组。

css flex align-self属性

flex align-self属性允许子元素有与其他元素不一样的对齐方式,比如父元素设置align-items: flex-start 那么所有子元素全部从上往下对齐,而设置了align-self属性的子元素可以不遵循这个规则,可覆盖父元素的align-items属性。默认值为auto,表示继承父元素的对齐规则。

css flex 子元素flex属性

css flex 子元素flex属性是flex-grow, flex-shrink 和 flex-basis的简写方式,默认值为0 1 auto,后两个属性可选。

css flex flex-basis属性

flex-basis表示子元素被放入flex容器之前的大小,即你想要的子元素大小而不是其真实大小,子元素最终的大小取决于flex容器的宽度。

css flex flex-shrink属性设置子元素放小比例

flex-shrink属性定义了子元素的缩小比例,默认为1,当父元素空间不足时,子元素将等比例缩小,如果其中一个子元素flex-shrink为0其他为1,那么为0的不缩小其他等比例缩小。

css flex flex-grow属性设置子元素放大比例

css flex flex-grow属性设置子元素放大比例,如果父元素有剩余空间而所有子元素的flex-grow属性设置为1,那么这些子元素等分剩余空间。如果子元素B的flex-grow属性为2,其他子元素都为1,那么B元素占据的剩余空间将比其他子元素多一倍。

css flex order属性子元素的排列顺序

css flex order属性子元素的排列顺序,值越小越排前面。父元素的flex-direction属性也可以对子元素进行排序,但是没有order灵活。

css flex align-content属性在多根交叉轴上对齐方式垂直对齐方式

css flex align-content属性在多根交叉轴(flex-wrap: wrap换行会产生多根交叉轴)上对齐方式垂直对齐方式,功能是不是和align-items类似呢,不好理解和align-items的区别?请仔细看我们两者对比的例子

css flex justify-content属性,子元素在主轴上的对齐方式。

justify-content属性控制子元素在主轴上的对齐方式,支持flex-start 、 flex-end 、 center 、 space-between 、 space-around对齐方式。

css flex align-items属性 交叉轴上对齐方式垂直对齐方式

css flex align-items属性子元素在交叉轴上对齐方式,如果不好理解,可以把flex-direction为row可以理解成垂直对齐方式即可,有flex-start 、 flex-end 、 center 、 baseline 、 stretch可选值。

css flex flex-flow属性为flex-direction属性和flex-wrap属性的简写形式

css flex flex-flow属性为flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

Ant Design Vue Radio单选框分组

Ant Design Vue Radio单选框分组

css flex flex-wrap属性,子元素换行方式

css flex flex-wrap属性,子元素换行方式支持nowrap、wrap、wrap-reverse,默认nowrap不换行。

css flex flex-direction属性,子元素在主轴的排列方向

css flex-direction属性,子元素在主轴的排列方向,有row、row-reverse、column、column-reverse四个值可选。

Ant Design Vue Radio单选框用法

Ant Design Vue Radio单选框用法

Ant Design Vue Mentions属性和事件

Ant Design Vue Mentions属性和事件

Ant Design Vue Mentions提及@功能和# 话题功能

Ant Design Vue提供了Mentions组件来实现类似@和#话题的功能,比如在微博和微信群中我们会用@符号去提醒某个人注意,也会用#符号去创建新的话题,Ant Design Vue在1.5.0+新增了此功能,用起来也特别的简单。

Ant Design Vue InputNumber数字输入框属性和事件

Ant Design Vue InputNumber数字输入框属性和事件