点击 methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTar...
flex-1 即 flex: 1 1 0; justify-center 即 justify-content:center; items-center 即 align-items: center; flex-col 即 flex-direction: column; #item1 #item2 #item3 #item4 #item5 #item6<
Flex 1 Useflex-1to allow a flex item to grow and shrink as needed, ignoring its initial size: 01 02 03 010203 Auto Useflex-autoto allow a flex item to grow and shrink, taking into account its initial size: 01 02 03 010203</...
比如横向布局，竖向布局，垂直居中，水平居中，着实非常好用，当然，超低版本安卓有一些兼容性问题，但是...
.flex-row 水平排列 .flex-col 竖直排列 .flex-row-reverse 反向水平排列 .flex-col-reverse 反向竖直排列 Flex Direction flex-row123flex-col
5)尺寸 (w-1, h-1) 开发大型应用的时候,每一个 HTML 元素都充斥着一大堆 Tailwind 的工具类名。 hello world 问题: 要怎么组织这些类名呢?也许我们要创建并遵循某个排序规则。 解决方案: 部分HTML 元素会使用非常多的样式,这种情况下应该考虑将样式与 HTML 标签进行分离,单独放到某个文件里。
1.自适应显示 (1)invisible sm:visible md:text-red-500 lg:text-8xl, (2)flex flex-col text-4xl sm:flex-row, (3)m-4 rounded-md bg-red-500 px-4 py-2 text-white hover:bg-red-600 active:bg-red-400 sm:bg-indigo-500 sm:hover:bg-indigo-600 sm:active:bg-indigo-400 ...
可以使用 flex+百分比 来实现: {items.map((item) => ( ))} 另外也可以使用 grid 布局来实现: {items.map((item) => ( ))} js 获取布局情况 某些情况下,我们可能需要在事件回调中获取当前所处的断点和布局情况,比如,我们需要在点击某个按钮后,获取当前的布局情况,然后根据布局情况做一些...
item">爱好1爱好2爱好3爱好4爱好5爱好6爱好7爱好8爱好9爱好10性别
• left-4: 距离左侧距离为 1rem 3.1.6 显示/隐藏类 显示/隐藏类用于控制元素的可见性。示例: • hidden: 元素隐藏 • block: 块级元素显示 • md:inline: 在中等屏幕大小以上以内联形式显示 3.1.7 Flex 类 Flex 类用于实现弹性布局。示例: ...