首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Spectre.css - Break flexbox移到另一行,而不是缩小?

Spectre.css是一个轻量级的CSS框架,用于构建响应式的Web界面。它提供了一套简洁、现代化的样式和组件,可以帮助开发人员快速搭建美观且易于维护的网页。

在Spectre.css中,flexbox是一种强大的布局模型,可以实现灵活的盒子布局。当flex容器中的项目过多时,如果宽度不足以容纳所有项目,flexbox默认会将项目缩小以适应容器。然而,有时候我们希望将项目移到下一行而不是缩小,这时可以使用Spectre.css提供的类名来实现。

要将flexbox项目移到另一行而不是缩小,可以使用Spectre.css中的.flex-break类。将该类应用于需要移动的项目上,当容器宽度不足时,该项目将被移到下一行显示。这样可以确保项目的可读性和布局的合理性。

Spectre.css官方文档中关于.flex-break类的详细介绍和使用示例可以在以下链接中找到: Spectre.css - Flex Break

总结:

  • Spectre.css是一个轻量级的CSS框架,用于构建响应式的Web界面。
  • flexbox是Spectre.css中的一种布局模型,可以实现灵活的盒子布局。
  • 使用.flex-break类可以将flexbox项目移到另一行而不是缩小。
  • 更多关于Spectre.css的信息和使用示例,请参考官方文档中的链接。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS_Flex 那些鲜为人知的内幕

Grid 和 Flexbox 的区别在于,Grid 适用于布局具有列和的二维内容, Flexbox 适用于布局具有「一维内容」,即单个列或。...我们将很快揭开这个谜团,但首先,我需要分享另一个对齐属性:align-self。 与justify-content和align-items不同,align-self应用于子元素,不是容器。...原因是:除了假设大小之外,Flexbox 算法还关心另一个重要的大小:「最小大小」。 ❝Flexbox算法拒绝将子元素缩小到其最小大小以下。...在每一内,align-items允许我们将每个单独的子项上下滑动。 然而,在整体上,我们有两行在一个单一的 Flex 上下文内!现在,交叉轴将与两行相交,不是。...因此,我们不能单独移动,我们需要将它们作为一个组进行分配。 使用我们上面的定义,我们正在处理内容,不是项目。但我们仍然在谈论交叉轴!因此,我们想要的属性是align-content。

26110
  • CSS Flexbox 可视化手册

    Flexbox同一时间只能控制或列中的一个维度。对于二维控制需要 CSS 网格布局。 ? 首先给出如下模板: ?...在默认情况下,flex-wrap被设置为 nowrap,这意味着如果容器不能适应在其内的中原始宽度的项目,则这些项目将会缩小来进行适应。 如果它们因为某种原因无法收缩,则会溢出容器。...其中,每个项目都会缩小到大约 70px 来适合容器。 当属性被更新为wrap时,现在项目的宽度实际上是原始值300px。 当第一不足以容纳300px时,则该项目将换行到新的一不是溢出容器。...Flex Wrap — Wrap Reverse 通过使用 flex-direction:column反转主轴,不适应的元素会被换到另一列,剩余空间被均匀分割。 ?...由于flexbox是单维度布局,所以在进行反转时,项目从下到上进行排列(对于方向),但保持左右结构,只改变了交叉轴。

    3.1K20

    CSS(六)

    Flexbox 布局旨在提供一种更有效简便的布局解决方案,可以很容易的实现各种布局。 注意: Flexbox 布局最适合应用程序的组件和小规模布局, Grid 布局则适用于更大规模的布局。...(Flexbox 是一种一维布局方案, Grid 是一种二维布局方案) 概述 Flexbox 是一个完整的模块不是单个属性,其中一些是在容器上设置的(父元素,称为 “Flex 容器”),而其他的则设置在子元素上...,最后一处于容器尾部 space-around: main-cross 均匀分布,每行间距等宽 stretch(默认): 每行的 items 伸展以占据剩余空间 .container { align-content...|| ] } 该属性有两个快捷值: auto(1 1 auto) none(0 0 auto) 建议优先使用这个属性,不是单独写三个分离的属性,因为浏览器会推算相关值...但这里有一个较为特殊情况,就是当这一所有 item 的 flex-shrink 都为 0 时,也就是说所有的子项都不能缩小,就会出现讨厌的横向滚动条 总结上面四点,可以看出不管在什么情况下,在同一时间

    1K10

    防御式CSS是什么?这几点属性重点防御!

    问题是,当空间不足时,那些子项默认不会被包裹成一个新的。我们需要用 flex-wrap: wrap 来改变这一为。 下面是一个典型的例子。...固定高度 我经常看到主内容部分有固定的高度,内容却大于这个高度,这就导致了布局的破坏。...CSS Flexbox中的最小内容尺寸 如果一个 flex 项目中的文本元素或图像大于或长于该项目本身,浏览器就不会缩小它们。这是Flexbox 的默认行为。...即使我们使用 overflow-wrap: break-word,也不会起作用。...auto-fill将保留可用的空间,不改变网格项的宽度。 也就是说,使用auto-fit可能会导致网格项目太宽,特别是当它们小于预期时。考虑一下下面的例子。

    4.4K30

    前端-CSS Grid中的陷阱和绊脚石

    为什么使用CSS Grid不是CSS Flexbox? 在CSS网格布局在浏览器中可用之前,很多人都认为Flexbox是我们所有设计相关问题的答案。...使用Flexbox,你可以选择是否将这些项列成一或列,一个或另一个,不是两个。 这里有一个简单的示例,突出其区别。第一个布局使用Flexbox,为了能尽可能多的使用盒子,以适合可用的宽度。...如果相反,你希望单个项目在一中进行扩展,不考虑上面一中发生的情况,那就应该使用Flexbox布局更为合适。 不管你想要展示的是一个完整的页面,还是一个很小的组件。...在我的例子中,这个词意味着其成为最宽的东西,网格轨首缩小以适应它。  ...如果你在隐式网格中添加了,然后尝试以-1来指定目标,你将会发现你得到是显式网格的最后网格线,不是实际网格最末端的网格线。

    4.8K20

    【CSS】253- 从原型图到成品:步步深入 CSS 布局

    我们把外层容器(绿色方框)设置为列,蓝色方框设置为红色方框中的元素排布在列中。 ? 为何选 Flexbox 布局,不选 Grid 布局?...由于一些原因,我决定用 Flexbox 布局不用 Grid 布局。我觉得 Flexbox 布局更易于学习,也更适用于轻量级的布局。当布局中主要是或者主要是列时,Flexbox 布局的表现更出色。...另一个重点就是,即使 Grid 布局比 Flexbox 布局年轻,前者也撼动不了后者的地位。它们各自适用于不同的场景,对于二者,我们都要学习,技不压身。...margin 和 padding 那…… 为什么用 margin 不用 padding?为什么要设置在头像右侧,不是文字内容左侧呢?... .actions li 选择器,意即 “actions 类元素中所有的 li 元素”。它是类选择器和元素选择器的结合。 复合选择器中用以分隔的空格代表着选择范围的缩小

    4.4K51

    提名推荐!15个2019年最佳CSS框架

    这些预先准备好的框架可以让工程师们在一个相对成熟的模板上进行定制和延伸,不是从0开始开发。 最棒的一点是,尽管开发的项目不尽相同,但很多CSS框架依旧可以重复利用,这将在更大程度上节省时间。...和Milligram一样,它的体量也非常轻小,仅包含400源代码,但它具有的栅格设计、版式、按钮、表单、列表、表格等功能,依旧可以帮助开发人员快速创建项目。...Spectre.css是一个轻量级,响应式和现代化的CSS框架,它基于Flexbox布局创建,具备比较优雅的设计外观、版式以及组件。...Flexbox是框架吗? Flexbox不是框架。...HTML不是框架。HTML(Hypertext Marked Language)中文为超文本标记语言,是一种标记语言。

    2.7K10

    2018年十大轻量级的CSS框架为构建快速网站

    1、Pure CSS 只有3.8KB的缩小和压缩,但是充满了功能!多年来,纯CSS一直是我选择的轻量级框架,包括与外包软件开发团队合作。 ?...在线演示 2、Bulma 使用21kB缩小和压缩,Bulma并不是这个列表中最轻量级的,但是这个新的框架非常有趣,它完全值得一提。...在线演示 5、Skeleton 只有400代码,架构就像羽毛一样轻。然而,它的特点是网格、排版、表单、媒体查询……你需要的只是在任何时候建立一个高质量的网站。 ?...在线演示 7、Spectre 一个轻量级的(~10KB gzipped)起点为您的项目,“魔影”提供优雅的设计和开发的元素,以及一个基于flexbox的、响应性和移动友好的布局。 ?...只有2kb的gzipped,这个小巧强大的框架在轻量级框架的前三种。 ? 在线演示 9、Dead Simple Grid 不是一个真正的框架,而是一个简单的网格布局,可以在每个项目中使用。

    1.2K20

    【CSS】1287- 一 CSS 实现 10 种强大的布局

    这是营销网站的常见布局,例如,可能有一 3 个项目,通常带有图像、标题,然后是一些描述产品某些功能的文本。在移动设备上,我们希望它们能够很好地堆叠,并随着我们增加屏幕尺寸扩展。...通过使用 Flexbox 实现此效果,您不需要在屏幕尺寸发生变化时通过媒体查询来调整这些元素的位置。...但是,这次是水平尺寸(宽度)不是垂直尺寸(高度)。...图片 另一种方法是使用 span 关键字。使用 span ,您可以设置起始线,然后设置从该起点跨越的列数。...; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } 您再次使用 repeat ,但这次使用 auto-fit 关键字不是显式数值

    4.6K20

    分享一次纯 css 瀑布流 和 js 瀑布流

    : avoid; -webkit-column-break-inside: avoid; break-inside: avoid; background: #f60; color: #fff...column-count: 1; /* two columns on larger phones */ } } 那么以上代码产生的效果是: [a8o2a0y1o6.jpeg] 也是根据屏幕大小自适应改变列数 flexbox...同样的,响应式设置,使用 Flexbox 实现响应式布局比多列布局 Multi-columns 要来得容易,他天生就具备这方面的能力,只不过我们这里需要对容器的高度做相关的处理。...// item 的 top 值:第一:top 为 0 // 其他:必须算出图片宽度在 item 宽度的缩小比例,与获取的图片高度相乘,从而获得 item 的高度 //...find("img").height(); var width = $(this).find("img").width(); var bi = itemWidth/width; // 获取缩小的比值

    2.3K40

    flexbox 布局

    使用flexbox 要开始使用flexbox,必须先让父元素变成一个flex容器,此时子元素就变成了flex项目。...(默认) || column || row-reverse || column-reverse 简单来说就是flex-direction属性让你决定flex项目如何排列,其实水平和垂直在flex中不是方向概念...当一再不能包含所有列表项的默认宽度,就会多行排列。 除此之外,还有一个值wrap-reverse。它让flex项目在容器中多行排列,只是方向是相反的。...order || flex-grow || flex-shrink || flex-basis order 允许flex项目在一个flex容器中重新排序,基本上可以改变flex项目的顺序从一个位置移到另一个地方...flex-shrink属性控制flex项目在容器没有额外空间又如何缩小。默认值1。 取值范围是0或者大于0的任何正数值,这个数值是设置flex项目在容器中所占比。

    89840

    声明式 UIKit 在有赞美业的实践

    FlexBox 自从被 W3C 提出之后,就被前端发扬光大,所有浏览器都已经得到了支持。...由于提供的是约束,强调视图“之间”的相互关系,意味着关系一旦定下来,修改约束(包括添加和移除视图),必定会影响到另一个视图的引用,从而导致代码移植性不高。...同时布局是通过每一代码的描述来约定与其他视图之间的布局关系,在修改 UI 之前,出了需要看明白视图创建流程,还要熟读每一的约束,了解清楚它们之间的关系才能修改。...然而有赞美业是有赞最早迁移到 Swift 的项目,迁移 Swift 后的代码,对 C++ 的兼容其实有一定的局限性,若过多使用 C++,在代码中也不能体现 Swift 的优雅性。...四、未来 虽然现在暂时实现了我们所需要的功能,但依旧是建立在 UIKit 之上的,声明的并不是 UI 描述,而是直接的UI树,这意味着我们的任何一个布局都是一层 View,无可避免地会在一定程度上加重了我们的

    1.4K30

    flexbox基本原理

    wrap-inverse: 换行,但是折方向相反,(比如默认是折到下一,但是这个属性会导致折到上一)。...flex-shrink 如果孩子的总宽度超过了容器宽度(主轴),那么这个属性定义了如何把超过的那部分平分到每个孩子身上,然他们按比例来缩小一定的宽度从而可以在容器中装得下。...强烈建议用这个属性,不是分别设定三个属性,因为这个属性可以“聪明地”设定三个属性来达到你要的效果。 你可以认为 flex 属性就是定义了每个孩子分隔父容器宽度的比例。...而且为什么强烈推荐用flex,不是分别设定三个属性,是因为 flex 属性会自动计算 flex-basis 属性的值。...加上自身宽度之后比例 显然不是 1-2-1。

    1.1K70

    阅读Mijin有感

    主轴由 flex-direction 定义,另一根轴垂直于它。...这也是为什么flexbox的很多属性都是使用的start和end,不是左和右。 flex容器中的直系子元素就会变为 flex 元素。...所有 CSS 属性都会有一个初始值,所以 flex 容器中的所有 flex 元素都会有下列行为: 元素排列为一 (flex-direction 属性的「初始值是 row」)。...如果有太多元素超出容器,它们会溢出不会换行。也就是不会在主轴上拉伸,但可以缩小。直到放不下之后溢出(默认不换行)。元素在交叉轴默认是被拉伸(默认值)的,高度由最高的那个元素决定。...需要注意的是这里的 url 解码和我们发送到服务器的 url 解码不同,那个过程是由服务器来完成的,不是浏览器。

    1.1K20

    【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    在构建页面的时候,我们可以通过 Flexbox 高效地完成页面代码,虽然并不是所有属性都可以全平台适应的,但是它在全平台都能够得到足够的支持,而且所有平台可以很容易通过它来绘制通用性很高的页面,这也就是为什么我们选择使用...Flexbox 布局 (Flexible Box Layout) Flexbox 是弹性布局模块(CSS Flexible Box Layout Module)常用的简称,是一种用于在单个维度中显示项目或列的布局模型...在规范中, Flexbox 被描述为用户界面设计的布局模型。Flexbox 的关键特性是 flex 布局中的项目可以增长和缩小。可以将空间分配给项目本身,或者在项目之间或周围分配空间。...wrap flex 元素被打断到多个中。交叉轴的起点会根据 flex-direction 的值选择等于start 或before。交叉轴的终点为确定的交叉轴的起点的另一端。...这两个方案都不是合适的方案,那么我们该怎么做呢?试着去打破小程序的组件限制么?我们在微信小程序官方的文档中找到 externalClasses 这个方法,可以先来尝试。

    3.4K30
    领券