获取海报!
经常参考本指南?这里有一张您可以打印的高分辨率图像!
背景
Flexbox 布局
(弹性盒)模块(截至 2017 年 10 月的 W3C 候选推荐)旨在提供一种更有效的方法来布局、对齐和分配容器中项目的空间,即使它们的大小未知和/或动态(因此是“弹性”)。
弹性布局背后的主要思想是赋予容器改变其项目宽度/高度(和顺序)的能力,以最佳方式填充可用空间(主要用于适应各种显示设备和屏幕尺寸)。弹性容器会扩展项目以填充可用空闲空间,或收缩项目以防止溢出。
最重要的是,弹性盒布局与方向无关,而常规布局(垂直为基础的块布局和水平为基础的行内布局)则与方向有关。虽然这些布局对页面来说效果很好,但它们缺乏灵活性(没有双关语意)来支持大型或复杂应用程序(尤其是在方向变化、调整大小、拉伸、收缩等方面)。
**注意:** 弹性盒布局最适合应用程序的组件和小规模布局,而网格布局则适用于更大规模的布局。
基础和术语
由于 flexbox 是一个完整的模块,而不是单个属性,因此它涉及很多内容,包括其所有属性。其中一些属性是为容器(父元素,称为“flex 容器”)设置的,而其他属性是为子元素(称为“flex 项目”)设置的。
如果“常规”布局基于块流和行内流方向,则 flex 布局基于“flex 流方向”。请查看规范中的这张图,了解弹性布局背后的主要思想。
项目将按照主轴
(从main-start
到main-end
)或交叉轴(从cross-start
到cross-end
)进行排列。
- **主轴** – 弹性容器的主轴是弹性项目沿其排列的主要轴。请注意,它不一定是水平的;它取决于
flex-direction
属性(见下文)。 - **main-start | main-end** – 弹性项目从 main-start 开始,一直到 main-end 在容器中放置。
- **主尺寸** – 弹性项目的宽度或高度(无论哪个在主维度上)就是该项目的“主尺寸”。弹性项目的“主尺寸”属性是“width”或“height”属性中的任何一个,无论哪个在主维度上。
- **交叉轴** – 垂直于主轴的轴称为交叉轴。它的方向取决于主轴的方向。
- **cross-start | cross-end** – 弹性线用项目填充,并从弹性容器的 cross-start 侧开始,一直到 cross-end 侧放置在容器中。
- **交叉尺寸** – 弹性项目的宽度或高度(无论哪个在交叉维度上)就是该项目的“交叉尺寸”。“交叉尺寸”属性是“width”或“height”属性中的任何一个,无论哪个在交叉维度上。
Flexbox 属性
(flex 容器)
父元素的属性display
这定义了一个弹性容器;根据给定值,它可以是内联或块级元素。它为其所有直接子元素启用弹性上下文。
.container {
display: flex; /* or inline-flex */
}
请注意,CSS 列对弹性容器没有影响。
flex-direction
这将建立主轴,从而定义弹性项目在弹性容器中的放置方向。弹性盒子是一种单方向布局概念(除了可选的换行)。可以将弹性项目视为主要水平排列成行或垂直排列成列。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row
(默认):在ltr
中从左到右;在rtl
中从右到左row-reverse
:在ltr
中从右到左;在rtl
中从左到右column
:与row
相同,但从上到下column-reverse
:与row-reverse
相同,但从下到上
flex-wrap
默认情况下,弹性项目都会尝试适应一行。可以使用此属性更改此设置,并允许项目根据需要换行。
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap
(默认):所有弹性项目都将在一行上wrap
:弹性项目将换行到多行,从上到下。wrap-reverse
:弹性项目将换行到多行,从下到上。
这里有一些关于 flex-wrap
的 视觉演示。
flex-flow
这是 flex-direction
和 flex-wrap
属性的简写,它们一起定义了弹性容器的主轴和交叉轴。默认值为 row nowrap
。
.container {
flex-flow: column wrap;
}
justify-content
这定义了沿主轴的对齐方式。它有助于分配当一行上的所有弹性项目都是不可伸缩的,或者可伸缩但已达到其最大大小时,剩余的额外空闲空间。它还在弹性项目溢出该行时对项目的对齐方式施加一些控制。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
flex-start
(默认):项目将被压缩到弹性方向的开头。flex-end
:项目将被压缩到弹性方向的末尾。start
:项目将被压缩到writing-mode
方向的开头。end
:项目将被压缩到writing-mode
方向的末尾。left
:项目将被压缩到容器的左侧边缘,除非这与flex-direction
不一致,在这种情况下,它将表现得像start
。right
:项目将被压缩到容器的右侧边缘,除非这与flex-direction
不一致,在这种情况下,它将表现得像end
。center
:项目将沿该行居中space-between
:项目在该行中均匀分布;第一个项目在起始行,最后一个项目在末尾行space-around
:项目在该行中均匀分布,并在它们周围留有相等的空间。请注意,视觉上空间并不相等,因为所有项目都两侧留有相等的空间。第一个项目将与容器边缘相隔一个单位空间,但在下一个项目之间将留有 2 个单位空间,因为下一个项目有其自己的间距适用。space-evenly
:项目将分布以便任何两个项目之间的间距(以及到边缘的间距)相等。
请注意,这些值的浏览器支持存在细微差别。例如,某些版本的 Edge 从未支持 space-between
,并且 start/end/left/right 尚未出现在 Chrome 中。MDN 提供了详细的图表。最安全的价值观是 flex-start
、flex-end
和 center
。
还可以将这两个附加关键字与这些值配对:safe
和 unsafe
。使用 safe
可确保无论如何进行此类定位,都不会将元素推到屏幕外(例如,推到顶部)以至于内容无法滚动(称为“数据丢失”)。
align-items
这定义了弹性项目在当前行上沿**交叉轴**布局的默认行为。可以将其视为 justify-content
的交叉轴版本(垂直于主轴)。
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
stretch
(默认):伸展以填充容器(仍然尊重最小宽度/最大宽度)flex-start
/start
/self-start
:项目将放置在交叉轴的开头。它们之间的区别很细微,在于是否尊重flex-direction
规则或writing-mode
规则。flex-end
/end
/self-end
:项目将放置在交叉轴的末尾。再次,区别很细微,在于是否尊重flex-direction
规则或writing-mode
规则。center
:项目将交叉轴居中baseline
:项目将对齐,使其基线对齐
safe
和 unsafe
修饰符关键字可以与所有其他关键字一起使用(尽管请注意 浏览器支持),并且有助于防止对齐元素以至于内容变得无法访问。
align-content
此属性用于在交叉轴上有额外空间时对齐 flex 容器的线条,类似于 `justify-content` 如何在主轴上对齐单个项目。
注意:此属性仅对多行弹性容器生效,其中 `flex-wrap` 设置为 `wrap` 或 `wrap-reverse`。单行弹性容器(即 `flex-wrap` 设置为其默认值 `no-wrap`)不会反映 `align-content`。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
normal
(默认):项目按默认位置排列,就像没有设置任何值一样。flex-start
/start
:项目排列在容器的开头。更受支持的 `flex-start` 遵循 `flex-direction`,而 `start` 遵循 `writing-mode` 方向。flex-end
/end
:项目排列在容器的末尾。更受支持的 `flex-end` 遵循 `flex-direction`,而 `end` 遵循 `writing-mode` 方向。center
:项目在容器中居中。space-between
:项目均匀分布;第一行在容器的开头,而最后一行在末尾。space-around
:项目均匀分布,每行周围有相等的间隔。space-evenly
:项目均匀分布,它们周围有相等的间隔。stretch
:线条拉伸以占据剩余的空间。
safe
和 unsafe
修饰符关键字可以与所有其他关键字一起使用(尽管请注意 浏览器支持),并且有助于防止对齐元素以至于内容变得无法访问。
gap, row-gap, column-gap
`gap` 属性明确控制弹性项目之间的间距。它仅在项目之间应用间距,而不是在外部边缘。
.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
可以将其行为视为最小间距,就像间距更大(例如,由于 `justify-content: space-between;`)一样,则间距仅在该间距最终变小的情况下才生效。
它不只适用于 flexbox,`gap` 也适用于网格和多列布局。
(弹性项目)
子元素的属性order
默认情况下,弹性项目按源代码顺序排列。但是,`order` 属性控制它们在弹性容器中显示的顺序。
.item {
order: 5; /* default is 0 */
}
具有相同 `order` 的项目将恢复为源代码顺序。
flex-grow
此属性定义弹性项目在必要时增长的能力。它接受一个无单位的值,用作比例。它指示项目应占用弹性容器内可用空间的多少比例。
如果所有项目的 `flex-grow` 都设置为 `1`,容器内的剩余空间将平均分配给所有子元素。如果一个子元素的值为 `2`,则该子元素将占用其他子元素的 2 倍空间(或者至少会尝试)。
.item {
flex-grow: 4; /* default 0 */
}
负数是无效的。
flex-shrink
此属性定义弹性项目在必要时收缩的能力。
.item {
flex-shrink: 3; /* default 1 */
}
负数是无效的。
flex-basis
此属性定义分配剩余空间之前的元素的默认大小。它可以是长度(例如,20%、5rem 等)或关键字。`auto` 关键字表示“查看我的宽度或高度属性”(在 `main-size` 关键字被弃用之前,它暂时使用 `main-size` 关键字来执行此操作)。`content` 关键字表示“根据项目内容的大小来确定大小” - 此关键字尚未得到很好的支持,因此难以测试,更难知道其同类 `max-content`、`min-content` 和 `fit-content` 的作用。
.item {
flex-basis: | auto; /* default auto */
}
如果设置为 `0`,则不会考虑内容周围的额外空间。如果设置为 `auto`,则额外空间将根据其 `flex-grow` 值进行分配。查看此图形。
flex
这是 `flex-grow`、`flex-shrink` 和 `flex-basis` 的简写形式。第二个和第三个参数(`flex-shrink` 和 `flex-basis`)是可选的。默认值为 `0 1 auto`,但如果使用单个数字值进行设置,例如 `flex: 5;`,则会将 `flex-basis` 更改为 0%,因此它类似于设置 `flex-grow: 5; flex-shrink: 1; flex-basis: 0%;`。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
建议您使用此简写属性,而不是设置各个属性。简写会智能地设置其他值。
align-self
这允许覆盖单个弹性项目默认的对齐方式(或由align-items
指定的对齐方式)。
请参阅align-items
说明以了解可用值。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
请注意,float
、clear
和vertical-align
对弹性项目没有影响。
Flexbox 前缀
Flexbox 需要一些供应商前缀才能尽可能支持最多的浏览器。它不仅仅包括在属性前面加上供应商前缀,而且实际上有完全不同的属性和值名称。这是因为 Flexbox 规范随着时间的推移而发生变化,形成了“旧”、“过渡”和“新”版本。
也许最好的方法是用新的(也是最终的)语法编写,然后将您的 CSS 通过Autoprefixer运行,它可以很好地处理回退。
或者,这里有一个 Sass @mixin
来帮助处理一些前缀,这也让您了解需要做什么样的操作
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
.wrapper {
@include flexbox();
}
.item {
@include flex(1 200px);
@include order(2);
}
示例
让我们从一个非常非常简单的示例开始,解决一个几乎每天都会遇到的问题:完美居中。如果您使用 Flexbox,再简单不过了。
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
这依赖于在 Flex 容器中设置为auto
的边距会吸收额外的空间。因此,设置auto
的边距将使项目在两个轴上完美居中。
现在让我们使用更多属性。考虑一个包含 6 个项目的列表,所有项目都具有固定尺寸,但可以自动调整大小。我们希望它们均匀地分布在水平轴上,这样当我们调整浏览器大小时,所有内容都能很好地缩放,并且无需媒体查询。
.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
}
完成了。其他所有内容只是样式问题。下面是一个包含此示例的笔。请务必访问 CodePen 并尝试调整您的窗口大小,看看会发生什么。
让我们尝试其他一些东西。想象一下,我们在网站最顶部有一个右对齐的导航元素,但我们希望它在中等大小的屏幕上居中,在小型设备上单列显示。很容易。
/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}
让我们尝试通过玩转弹性项目灵活性来实现更好的效果!一个移动优先的 3 列布局,带有全宽的页眉和页脚。并且独立于源顺序。
.wrapper {
display: flex;
flex-flow: row wrap;
}
/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
flex: 1 100%;
}
/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/
/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
Flexbox 技巧!
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
21* | 28 | 11 | 12 | 6.1* |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 4.4 | 7.0-7.1* |
Bug
Flexbox 当然也存在一些 Bug。我见过的最全面的 Bug 集合是 Philip Walton 和 Greg Whitworth 的 Flexbugs。这是一个开源的 Bug 追踪平台,所以我建议直接链接到它。
相关属性
align-content
.element { align-content: space-around; }
align-items
.element { align-items: flex-start; }
align-self
.box { align-self: flex-end; }
column-gap
.example { column-gap: 25px; }
display
.element { display: inline-block; }
gap
.element { gap: 20px 30px; }
justify-items
.element { justify-items: center; }
flex
.element { flex: 1 1 100px; }
flex-basis
.element { flex-basis: 100px; }
flex-direction
.element { flex-direction: column-reverse; }
flex-flow
.element { flex-flow: row wrap; }
flex-grow
.flex-item { flex-grow: 2; }
flex-shrink
.element { flex-shrink: 2; }
flex-wrap
.example { flex-wrap: wrap; }
justify-content
.element { justify-content: center; }
justify-self
.element { justify-self: stretch; }
row-gap
.element { row-gap: 2rem; }
更多信息
- CSS Flexible Box Layout Module Level 1 (W3C)
- CSS Flexbox 速查表 (DigitalOcean)
- 使用 Flexbox 在 CSS 中居中内容 (DigitalOcean)
Flexbox 解决
Flexbox 速查表
深入了解 Flexbox
Flexbox 的使用场景
快速了解 Flexbox 和 Grid 的区别
CSS Grid 是否取代了 Flexbox?
布局用 Grid,组件用 Flexbox
我应该使用 Grid 还是 Flexbox?
别想太多 (Flexbox) Grids
构建多方向布局
Flexbox 中的自动边距如何工作
`flex-grow` 很奇怪。还是?
理解 flex-grow、flex-shrink 和 flex-basis
使用 Flexbox 实现 IE10 兼容的网格自动放置
“旧” Flexbox 和 “新” Flexbox
使用 Flexbox:混合旧版本和新版本以获得最佳浏览器支持
更多资源
- CSS Flexible Box Layout Module Level 1 (W3C)
- CSS Flexbox 速查表 (DigitalOcean)
- 使用 Flexbox 在 CSS 中居中内容 (DigitalOcean)
- CSS 布局:Flexbox (MDN)
- Flexbox 使用案例 (Smashing Magazine)
耶。更少的 JavaScript 和更多的 CSS。有什么不喜欢的?信息很棒,一如既往!
Flexbox 很好,但它仍然不适合简单的完美“产品网格”,没有第一行和最后一行元素的边距,并且左对齐。否则:你能用 flexbox 构建这个布局吗? http://i.snag.gy/VHJsV.jpg 谢谢
@Alex 是的,可以。与非 flex 网格一样,对网格包装器应用负边距左,并将该值应用为所有网格列的填充左。
看看 http://inuitcss.com 如何使用内联块元素实现,这允许你对列应用垂直对齐。
@Alex @Lawrence 这与 flexbox 本身关系不大。
.el:not(:last-of-type)
和类似的排除选择器。负边距是垃圾。@mystrdat 你是对的,它与 flexbox 无关。但是,使用 :not 选择器将无法扩展,并且你会失去 IE8 支持(现在问题不大)。
如果我有一个包含 8 个项目的网格,每个项目占用 25% 的宽度,那么这种方法就会失败,因为第 4 个项目不会与容器边缘齐平。
如果我有一个包含 4 个项目的网格,在桌面上的宽度为 25%,在移动设备上的宽度为 50%,那么这种方法也会再次失败,原因同上。如何管理 3 分之 1、5 分之 1、6 分之 1、12 分之 1 等,以及在列更改时跨视窗使用不同的宽度?
我不会说负边距是垃圾。也许不理想,但它们优雅地解决了复杂问题。 http://tympanus.net/codrops/2013/02/04/creating-nestable-dynamic-grids/
@Alex .. 实际上,它更简单。只需使用
更多 这里
谢谢你的信息。
CSS 工作组在线上有一份关于“CSS 设计中的错误”的文档,其中之一就是这个
你能谈谈他们指的是什么吗?
对于你的最后一个例子,你将如何使内容(中间行)占用所有可用空间,以便在最小的程度上,页脚固定在窗口底部 - 但如果内容区域有更多内容,页脚将向下推,允许滚动。这可以通过在内容行上设置最小高度来实现:calc(100% – header-height – footer-height) 但据我所知,这需要硬编码或 JS 来实现。
@Lawrence 在使用 flex 的时候,IE8 不会成为问题吗?我认为网格解决方案可以用 nth-child 解决。然后使用媒体查询根据用户的屏幕进行适当的调整。
完美的 Flexbox 布局产品(使用 justify-content: space-between 和填充产品)
不过说实话,我不喜欢为了确保最后一行均匀间距而必须使用填充物来实现 Flexbox。
如果他们能为多行换行提供 Flexbox 行选择器,那就太好了。
这是一个使用 display inline-block 的替代实现
你的最后一个例子只在没有内容的情况下有效。如果你在 Aside1 中添加一些文本,3 列布局就会消失。
@Hubert: 是的,3 列布局需要添加这个。
我之前在一个帖子中提到过,假设有人会更新演示。;)
@Josh McCullough 实现起来非常简单,比以前更好更方便。只需使用 flex 属性并将其设置为 1,例如
flex 是一个非常强大的属性,可以在 flex: 1 1 auto 的简写中使用;(grow、shrink 和 basis) - 只使用 flex: 1 告诉它占用所有剩余空间,从而使页脚粘在底部。注意 grid 正式进入浏览器,我们将能在布局方面拥有魔法。
在实际操作中查看: https://codepen.io/anon/pen/WrOqma
好吧,它在很多方面都很糟糕。太冗长,难以管理,它已经围绕它创建了“框架”,只是为了使其易于管理。25 年前我们已经有工具、所见即所得 IDE 和方法来定义 UI 和“响应式”视图……看在老天的份上,我们能回到根源,提出一个简单有效的标记语言,以及 UI 工具和用于视图元素的简单调整大小规则吗?!?
关于
flex
属性说第 2 和第 3 个参数
<flex-shrink>
和<flex-basis>
是可选的有点误导,因为它意味着<flex-grow>
(第一个参数)从不可选。事实是,<flex-grow>
是可选的,只要<flex-basis>
存在(并且显然当值为none
时)。只有在<flex-shrink>
存在时才需要它。<article class="main">
<aside class="aside aside-1">Aside 1</aside>
当这个 article 和 aside 作为 html 标签出现时,我从未知道这一点
@Yazin
那是错误的。Space-between 会将最后一行中的所有项目扩展到整个宽度,这不是 Alex想要的。
你的例子指定了
.main { flex: 2 0px; }
,但你的 codepen 使用了.main { flex: 3 0px; }
。这让我困惑了一会儿……想知道为什么盒子不是我预期的宽度。:p
很棒的文章,谢谢。
哇,太酷了,迫不及待地想试试
嘿,Chris,
非常感谢你撰写了这份全面的文章。
我刚在我的 mac 上将 Firefox 更新到 v20,现在所有的 flex-box 演示都无法运行。在 Chrome 中一切看起来都很好。
还有其他人遇到这个问题吗?
Ch 34.0.1847 在 OSX 10.9.2 上存在问题
感谢你撰写了这份文章,Chris!
FF 2-21 (旧) – (旧) 表示 2009 年的旧语法(例如 display: box;)。
演示使用的是新的 flexbox 规范,需要 FF 22+
在我的 ubuntu 14.04 上使用 firefox 29 不起作用。
我唯一不明白的是,如果语法与建议没有区别,为什么需要使用前缀。
我认为,足够的是(使用上面的例子)
目前,这不受支持,但我认为应该支持,因为这里遗漏的所有内容都具有推荐的语法。如果需要,前缀仍然可用,但不是必需的。
这里很好地解释了对多个供应商前缀规则的需求。 查看带有注释的代码示例…
供应商前缀不仅仅与语法差异有关。它们(可以说更重要的是)区分了实现差异。如果我们只有一个非前缀词来表示一个功能,并且其属性的语法在浏览器之间保持一致,但渲染行为不同,会发生什么?然后,您将不得不进行丑陋的浏览器嗅探,并根据情况为客户端提供不同的文件,就像我们在 IE6 的黑暗时代所做的那样。
一旦每个人都有了正确的实现,然后就可以删除前缀。否则,最流行浏览器的功能实现将成为事实上的标准,即使它是最糟糕的(再次,IE6)。
关于具有 6 个固定尺寸项目的示例,这些项目需要均匀分布 - 使用
justify-content: space-around; 规则
我真的很想使用它,但它并没有完全按照我的预期工作。假设第一行只有 4 个项目的空间,其余的 2 个项目将在第二行均匀分布。(哎呀)
是否有任何方法可以将最后一行的项目放置/对齐在上一行的元素下方(从左到右)?
这是使用网格布局模块可以实现的功能,但目前浏览器不支持。
您始终可以使用表格和 calc()
@Coolcat007 您提到这可以使用表格和 calc() 完成 - 即使项目数量是动态的,也是这样吗?如果是 - 有没有机会提供一个 fiddle / codepen?
谢谢!
要使项目换行到第二行,可以使用 flex-wrap: wrap,然后要对齐第二行的项目,可以使用 align-content 进行操作。
示例
flex-wrap: wrap;
align-content: (可能的 value)
flex-start: 行打包到容器的开头
flex-end: 行打包到容器的结尾
center: 行打包到容器的中心
space-between: 行均匀分布;第一行位于容器的开头,而最后一行位于结尾
space-around: 行均匀分布,每行周围有相等的间距
stretch (默认)
Justify content 仅处理第一行的项目。
@Daniel
抱歉,我误解了您的问题。对于动态数量的项目,这在没有 JS 或 php 的情况下是行不通的。
这确实可以添加。
类似于 align-items:main-axis /cross-axis 可能是一个很棒的补充。
在 Chrome 和 Safari 中运行良好,但我使用的是 FireFox (v21),它根本没有正常工作。它不允许段落换行。它就像将 display:flex 视为 display:inline-flex 一样。我唯一能够解决这个问题的方法是将 Firefox 的 about:config 更改为 multiline,但访问者默认情况下不会设置它。
有人对此有成功经验吗?目前我正在使用 flexbox 针对 webkit,使用 equalize.js 针对其他浏览器。
我认为这是因为 flexbox 直到 v22 才能被 Firefox 完全支持。这就是为什么我目前运行 v22 beta 的原因。在 ff22 发布之前,您始终可以使用 display:box。
如果我在生产中使用它,我是否疯了?我有一个非常尴尬的情况,我不能使用 display: table。它会破坏图像的流动性。
只要您使用可靠的方法来检测对 flex-wrap 的支持低于理想水平(使用 modernizer),并使用基于比率的网格系统(如 Singularitygs)作为后备,您就可以很好地在生产环境中使用 flexbox。
示例:http://sassmeister.com/gist/9781525(切换 flexbox 和 .noflex 选项。)
这是一个可靠的策略,您可以首先使用 flexbox 来规划布局,并快速使用基于比率的网格系统创建后备。
只要您足够细心地有一个样式指南,其中记录了特定组件在实际与两者不同的情况下的外观,您应该没问题。
Flexbox 现在在 Firefox (22) 中已取消前缀。
我找到了一种兼容 compass 的 mixins
在你的第二个 Codepen 例子(蓝色导航栏的那个)中,我搞不明白为什么 flow-direction: column 在最小屏幕宽度下似乎没有生效。我试着修改了一些值,发现明确地给 ul.navigation 添加一些高度可以让 li 垂直堆叠。有没有更好的解决方法,不用硬编码高度?
那是因为在最大 600 宽度下的代码缺少 flex-flow: column wrap; 如果您使用的是 Firefox。它只包含一个用于 web-kit 的代码。在我添加了它之后,它在我的 FF 中表现良好。
感谢您的文章。我发现它很有见地。
第一个例子中的笔(http://codepen.io/HugoGiraudel/pen/LklCv)有点奇怪。我尝试在 CodePen 上重新创建它,发现它不起作用,即使我复制粘贴了代码!然后我尝试在本地重新创建它,复制粘贴,它仍然不起作用。所以我开始使用 Chrome DevTools 查看发生了什么,看起来即使笔使用了
justify-content: space-around;
规则,实际渲染在页面上的却是-webkit-justify-content: space-around;
。原来 CodePen 配置的 Scss 面板打开了 prefix-free。即使是 CodePen 的 prefix-free 为我做了这些工作,混合使用供应商前缀规则和预处理器转换的非前缀规则也是一个不好的做法。
感谢您提供mixin,Chris
不错的文章,Chris。我喜欢您文章的全面性和详细程度。太可惜我们不用 SASS 了,我们几乎完全依赖于 LESS。我们很想为客户使用 Flexbox,但它似乎不能很好地跨浏览器兼容。我在 FF22 和 IE10 中查看了这个页面,它很乱。
您,或者其他人,知道有什么好的 JS polyfills 或插件或解决方案可以使它很好地跨浏览器兼容吗?否则,您认为我们还需要多长时间才能“现实地”使用它,而不会遇到很多跨浏览器兼容性问题?
很棒的文章,Chris。我认为 flexbox 的排序项目的能力在 RWD 中会很有用。
我只有一个问题。当您定义主轴时,您说它的方向取决于 justify-content 属性,但不是 flex-direction 属性定义了弹性项目是横向排列还是纵向排列吗?我是不是理解错了什么?
你说得对,文章中的描述是错误的,现在已经修正了。
嘿,有人知道使用 flexbox 的真实网站吗?
我知道 SM 曾经尝试过使用它,但后来又回到了浮动。
嘿,ZippZipp,
我几个月前尝试用 flexbox 构建我的个人/作品集网站,但对语法感到非常沮丧。我刚发现了这个 Sass 助手 https://raw.github.com/timhettler/compass-flexbox/master/extensions/compass-flexbox/stylesheets/_flexbox.scss,到目前为止它运行良好。我希望在接下来的两周内发布我的新网站,除了 IE 8/9 之外,所有内容都使用 flexbox。
我也想找到一个,但旧的浏览器会让它变得很麻烦... 我宁愿使用浮动来避免头痛和减少代码。
昨天我正在检查我的浏览器支持,我发现 flex 现在在这些版本中没有前缀了,但不幸的是,并非所有人都更新了浏览器版本。
IE11
Mozilla Firefox 27.0.1
Chrome 32.0.1700
Opera 19.0
Safari 仍然使用规则:“display: -webkit-box;”
Safari 5.1.7
我用 flexbox 做了一个学校项目(借助 Autoprefixer):edensg.github.io/ASM2O
我认为您指的是 flex-direction。
我认为在 column-reverse 中,您指的是 但从下到上
感谢您非常详细的解释
Firefox 22+ 具有无前缀的 Flexbox,但不幸的是,它仍然不支持 flex-wrap 属性(因此也不支持 flex-flow 简写)。所以,在 Firefox 中,三列布局缩减为一列的这个很棒的例子看起来真的很乱。但是,可以创建一个在基于 Chromium 的浏览器和 Firefox 23+ 中都起作用的简化模拟:http://codepen.io/anon/pen/pEIKu
哇,这真的是我读过的关于这个主题的最佳文章之一。您提到的步骤非常完美。
嘿,Cris!看起来“flex-wrap”在 Firefox 和 Opera 中不正确地工作了!番茄块和最后一个演示都没有工作!
已经有解决方法了吗?
非常感谢您的网站!;)
是的,目前只有最新的基于 Chromium 的浏览器,如 Chrome、Opera 16+ 等,似乎支持多行弹性盒。作为解决方法,您可以将嵌套弹性盒与媒体查询结合使用,如上面的 我的评论 中所示(它不像真正的多行弹性盒那样灵活,但总比没有好)或使用优雅降级到旧的技术,如内联块。
我发现,在 Chrome 29 中,
<input />
和<label>
不尊重order
。还有其他人观察到这种情况,或者有想法解释原因吗?弹性盒是 CSS 自诞生以来一直严重缺乏的东西——一种无需浮动、清除、margin: 0 auto 和 JS 技巧即可轻松创建灵活网页布局的方法。我期待着弹性盒得到足够多的浏览器市场份额的那一天,以便将其应用到我们所有的生产网站中。
感谢您提供精彩的教程,我刚刚成功地利用这些知识创建了一个构建锦标赛分组的便捷方法!您可以在 http://cdpn.io/qliuj 查看代码笔。
我发现自己忍不住要像伯恩斯先生一样说“太棒了”,因为我对
align-items: stretch
非常兴奋。我正在尝试让我的视频丰富网站“FLEX”。该网站的缩放效果还可以,但 Vimeo iframe 视频却没有。
我尝试使用 FitVids.js 脚本来解决这个问题,但我不知道如何在 Weebly 模板中使用它。(是的,我知道我不是网站专业人士,我对 CSS 或 HTML 一无所知)但我被分配了这项工作,我需要让它正常工作。任何帮助都将不胜感激。使用 Firefox 浏览器中的 Firebug 插件,我看到了关于弹性盒的代码... 我该如何修改它才能让视频成为弹性盒?
我真的很喜欢这篇文章。它帮助我开始了我的项目。
我和这里其他用户一样,在 Firefox 上遇到了问题,但我通过将列/行包装在更多容器中(就像用户建议的那样)解决了这个问题。
不过,我还有另一个问题。这次是关于 IE11 的。如果您查看您关于菜单的示例,您会发现,在最小的宽度下,菜单没有显示为列,而是保持为行。
在我的情况下,我在 IE 上遇到了不同的问题:列显示了,但里面的项目没有高度!所以一切都毫无道理地崩溃了。当然,在 Chrome 和 Firefox (25) 中一切正常。
关于弹性增长部分有一个错别字。它不会影响理解内容,但如果您能修正它会更好。
W3C 需要行动起来,尽快推动此事。一致的浏览器实现将使创建布局变得更加容易。
只有我一个人认为这篇文章应该放在“文章”部分吗?
Chris,我无法在印刷媒体中垂直对齐一些内容,您知道在哪里可以找到有关这种支持的更多信息吗?
我的测试看起来像这样,
CSS
HTML
并非所有浏览器都支持分页媒体,分页媒体示例在没有弹性盒的情况下是否有效?
Firefox 支持表中的 22+ (new) 是什么意思?
意思是 Firefox 的版本 22,这是文章撰写时的最新版本。
而 + 表示“以及更高版本”。
这是我读过的最好的文章之一。谢谢!
不错的教程。自本教程发布以来,是否有任何变化?
它在我使用 IE10 的情况下也不起作用。
IE 10 具有 过渡语法,因此请确保您为此添加前缀。Autoprefixer 在编写最新语法和处理回退方面做得很好。
好文章。看到即将出现的趋势很有帮助。我现在与之合作的公司使用 IE8,所以我必须等到他们升级到更高版本的 IE。我一直想知道为什么 CSS 中一直缺乏良好的布局系统。有总比没有好。我期待在带有 Webkit 的触摸设备上使用它。
干得好!
当一个弹性盒设置为列流,另一个设置为列反向流时,两个水平对齐的弹性盒遇到了问题。
查看代码笔:弹性盒对齐示例
我该如何解决?谢谢!
查看 Flexbox 列反转下一个元素对齐 by Brad Spencer (@bradomail) on CodePen.
我认为这是一个简单的解决方法。你需要将容器(#window)设置为 flex,这样你的两个
<ul> 将成为 flex 子元素。
哇,这确实很简单!
谢谢 Justin。
您好,
在您的第一个示例中,子元素通过(神奇的!)margin: auto; 居中。
如果子元素没有定义高度(例如,高度由内容决定),则此解决方案在 IE11 中无效。
所有其他浏览器按预期运行。
我今天尝试了一下。我对它很感兴趣,但同时也有些困惑。如果我按照您的代码(直接复制)在 CodePen 上运行,它会像您的代码一样运行。但是,如果我在 JSFiddle(我通常用来测试的地方)上尝试,颜色只会在一条直线上显示。此外,如果我使用 jQuery 加载整个页面(我最近一直在这样做),结果也是一样... 我没有得到您获得的框架环境,而是得到了扁平的小线条。我甚至尝试在使用 jQuery 构建页面之前将 CSS 注入到 Header 中,结果几乎相同。看来这只有在没有 jQuery 的情况下才能在 CodePen 上正常运行。
您知道如何使用 flexbox 框架对窗口顶部和窗口底部进行水平分割(就像他们在 CodePen 上所做的那样)并在移动栏时流畅地移动吗?任何帮助都将不胜感激,谢谢!
可拖动的栏不会只用 CSS、flexbox 或其他任何东西来实现,除非使用一些超级疯狂的黑客技术,比如使用 可调整大小的 textarea 等等。在 CodePen 上,我们使用 jQuery UI draggable,但也有一些其他的方法。不过,flexbox 使这种情况更容易。有一次,我为了好玩用 Flexbox 重做了整个 CodePen 编辑器布局,它变得容易多了,但我现在找不到它了。基本上,如果 flex 项目有 flex: 1;,它们会填充区域,因此你只需要调整其中一个项目的高度(或宽度)到特定大小,另一个项目就会填充剩余的空间。所以不需要计算。
您知道 jQuery UI Draggable 用于水平分割窗格的任何工作示例吗?我已经尝试了几天,但似乎无法弄明白。
嗨,Chris,
我试图创建一个 div,它的宽度会随着内容自动增长。
使用这个
似乎有一个错误与容器的主尺寸有关,请查看这个笔
当 flex-driection 为列时,主尺寸错误
你能检查一下 Safari 吗?
flex 属性不支持。
这简直是难以理解
我发现这篇文章令人困惑。我是一名前端开发人员,仍然无法理解用来解释我所看到内容的任何术语。
很奇怪,我是一个业余爱好者,我可以轻松地阅读它。
干得漂亮。谢谢 Chris。
一旦它得到更好的支持,这无疑将是一个很棒的工具。就目前而言,在我看来,最好依靠 js,或者坚持使用可以利用更少错误(如果可以的话)的现成部件来制造的设计/布局。
如果设计没有考虑到制造,那就不叫设计。那是艺术。两者之间是有区别的。
这就像一杯 CSS 酒喷到我的舌头上。太棒了。
可能不是问这个问题的最佳场所,但我正在努力创建一个响应式的 flexbox 流体布局。我想要 3 个断点,如下所示
1)3 行(容器垂直,小屏幕)
2)2 列,2 行(中等屏幕)
3)3 列(大屏幕)
1 和 3 很容易,我只是将 flex-direction 从列改为行。但 2 怎么办呢?
所以它基本上看起来像这样
A
B
C
A B
C
A B C
我来回答我自己的问题。我无法让它工作的原因是 IE11 不喜欢在任何 flex 项目上设置 max-width。如果你这样做,它会错误地计算项目周围或之间的空间。
Evert,我刚刚遇到了同样的问题!我为此苦苦挣扎了一个小时,直到我发现 IE11 不喜欢在 flex 项目上设置 max-width。
很棒的文章,谢谢。关于浏览器支持表,我认为 IE11 可能完全支持该规范。
参考:http://msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx
谢谢。
使用 Flexbox 负责任地意味着使用 Flexbox 对网站进行编码,并将常规 CSS 定位方法作为不支持 Flexbox 的浏览器的回退,需要对布局进行两次编码?只是从工作流程的角度思考...
感谢 Chris!这是一篇很棒的 Flexbox 参考。我已经实现了一个基本的圣杯模板:http://noseyparka.me.uk/2014/03/26/a-holy-grail-flexbox-layout/。Flexbox 简直太棒了!
做得不错!
感谢分享。
我找到了 Flexbox 的这个 Polyfill,http://flexiejs.com/
我在使用 Flexbox 时发现了一些真正令人头疼的问题
在 Flex 容器上使用 margin: 0 auto; 会将容器(以及它包含的 Flex 项目)缩小到最小宽度。它不再是灵活的/流动的。
因此,任何流动的居中布局都必须使用 justify-content: center/ 或 space-between。但随后布局变得“无限”(您可以将屏幕扩展得越来越宽,框和空格会愉快地分布在该空间中,可能会破坏任何设计限制)。因此,为了防止这种情况,我们可以在 Flex 容器上设置 max-width,但这由于某种原因取消了居中,页面会左对齐。因此,唯一其他可能性是在一个或多个 Flex 项目上设置 max-width...但这些会在 IE11 中由于某种错误而中断。
简而言之:Flexbox 只有在使用全屏宽度并且不限制任何灵活项目的 max-width 时才能实际工作。一旦您想要对任何项目设置限制,它就会崩溃。
我也没有看到除限制我的媒体查询中的一些行之外的其他优势。
这真的让我很恼火,而且有一段时间一直无法正常工作,所以我想分享一下,以防将来有人遇到这种情况。如果您需要支持黑莓 7+,请确保您使用
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
…如果您使用 row wrap,它不会换行,而是将所有内容并排放置。另外,非常重要。确保父 Flex 容器的子元素没有应用
display: inline;
。由于某种原因,它会破坏它。希望这对某人有所帮助!最后要记住的一件重要的事情,如果您必须支持黑莓 7+...请确保所有子元素都应用了
float:none
...如果应用了浮动,它们将不会出现。希望这对您有所帮助!哇,非常感谢,这对我的三星 Galaxy 也起作用了。干杯!
在 SASS 混合的第一行,
@mixin flexbox()
不应该是@mixin flexbox
吗?Chris,这个例子 在 IE11 中不起作用。请您建议一下,我如何在 IE11 中获得支持
已定义的 .wrapper “-webkit-flex-flow: row wrap;” 仅此一项,添加 “flex-flow: row wrap;” 即可在 IE 11 和 Firefox 中正常工作。
这些东西在哪里
这些都是已弃用的属性。我觉得现在(至少就本指南而言)最好专注于当前属性。在实践中,最好让像 Autoprefixer 这样的工具在需要时为您插入这些较旧的属性。
太棒的文章,解释得非常出色,您为我节省了相当多的时间,原本我需要花这些时间来学习所有这些内容,并结合网上所有破碎和过时的文章:D 非常感谢您!
这是一篇很棒的文章。我很想看到使用 flex wrap 更新的笔,添加了 “flex-flow: row wrap;” 未加前缀,以便它们可以在 Firefox 29 中正常工作!但它仍然是一篇非常优秀且内容丰富的文章。
Chris,我真的很需要这个。谢谢!
使用
flex-wrap: wrap;
时,有没有办法指定元素间间距的最小值?我目前找到的唯一方法是强制我在容器中添加填充,这不是理想的选择。要添加间距,请使用 margin-right 和 margin-bottom。使容器(相同,但)具有负边距以继续使用整个宽度。
请原谅我的新手无知。
我认为我会尝试使用网站的背景颜色,然后容器将是另一种颜色(居中),然后 Flex 项目又是另一种颜色。
我知道如何将 Flex 项目本身居中,但如何将容器本身居中?这是否是人们想要做的事情?
谢谢
margin: 0px auto;
我认为我已经弄明白了……现在感觉很蠢!
您好 Chris!非常棒的文章!但是最后一个例子“移动优先 3 列布局,带全宽页眉和页脚”在我的 34.0.1847.131 chrome 中,两个侧边栏的尺寸并没有达到主内容的一半。
我必须编写
@media all and (min-width: 800px) {
.aside-1 { order: 1; flex: 1 25%; }
.main { order: 2; flex: 2 1 50%; }
.aside-2 { order: 3; flex: 1 25%; }
.footer { order: 4; }
}
在最后一个媒体查询中为了做到这一点 ( http://cdpn.io/rhbmd ).
感谢您让我了解了奇妙的弹性盒子世界!很棒的教程!!
哇!我之前已经收藏了这篇文章,今天又回来把它作为参考。真的很喜欢重新设计,让它更实用!感谢你,克里斯。
更新后的格式很棒!指南以前就非常信息丰富,但现在它在需要时也是一个很好的备忘单。谢谢!
很棒的指南,很棒的更新!一直都很实用。
我注意到这里(以及几乎所有其他弹性盒子指南)都缺少如何使用 flex-grow 和 flex-shrink 在 IE10 中实现。
flex-grow
-ms-flex-positive:;
flex-shrink
-ms-flex-negative:;
如果在某处加个脚注会很棒。
@Ry,说得好。我碰巧使用 Autoprefixer,它为我添加了这个 IE 特定的属性名。否则我不会知道。
我喜欢弹性盒子模型可以实现的所有功能,现在只要所有浏览器都能以相同的方式支持它就行了!弹性盒子在不支持 CSS3 的浏览器上的表现如何?
非常感谢您更新这篇文章——迄今为止关于弹性盒子最易于理解的指南。您至少应该得到一箱 Rolling Rock 作为奖励——如果那仍然是您的首选啤酒的话 :-)
嗨,
我希望有人能帮我一下(我对所有编程方面的东西都很陌生)。
我创建了一个弹性盒子,并将里面的项目排列成列布局。然后我执行了 'justify-content:center',但元素仍然停留在屏幕的左侧,即使容器宽度为 100%。有没有一种简单的方法,可以在将元素排列成列时,将所有元素居中于容器框内?希望我的意思表达清楚了。
干杯,
史蒂夫。
嗨,史蒂芬,我认为 justify-content 不适合此目的。如果您按列(垂直)排列元素,justify-content: center 将真正垂直地将元素显示在弹性盒子的中心部分,即顶部有一些空间,然后是您的元素,然后是底部的一些空间。您想要的是将每个元素水平居中,这可以通过使用 text-align 属性来实现。
嗨,杰伊,
感谢您如此迅速地回复我。啊,是的,我想是因为我没有在弹性盒子上设置高度,所以没有看到元素是如何垂直居中的。
谢谢,
史蒂夫。
感谢您,克里斯,感谢您的文章。简洁、关键且极具价值。我非常喜欢它。
Compass 支持弹性盒子吗?我看到他们在文档中提供了看起来像旧版本的弹性盒子。但在 codepen.io 上,当您包含 Compass 时,您就可以使用其他指令。比如 @include display-flex?但是我无法在本地运行它。有什么想法吗?
忘记 Compass,改为使用 Autoprefixer(与 gulp/grunt 配合使用)。就我个人而言,我现在只用它来计算垂直节律,因为 Compass 对于 C++ 中的 libsass 来说将会是一个很大的禁忌。
哦,抱歉,我忘了我正在使用最新版本的 Firefox 和 Chrome!
非常感谢!
这里有点冒险,但任何电子邮件客户端都支持弹性盒子吗?在 HTML 电子邮件发送器中重新排列元素的顺序会很有用。
现在正在 Safari 中测试弹性盒子。
在所有其他浏览器中都能正常工作的功能,在 Safari 中要么不起作用,要么不能正常工作。
真的很让人沮丧......
这里的演示也不能正常工作(尤其是最后一个)。
此属性在 android 4.1.1 浏览器上不起作用。它如何在移动浏览器上运行?
我认为支持图表对于 Safari 来说已经过时了。应该改为
6.1+ (新)
3.1+ (旧)
根据 http://beta.caniuse.com/#search=flexbox
同样,Android 4.4+ (新),iOS 7.1+ (新)
克里斯,
您显然已经认真思考了如何以最清晰的方式呈现这些信息。
出色的工作 - 谢谢。
你们是如何知道哪些浏览器版本支持哪些功能的?现在弹性盒子支持情况如何?
我昨天刚学了 Flexbox,现在迫不及待想了解更多。不过我对浏览器版本的支持有点犹豫。
你可以在 Google 中搜索“caniuse flexbox”找到更多关于浏览器支持的详细信息。
大家好,我想问问是否有人能帮我解决一个 Flexbox 问题。我将一个容器的宽度设置为 100%,并在其中放了 6 个宽度为 20% 的 div 元素。我预期会看到 5 个 div 平均分布,第 6 个 div 在它们下方,往下一行(我使用的是 row-wrap)。结果有点像,但是 5 个 div 在页面顶部和下面的第 6 个 div 之间存在很大的间隙。我需要知道如何消除这个间隙。这是 Codepen 链接:
http://codepen.io/coxthefox/pen/jtseL
任何帮助将不胜感激。
谢谢,
史蒂夫。
尝试在容器上设置 `align-content: flex-start;`。我不确定它是否对你的目的有帮助,但在你的演示中它有效。
另外,我建议在每个子元素上设置 `flex: 1 1 20%;`,而不是指定宽度(同样,这取决于你想要做什么)。
你好!
感谢你们的两个建议;第一个建议很有效,解决了我的问题。
如果你有时间,我希望你能详细解释一下第二个建议。说实话,我不太确定代码是如何被解释的。我理解给所有元素一个 `flex` 大小为 1 会使它们拥有相同的空间,但是 `20%` 是覆盖了第一个 `1` 吗?我在你提供的代码中对第二个 `1` 进行了调整,但它似乎没有任何作用。哦,现在紫色盒子充满了整个屏幕,看起来不错,但是是不是因为第一个 `1`,因为它显然占据了超过 20% 的容器?总之,我不想偷懒;我明天可以自己查阅这些资料。不过现在英国该睡觉了。
再次感谢!
史蒂夫。
伙计们,`order` 怎么样?在 Safari 中看起来不太好,甚至看起来也不怎么样。 8) 如何在 Safari 中使其正常工作?
我已经放弃 Safari 了。我的网站不支持它。
你可以简单地恢复使用浮动,但我与我的雇主讨论过,他说“反正没有人使用它”。
@Stephen,可以尝试 `flex: 1 1 20%`。
Safari 5.7.1
只支持以下代码:
display: -webkit-box;
仅此而已。其他任何代码都无法使其工作 :-(
我听说这个版本的 Safari 很老,但是应该看起来像什么样?
无法处理……
在第一个示例中(包含 6 个橙色正方形)……是否有方法请求 Flexbox 容器中当前的列数和行数?或者至少是当前的行数(因为列不是固定的)?
谢谢!
你好!
这份指南太棒了,说真的,做这件事的人应该得到一杯很棒的啤酒。
但我遇到了一个问题
我做了一个网站,容器的 div 是 flex 并且方向是 column。
在这个容器中,我有 3 个 div。我希望最后一个(页脚)始终位于页面的底部。
这有可能做到吗?我知道当然可以 ;) 但是我只想使用 Flexbox 模型。
致敬,朋友们!
好吧,我明白了,没有问题 xD 抱歉。无论如何感谢!这是学习 CSS Tricks 最好的地方。
再次致敬!
Paweł,使用 `order` 和 `width` 参数。
`width: 100%` 并且 `order` 为列表中的最后一个 div。
但请注意:Internet Explorer 和 Safari 不支持 `order` 属性。
为什么使用 `width`……?
我这样做了
https://www.dropbox.com/s/y8wccmz7hzmkpdb/Zrzut%20ekranu%20z%202014-07-29%2011%3A57%3A31.png
你看到任何可能存在的问题吗?
IOS7 使用 `-webkit-justify-content`
`justify-content` 不起作用
关于 CSS Flexbox 模型的最佳解释之一
很棒的文章,伙计。自从我的团队中的一位成员向我展示了 Flexbox 之后,我一直想了解更多关于它的知识。这是我迄今为止找到的最佳资源。
你好
我的要求是需要在所有浏览器中实现对齐,而无需使用 JavaScript。只需要使用 CSS/CSS3。
注意:特定段落行的顶部边距值在所有浏览器(Mozilla、Chrome、Safari)中都支持,并与 PDF 相匹配。但是,IE-11 浏览器有些不同,它会有所不同。为了调整 IE-11 浏览器,需要更改顶部边距值,这会导致其他浏览器出现问题。那么,如何修改所有浏览器的要求?如果在 IE-11 中修改特定对齐的样式表是否可行?
请提供解决该问题的方案。
我现在正在多个项目中使用 Flexbox,我非常喜欢它。唯一的缺点是需要使用所有前缀。
为了我的项目,我创建了一个 Less 混合样式表,它经过测试,可以在大多数最新的浏览器(最新版本 -1)中正常工作。
为了帮助更多人,我把代码放到了我的 GitHub 上,如果你需要入门帮助,可以从那里获取:github.com/annebosman/FlexboxLess
不错。
最佳的 Flexbox 资源。我经常用这个页面作为参考 - 非常感谢!_
我最近一直在尝试
flex-wrap
,发现 Safari 不支持它(桌面或移动设备),尽管它声称支持,例如Modernizr.flexwrap
为真。我已经为此向 Modernizr 提交了一个错误报告。想传播一下这个消息,因为在 Firefox 之前不支持这个属性后,似乎围绕这个属性有一些混淆。似乎 Safari 不支持许多属性:https://mdn.org.cn/en-US/docs/Web/Guide/CSS/Flexible_boxes
像 wrap 这样重要的属性不支持,对我来说不可行(但我还是个新手)。
另外,我认为,尽管它很棒(CC 知道我有多爱他),但是将旧的和新的结合起来,仍然是 Flexbox 应该消除的另一种 hack。
我没有时间做这些!
这篇博文是我目前反复阅读的博文之一。我已经快到完全理解它的地步了 ^_________^
很棒的帖子!这是一个参考。
嗨,
我正在尝试构建一个简单的布局。有人能帮我吗?我读完这篇文章后写了一些代码。
想要这样
尝试打开这个(我想要这样显示)
但现在第 4 个块被移到了第 2 个块(整个布局)的底部和中心。我想把它放在第 2 个块的右边,但要在第 3 个块下面。
(我必须删除,因为消息渲染的方式不对)
感谢您撰写这篇文章!我将在一个新项目中实施它。:D
如果有人想用 Flexbox 做网格布局,我发现这对对齐最后一行中的项目很有帮助:http://codepen.io/dalgard/pen/Dbnus
太爱这个更新了!想到我们还要几年才能在没有回退支持的情况下实现这一点,就让人伤心。:(
我有一个 Flexbox 容器。
在这个容器中,我有两个项目:一个内容区域和一个页脚。在容器上使用“space-between”会将页脚固定到浏览器窗口的底部,并将内容区域固定到浏览器窗口的顶部。
我想让页脚的高度固定为 52px,并让内容区域自动填充剩余的空间。
需要哪些 CSS 才能使内容区域相对于页脚填充剩余的空间?
我想能够无限扩展浏览器窗口,并且始终让内容区域填充空余空间,并且我永远不想让页脚改变大小。
任何帮助都将不胜感激,谢谢!
我找到了解决方案。这是我想到的解决方案
我开始尝试用 Flexbox 作为展示格式的 HTML 想法。
http://ionlyseespots.github.io/ambient-design/index.html
你好
有人可以帮我找到在 Flexbox 容器中使用 iframe 的教程或演示吗?我尝试过,但无法保持纵横比,通常的填充技巧似乎不起作用。或者,您能在这里提供一个简单的解决方案吗?
非常感谢
Richard C
我相信网络上没有比这更好的地方来开始学习 Flexbox 了。
感谢您的工作。
阅读完您关于如何使用 Flexbox 的精彩文章后,我看到了这篇文章 文章,它说不要将 Flexbox 用于整体页面布局。
您对上述文章的有效性有何评论?如果它是有效的,是否可以使用 Flexbox 进行页面布局,而不会出现性能问题?
谢谢。
我有点同意这篇文章。Flexbox 和 Grid 布局都有其优缺点。Flexbox 更适合动态内容(想想显示随机数量的随机大小的图像),而 Grid 布局更适合已知的内容区域。两者都可以根据屏幕大小进行调整,但针对不同的应用程序进行了优化。
当在 aside 中添加段落时,移动优先的 3 列布局不起作用。我注意到,在任何使用 Flexbox 进行整个布局的示例中,都会省略这些框内的内容。Flexbox 似乎不适用于没有大量 hack 的布局。
‘flex-basis’ 的初始值为 ‘main-size’,如果在简写属性 ‘flex’ 中省略,则其值为 ‘0%’。
http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis
我刚读到,但是当我用 Chrome 尝试时,只有 auto 正常工作!
规范说明
flex: auto
等同于flex: 1 1 main-size
,与flex: 1 1 auto
区分开来。目前只有 Firefox 34+ 支持 ‘main-size’。https://mdn.org.cn/en-US/docs/CSS/flex-basis
目前正在讨论这个问题,就像那个大红色方框里说的那样。我们目前正在积极寻求对此问题的反馈,所以请随时告诉我们!
这是一个非常不错的快速指南。我只是从粗略浏览中发现了一些事情
‘order’ 的工作方式不是很清楚。‘order: 3’ 不代表“把它放在第三个位置”,而是“把它放在所有 ‘order’ 小于 3 的项目之后,所有 ‘order’ 大于 3 的项目之前”。
我们(Flexbox 规范编辑)强烈建议不要使用 ‘flex’ 的长格式,除非你真的、真的想要从其他样式规则中级联 flex 设置,所以建议在这里以某种方式避免使用 ‘flex-grow/shrink/basis’(或者,最好是把它留到高级部分)。简写形式以适当的方式重置事物,因此会产生更少的级联错误。请使用简写形式!
我倾向于将 flex 的 “order” 视为流项目的 z-index。也许这也能帮助其他人从这种方式来理解它。
很棒的文章。非常感谢,Chris!
问题:为什么只有在 flex-flow 旁边有
(适用于:父级 flex 容器元素)
?目前 Firefox 中存在一个严重错误,使任何非平凡的 flex 实现都不可行。嵌套几个 flex 的容器会导致 Firefox 变得无响应。 https://bugzilla.mozilla.org/show_bug.cgi?id=1082780
在 iPad 上也有很多 bug,所以目前它几乎不可用
感谢这篇文章,它帮助我将 LESS 实现和 Bower 包更新到了最新版本!
(可以在 https://github.com/philipperutten/css3-box 或通过 http://bower.io/search/?q=css3%20less%20layout 免费使用)。
您好,我正在寻找用 flex 实现全屏菜单的方法,网站上有顶部的标题,其余空间只有 6 个大的响应式按钮。我尝试过很多方法,也查看过很多网站。感谢任何帮助。提前感谢。
这是我见过的最好的代码教程之一。感谢您花时间使其变得超级直观。
这将是一个了不起的功能。不幸的是,它似乎还处于革命性的初期阶段,我认为如果我在我们的网站上尝试实施它,我的雇主不会高兴。
Sean Fiorritto(拼写正确吗?)制作了一个很棒的 Flexbox 视频(和一本书),名为“Sketching with Flexbox”,如果有兴趣,可以看看。视频课链接: http://www.sketchingwithcss.com/flexbox/ 以及一个五节课的教程: http://www.sketchingwithcss.com/flexbox-tutorial/
享受!
所以我在想,有没有一个好方法让 flex 网格的子元素不自动跨越整个页面宽度。每次都指定宽度不是很高效。如果他们希望它正常工作,没有人应该为每个元素添加
width: 1px;
。谢谢
非常感谢 Flexbox,它拯救了我的周末。我不得不重做整个页面,以前使用 HTML 表格来显示矩阵。在需求更改后,我意识到我不能再使用表格,因为每个“列”都需要有任意数量的“行”。换句话说,我必须从行优先格式改为列优先格式。所以我使用 Flexbox 将列从左到右(行)方向排列,然后将每个行中的每个子元素从上到下(列)方向排列。但随后我需要以相反顺序重新排序每一行,Flexbox 也使这变得容易:使用 “order” 属性或将方向设置为 “column-reverse”。完成。瞧。我写的用来实现它的 JS 现在只有一半大小,CSS 也变得更小了。太棒了!!!!!
感谢 Chris!我根据你的文章制作了一个 flexbox 规则集配置工具/速查表,用于快速复制和粘贴。我一直把它用在我的项目中,它可能对其他人也有用。 http://apps.workflower.fi/css-cheats/?name=flexbox(如果有人想 fork/改进/无论什么,它也在 github 上 https://github.com/sakamies/css-cheats)
干得好,伙计……这激发了我这个小小的 css 库
http://hictech.github.io/cssPlusWebsite/
谁有为大多数现代浏览器设计的选项。让我知道你什么时候可以把它恢复到 ie9。
你在这个链接 (http://codepen.io/HugoGiraudel/pen/LklCv) 中的第一个例子在 IE 11 中无法正常运行。IE 似乎不支持 -webkit-flex-flow。但添加 flex-wrap:wrap; flex-direction: row; 或者只添加 flex-flow: row wrap; 则可以正常工作。
嗨,伙计们,我需要帮助。我写了 1440 分辨率屏幕的 css。有一个容器,里面有 3 列。我使用这个教程,它在 FF 和 Chrome 中运行良好,但在 Opera 中却不行。第 1 列和第 2 列完全分开,而第 3 列在第 1 列下方。顺便提一下,我在这里是新手(我是说网页设计)。以下是代码
@media screen and (max-width: 1440px) {
.wrap{width:910px; margin:0 auto;}
#about {width: 900px;}
#container
{
overflow:hidden;
margin:0 auto;
margin-top:70px;
width:880px;
padding: 0;
justify-content:space-between;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
padding-right:5px;
padding-left:5px;
}
首先,你不需要浮动。这是 Flexboxes 的主要目的。所以你不必使用浮动。尝试删除浮动声明,并进行更多尝试……。
此外,请记住,每一组弹性项目都需要一个弹性容器。看到类似以下内容并不荒谬
嵌套弹性盒子可以帮助你保持跨浏览器的一致性,但它很快就会变得非常混乱。尤其是在你嵌套到 8 层的时候。
你可能还缺少很多供应商前缀才能使其在所有浏览器中正常工作。
例如,你可能想看看我在项目中使用的类,看看你缺少了什么
如果你可以选择使用 Autoprefixer,这将对供应商前缀的添加有很大帮助。
https://github.com/postcss/autoprefixer
我已经将上面的导航布局放入了 header、aside、main、aside、footer 布局的头部。
我想做的是固定导航/页眉,使其宽度与页面一致,而其他元素保持在页眉下方。
这是我的笔
http://codepen.io/anon/pen/dPVEJd
这有帮助吗?我将你的 HTML5 放入了 Ambient 框架中。
http://codepen.io/ionlyseespots/pen/pvaPwq
你提供了 html、css 和结果,这很棒,但我完全使用了你的代码,在我的笔记本电脑上效果很好,但在我的 Android 手机上,页眉、主体、aside1、aside2 和页脚都在同一行(纵向和横向都是)。我发现调整笔记本电脑显示器大小和在其他设备上实际查看它之间存在差异。
我可能会在 Ambient 中将其记录为一个问题。
大家好,
我一直致力于这个布局,我设法在现代 Firefox 和 IE 浏览器中完美运行,但它在 Chrome 和 Safari 中无法按预期运行(这让我相信我没有正确实现弹性盒子)。
任何建议都将不胜感激……。我已经尝试过各种逻辑,包括在弹性盒子中使用弹性盒子来使它工作……。也许这是 Webkit 浏览器中弹性盒子实现方式的限制,反之亦然。
我已经将 html 文件发布在这里:http://www.datagnosis.com/test_layout.html
在 Safari 和 Chrome 中,内容无法完美地适应浏览器窗口,并且页脚 div 标签完全不可见。
我注意到,当为包含一些元素的父元素声明 flex 属性时(例如 ul 是 flex,li 是 flex 项目(它们是内联或内联块)),当我将某些列表项设置为 margin-right:auto 时,它会将所有其他元素推到父容器的边缘?
谢谢,一如既往,这篇文章非常有见地。它确实加快了我对使用弹性盒子模型的理解。
最难理解的一件事是 flex-grow、flex-shrink 和 flex-basis 属性。不是它们的概念,而是实际的值是如何发挥作用的。
我最初的基本假设是,如果我将 flex-basis 设置为一个静态大小,比如 200px,并将项目 X 的 flex-grow 设置为“2”,并将该容器中的其他项目设置为“1”,那么项目 X 的宽度将是其他任何项目的 2 倍。情况并非如此。它总是大于 2 倍。
仔细观察它应用的数字后,我首先注意到 flex-grow/flex-shrink 是该特定属性中所有子元素之间这些值的比率。grow 和 shrink 值彼此无关。
如上例所示,项目 X 宽度与 flex-basis 值的比率将为 2:1。但是,让我迷惑不解的,也是导致实际宽度值不遵循此比率的原因是,**比率是基于容器超过基本宽度(或低于基本宽度,对于 flex-shrink)的增长量**。
话虽如此,关键是,如果你从每个项目的宽度中减去基本宽度,那么剩余的宽度将遵循比率。
现在,如果你没有手动设置 flex-basis 属性,那么默认值为“0%”,比率更接近你所想的那样,但这些元素仍然存在一个最小宽度,它也被纳入如上所述的比率计算中。
希望,由于使用了弹性盒子,比率不必完全精确,布局仍然看起来很好,并且运行良好。这就是弹性盒子的主要目的,对吧?
我只是想与那些喜欢了解数字来自何处的人分享这些额外信息,当结果并非如你最初所想的那样时。
我遇到了这个问题,它太令人困惑了!
警告!关于 justify-content / align-items 的描述不正确。后两个属性的行为取决于 flex-direction。文章说它们应该是独立的。“这定义了沿主轴的对齐方式。” 错了!如果 flex-direction = column,那将沿交叉轴对齐项目。要沿主轴对齐项目,需要更改 align-items 而不是 justify-content。
当你改变 flex-direction 时,你实际上改变了主轴。反正我是这样想的。flex-direction
这里,“让我们尝试其他方法。假设我们有一个网站顶部右对齐的导航,但我们希望它在中等尺寸的屏幕上居中,并在小型设备上单列显示。很简单。”
导航在 Chrome 41.0.2272.101 m 中不起作用
我刚刚继承了一个项目,里面有超过一千种产品,分布在数十个类别/子类别中。对齐方式都很乱。我只需要在 CSS 中添加两个 flexbox 项目就修复了。
这个网站真棒!
我在实际项目中见过这种代码,但感觉不太好。
你能帮我理解为什么这不好或者为什么这没问题吗?
谢谢
它并不一定是“不好”,只是针对 IE 的跨浏览器兼容代码。它很丑,大多数人使用像 Autoprefixer 这样的 PostCSS 处理器。
我是 Flexbox 新手,当然不想传播我自己的新手困惑,但我注意到了一些问题
* 关于这张图片 – http://www.w3.org/TR/css3-flexbox/images/rel-vs-abs-flex.svg。最初我认为它超级有用。但是,当我查看它在 W3C 规范中的使用位置时,它实际上并没有讨论将“auto”作为 flex-basis 的值(只是作为“flex”简写的值),它只是出于某种原因将它放在图像中 – http://www.w3.org/TR/css3-flexbox/#flex-property
* 然后我在规范中找到了这一部分,它看起来像将“auto”作为 flex-basis 的值存在争议 – http://www.w3.org/TR/css3-flexbox/#flex-basis-property
问题
* 我们是否应该暂时避免使用“flex-basis:auto”?如果是,是否应该在图像旁边添加说明?
* 我是否理解正确,即 W3C 规范在这些地方有点令人困惑/组织不当?值得我向某人发送评论/电子邮件吗?
最后:非常感谢这篇文章。谢谢!
我大多数时候都这样做
flex: 0 0 auto; 或 flex: 0 0 25%; 或 flex: 0 0 10em;
我认为直接使用简写属性,并尝试不同的值更容易。
最初“auto”意味着“content”或自然大小。现在 auto 意味着查看 height/width 属性,并且添加了一个新的“content”值。Chrome 仍然将“auto”视为“content”。Firefox 和 IE 则没有。
因此,只有在设置了 height 或 width 的情况下,“auto”才有用,这非常无用,因为你可以直接使用该值作为“flex-basis”。
你为什么要添加这些类?
<
header class = “header”> Header </ header>
现在不要写(html5)。
正确的写法应该是这样。
<
header> Header </ header>
我尝试删除所有类,但网站崩溃了。我不明白。
这些 CSS 就像现成的 ui-bootstrap 组件或 Angular 本身。它们可以直接使用。现在网页开发变得轻而易举,因为框架承担了大部分的常见负担。很喜欢,谢谢!
困扰我的是,如果你使用 flex-direction: row; 或 flex-direction: column;,它会决定你使用哪个属性来水平居中对象。
也许我只是不理解逻辑。
http://codepen.io/trilm/pen/aOoGVz
我认为 align-items 和 justify-content 在共享的示例中被搞混了。另外,容器文章缺少高度,最终导致在那个特殊情况下,应用 align-items 和 justify-content 的结果是一样的,让人困惑。
这里有一个示例,希望能帮你消除困惑。
查看 Pen RPmwdz by Andy Maleh (@AndyMaleh) on CodePen.
又一篇很棒的文章!
使用这篇页面作为指南和参考,我创建了一个基于网页的登录模板,看起来像手机应用程序。它主要只是 Flexbox 的列布局练习;它帮助我更好地理解了 Flexbox 属性,我认为其他人可能也会感兴趣,可以一起学习。
结果如下:https://jsfiddle.net/Serk0413/y6ugdxgx/10/embedded/result/(包含“汉堡包”导航)
以下是 fiddle(抱歉,没有 Pen):https://jsfiddle.net/Serk0413/y6ugdxgx/
它使用了各种 Flexbox CSS 属性,包括嵌套在行内的 Flexbox 列,以及嵌套的传统 CSS(没有浮动!)
感谢你又写了这篇很棒的文章,Chris!!
感谢发布。非常有趣。我正在使用你 fiddle 中的汉堡包菜单。你希望进行特别的署名吗?
我注意到最后的 3 列演示不起作用,如果侧边栏的内容比显示的一个词更多,那么列会拉伸到 100% 宽度并破坏布局。
需要设置侧边栏的宽度。
例如
感谢你修复了问题,PaulOB!
我花了一些时间才想到去评论区里看看……:/
我真的很喜欢 Flexbox 的概念,但考虑到要支持 IE9,我正在寻找一种实现优雅回退的方法。您是否对优雅回退有任何建议,还是应该只使用“传统”的方式为 .no-flexbox 样式化(使用 Modernizr)?
关于 Flexbox 我完全是新手,但我很好奇一件事。在一个由多行组成的列表中,是否可以将第一行设置为“space-around”,而将后续的行左对齐?在我的项目列表中,我不太喜欢,如果一两个项目被换行到下一行,它们会“space-around”并最终出现在中间,这会让你在浏览列表时有点迷糊(明白我的意思吗?)。这没什么大不了的,我只是想知道是否可以指定最后一行或类似的东西。很棒的教程,顺便说一下!提前感谢。
请发布您的代码并链接到它。
这是一个非常基本的 Flexbox 示例;看看是否对您有所帮助。您可以随意复制、重新发布和提问。
http://codepen.io/colnago/pen/LVpoGK
在 Safari 7 (7.1.6) 中使用 flex 简写(
-webkit-flex
)而没有指定第三个参数(-webkit-flex-basis
)时,Safari 会计算值为0px
,并且通过-webkit-flex-wrap
进行换行将无法正常工作。为了让 Safari 通过 Flexbox 进行换行,-webkit-flex-basis
必须设置为auto
(这是 Safari 的默认值)。因此,如果您使用简写并且不想为 Flex 项目设置初始大小,请将第三个参数(或者如果您省略了缩减则为第二个参数)设置为“auto”(例如-webkit-flex: 1 auto;
或-webkit-flex: 1 0 auto;
)。您可以在此 Codepen 中查看这种行为:http://codepen.io/mdix/pen/pJNrmM
好文章,我刚在 Twitter 上分享了。真的很喜欢您文章的格式,与您的文章相比,其他关于 Flexbox 的文章都太逊色了。
这非常有用。谢谢您,先生。
使用 Bootstrap mixin (SASS) 的自定义 Flexbox 网格
https://www.ukietech.com/blog/programming/custom-flexbox-grid-using-bootstrap-mixins-sass/
@Alex: 可能有点晚了,但这是我的解决方案,效果还不错。
创建一些额外的块,它们的大小与您其他块的大小相同,但高度为 0,以便至少填满屏幕的一行(或任何屏幕)。由于高度为 0,您将看不到它们,但它们仍然在 x 方向占用空间。因为您可以填满一整行,所以即使最后一行的奇数对齐存在,您也看不到它。您看到对齐的是倒数第二行。查看 https://jsfiddle.net/h0Lww6mk/3/ 上的解决方案
值得注意的是,Internet Explorer 在您使用混合单位时会出现问题。我经常将 Flexbox 与边距和 calc 一起使用,因此我可能会使用类似以下代码:
这在 Safari、Firefox 和 Chrome 中运行良好,但在 Internet Explorer 中却不行。我猜想这是一个舍入错误,它不会影响所有分辨率,但屏幕宽度和元素宽度组合有时可能意味着您在一行中只得到两列而不是三列。为了解决这个问题,我使用了以下代码:
这考虑到了边距的百分比差异。这在其他浏览器中看起来并不像那么干净,但它确实解决了问题,而且也不算太复杂。
在过去两个月中,我已经第 100 次引用了这篇文章,我感到有义务说,这篇文章真的非常有用。我感谢您发布它。
如果有人在 Firefox 上为第二个示例(番茄背景)运行时遇到问题
将 Flex 项目放到它们自己的容器中,并且不要在其中包含其他元素。
将 * flex-flow: row wrap; * 添加到 .flex-container 中
希望这能有所帮助。
哇,这篇文章是关于 Flexbox 最酷的资料。
各位,我现在需要关于这个的帮助
http://stackoverflow.com/q/32229436/2396907
请分享一下!
感谢您的教程。我在更新之前为朋友项目做的一些东西时遵循了它,但遇到了困难。我尝试使用 Flexbox 更新这三个元素(Twitter 小部件的容器、cbox 的容器和 ccentre 的内容),就像教程中那样,但它没有起作用。看起来 ccentre 可能是问题所在。有任何想法吗?它在 Codepen 上的地址是:http://codepen.io/seasalt/pen/GppzmG
你好。我偶然发现了这个有趣的 StackOverflow 问题,它涉及到容器上的
justify-content: flex-start
和margin: auto
。我不知道答案,我想知道是否有任何解决方案。我认为对于“align-content”来说,容器应该已经由一些元素支撑起来或者具有固定高度。可以在事先告诉读者这一点。
Chris,你能给我们举一个关于小型布局和大型布局的例子吗?我不完全理解关于 Flexbox 与 Grid 最佳使用场景的说明。
非常感谢您的文章!我学到了很多东西。不过有一个问题,您在背景部分中包含的说明“注意:Flexbox 布局最适合应用程序的组件和小规模布局,而 Grid 布局则适用于大型布局。”链接到一篇超过一年的文章,并且在上面有一条说明说它正在不断变化。是否有关于这篇文章的任何更新?我非常想一起阅读这两篇文章,这样才能更好地理解在哪些情况下使用它们最合适。
再次感谢!继续努力!
(或者,更准确地说……)
为了使 Flexbox 与 iPhone/iPad 兼容,请添加以下元标记……
<meta name="viewport" content="width=device-width">
干杯!
第二个示例在没有 Flexbox 的情况下也能正常工作,使用“display: inline-block”。代码更少,而且在旧浏览器中也能正常工作。请参阅:http://codepen.io/anon/pen/VvbzbP?editors=110
尝试在
.navigation a
中添加背景颜色,你会发现它们并不相同。使用inline-block
使你仍然依赖于浏览器对内联li
元素左右两侧额外空间的默认使用。这种渲染可以通过浮动li
元素来修复,但flexbox
是实现这种效果的更好(现代)方法。http://bennettfeely.com/flexplorer/
order 默认值:0
我发现
align-content
仅适用于横轴。在本例中,是垂直空间。我认为没有办法用 Flexbox 做我想做的事情。以下代码可以接近你想要实现的效果
div.block {
flex-basis: 20rem;
flex-grow: 1;
}
div.block p {
width: 20rem;
}
如果你使用
space-between
,它似乎也会左对齐太好了,让我们让 CSS 更复杂吧!W3 将越来越多的内容塞进 HTML 和 CSS 中,但忘记了人们想要稳定下来并使用它,而不是每天学习新的标签/定义。
CSS 的拟议更改是在多年前与 HTML5 的引入一起启动的。事实上,其中大部分是 CSS 和 HTML 的补充,而不是更改。原因是,如今你所看到的某些页面布局使用旧规范非常难以实现。因此,添加了这些新标签来简化 Web 结构/布局,而不是使其复杂化。
以 Flexbox 为例。在它出现之前,制作动态缩放的网站非常困难。仅使用百分比来缩放部分根本无法实现。一个改进是引入了 calc() 函数,它可以将百分比和静态单位结合在一起使用,但即使这样,代码仍然难以阅读。Flexbox 是一个很棒的补充,一旦你阅读了这篇文章,它就非常容易使用。
事实上,如果你愿意,你仍然可以使用 CSS2 和 HTML4。没有人阻止你,但如果你这样做,你就拒绝了一些很棒的工具
我喜欢与 Web 打交道的原因是它一直在发展。总有新东西要学。
任何技术甚至一般意义上的生活都是如此。如果没有新功能和新能力,我们将萎缩,无法实现我们的全部潜力。
我怀疑,相对来说很少有人愿意满足于现状,仅仅使用我们现在拥有的东西。
W3C 并不是一个忽略了你或我们任何人的单个人。它是一个组织,一个民主组织,由发明 Web 并继续为每个人带来利益的公司和个人指导。
应该指出,W3C 文档推荐,而不是要求。一切都是可选的。
你可能被 PPK 的文章所感动:停止推动 Web 前进
我发现布鲁斯·劳森的这个反驳文章很有启发:关于 PPK 对新浏览器功能的暂停
这两篇文章,以及布鲁斯·劳森文章末尾链接的更多文章,都是比我聪明得多的人写的。
我不得不承认,PPK 和许多其他人表达的沮丧让我觉得非常类似于我女儿对上学的沮丧。毕竟,她已经在家里有了电视、YouTube 和她需要的所有玩具 :)
非常好的/有用的网站。在 https://css-tricks.org.cn/snippets/css/a-guide-to-flexbox/ 上有一个小错误。
在“justify-content”下,项目符号项“flex-end: 项目向结束线方向排列”……毫无意义,一定是打字错误。
只是为了让你知道,不需要回复。
在第一个示例中,缺少非前缀的
flex-flow: row wrap;
,所以现在它只在 Chrome 中工作。我更喜欢这篇文章的旧布局。并排查看父级和子级示例意味着更容易比较行为并选择正确的方法。
您好,
我想在 Flexbox 容器中的图像上放置一个链接。在放置链接之前,Flexbox 可以正常工作,但放置链接后就不行了。为什么?我认为可能是我的 HTML 代码有问题?有人可以给我一个示例吗?
非常感谢您!
这是我的 HTML 代码
@Louisa 你没有包含你的 CSS 代码,所以无法判断哪里错了。我把你的 HTML 代码放进了一个 Pen 中,并设置了
#page1conteneur { display: flex; }
,它可以正常工作。如果你需要帮助,你需要发布你的 CSS 代码。最好是将你的问题和所有相关代码发布到像 Stack Overflow 这样的专门用于问答的网站上。
这是我的示例。我用来自 LoremPixel 的图像替换了图像,只是为了让我有一些东西可以查看。……
(编辑:这个演示开始出现 404 错误,它一定是被删除了。)
根据caniuse.com,Flexbox在iOS8*中通过webkit前缀支持。
https://caniuse.cn/#feat=flexbox
根据css-tricks,iOS对Flexbox的支持版本为7.0.1+。
我刚收到一张关于iOS7的缺陷工单,Flexbox在iOS7上不起作用。所以,上面的表格是错的吗?
这本指南是我的Flexbox圣经!我几乎每天都会用到它!非常感谢你,Chris!
有人知道是否有可打印版本?像一张速查表?
谢谢 :)
嗨,我需要将Flex容器内的所有元素彼此对齐。假设我已经使用Flex创建了两个高度相同的div,现在我想让div内的所有元素彼此对齐。这可能吗?
这是一本非常棒的指南,我几乎在一小时内就学会了如何使用它来布局页面。我迫不及待地想更多地测试它,看看它在不同场景下的工作方式。感谢Chris和团队!
我正在尝试用Flexbox替换一个网格布局,我以前用display: table和table-cell来垂直对齐内容。
我使用Flexbox遇到的问题是,我无法将第二个子项垂直对齐。你可以在以下链接中看到实际效果:http://codepen.io/anon/pen/BjXbrw
无论我尝试什么,要么标题的垂直居中会失效,要么第二个子项无法对齐。我究竟做错了什么?
谢谢!
编写这篇文章的人忘记了写上 flex-shrink 为 0 时,会阻止项目缩小并保持其原始大小的信息。这条信息本可以帮我省下 4 个小时的工作。
我的老板说Flexbox很愚蠢。她说“鞋带”或其他什么东西更好,你能确认一下吗?
你的老板在试图平衡Flexbox的有效性和她自创的词汇/服务时,似乎相当健谈,这增强了她那迷人的批评。
有时我会在阅读这些文章时会心一笑(这篇文章也很不错,顺便说一句),但我记得在黑暗时代,人们可以在一张纸上编写一个相当不错的网页,而现在,需要无数的文章才能理解代码,最后得到的是几兆字节的代码……它仍然只是一页,但“更漂亮”(而且需要高达 1000 倍的带宽和服务器存储空间,哈哈)。我们称之为进步。
附注:它让我想起了C++刚出来的时候,“Hello World!”从4或5行代码(C)变成了4或5页代码(C++)。哈哈,我不得不把我的PC换成PC-XT才能得到一个硬盘驱动器。^_^
如果你用“兆字节”的代码来制作一个页面,那么你要么做错了什么,要么你拥有远不止“一页”的东西,比如一个非常复杂的脚本系统或类似的东西。
我们可以在使用Flexbox创建导航布局时,创建固定导航吗?
关于flex属性
说第二个和第三个参数
<flex-shrink>
和<flex-basis>
是可选的,这有点误导,因为它意味着<flex-grow>
(第一个参数)永远不是可选的。事实是,<flex-grow>
是可选的,只要<flex-basis>
存在(当然,当值为 none 时)。它只有在<flex-shrink>
存在时才是必需的。这是一篇很棒的文章。它多次帮助过我。
我遇到了一个我无法解决的问题。我无法将一行文本垂直居中在一个元素中。它看起来很简单,但我在上面浪费了几个小时,却毫无进展。
有人愿意在这篇Codepen上评论吗?将宽度调整到小于 900 像素,你就会看到发生了什么。
http://codepen.io/simspace-dev/pen/mPGQdq
谢谢,
Chris
也许我需要将图标垂直居中到文本,而不是相反?
如果你在你的.bullet-content类中添加“display: flex; align-items: center; height: 100%”,你应该没问题。
height: 100%是用来将你的
元素拉伸到li的高度(当然也可以用Flexbox来做到这一点)。
感谢您精彩的写作!
太棒了!
我刚刚开始学习HTML和CSS。感谢您整理的信息。我希望有更多像这样的“完整指南”。这真是太棒了。
其中一个例子(带编号的番茄箱子,会换行)使用了webkit-flex-flow,而不是仅仅使用flex-flow,所以这个例子就变成了专属于webkit的。
嗨,大家好,
这篇文章一直是我的弹性盒子标准“备忘单”。
我在 Firefox 上遇到了一个 bug,它不允许元素成为弹性容器。
我花了好长时间才发现这一点,所以我想和其他人分享,他们可能正在经历我刚刚经历的痛苦!
显示 bug 的 jsbin 链接:https://jsbin.com/kobefo/1
bugzilla 链接:https://bugzilla.mozilla.org/show_bug.cgi?id=984869
我的意思是:“Firefox 上的一个 bug,不允许元素成为弹性容器”。
嗨,奥托:
为了兼容性,您可以尝试这个 URL https://caniuse.cn/ 这将帮助您获取所需的信息。
此致,
AK
非常清楚。已收藏!
@Alex
我认为你可以,请查看这里的示例
https://plnkr.co/edit/yKLl8irs6xudPHfTh1u9
当内容在嵌套的弹性盒子内时,如何使内容对齐到元素的底部?
align-items
和justify-content
在这种情况下似乎不起作用。我不确定在 2016 年 8 月写作时,我是否仍然需要在任何 flex 代码上加前缀。如果答案是“取决于你需要什么浏览器支持”,我真的不知道或无法准确预测谁可能会访问我的商业网站。
应该将前缀代码插入作为安全措施,还是如果供应商在较新的浏览器版本中提供了完整的 flex 兼容性,添加供应商 flex 前缀代码是有害的?
底线:在这个阶段(2016 年 8 月)添加 flex 供应商前缀是否是一个好主意,并且现在这样做是否有任何可能的弊端?
通过安装 Google Analytics,您可以获得一些有用的见解(以及针对您的网站和用户非常具体的见解)。使用它提供的统计数据,您可以查看访问您网站的人员的浏览器细分。我认为这将让您知道对特定浏览器版本的支持需求有多大。
我只想说声谢谢。在过去的一年左右的时间里,我一直在学习 css,我已经引用了这个页面一千次。它非常有用。我不得不写信并向您表达一个应得的“谢谢”。很棒的工作。非常感谢。谢谢。
Don
同意!这很容易理解,对我们正在进行的一个新项目非常有帮助。
非常感谢!
本教程太酷了。:)
嗨。
这里的内容很棒,但我显然从我这边错过了一些基础知识。如果有人可以解释。我将从最后一个示例(包含所有这些元素的完整页面 .header、.main、.nav、.aside、.footer)获得以下结果。.ASIDE2 - 紫色部分在 .MAIN - 蓝色部分下方。而 ASIDE 1 - 黄色仍然在他们旁边运行。简而言之 - 将紫色放在蓝色下方并扩展黄色。
谢谢,
Igor
感谢您提供这个很棒的教程!CodePen 示例需要稍作调整才能在 Firefox 48 上运行。我必须从示例 1 和 2 的 -webkit-flex-flow 中删除 -webkit 前缀。
不错,我有一个问题,有了这些新知识,我想尝试我的技能在某种框架上。我将所有内容上传到“http://tesserakt.pro/demo/repsonse”。但是为什么顶部的两个 col-1 没有与 col-2 具有相同的宽度?它们应该加起来并使宽度达到 50%?对吧?它们没有,我猜这与 flex-shrink 和 flex-grow 有关,但我不能确定。
我喜欢 IE 10 如何成为一个中间人 ahahah!
是否可以在容器上设置最大宽度,然后将该容器居中?一旦我将容器更改为 flex,“margin: 0 auto” 不再起作用以将容器居中。
很简单,就这样做
align-content: flex-start; // 将内容对齐到网格的顶部
justify-content: center; // 水平居中容器
你能用绝对定位元素做到这一点吗?请帮帮我
当您解决问题时,请在这里告诉我!:D
谢谢,这真的很有帮助。
太棒了!这有助于提高 CSE HTML Validator 对 Flexbox 的支持。好东西。
我想知道是谁认为那样实现 space-around 是个好主意,以及为什么。
因为我理解元素之间等间距为
A|===|A|===|A|===|A
(“A” 表示一定的距离)
相反,它是
A|===|AA|===|AA|===|A
这使得内容以均匀分布的方式布局变得不可能。
只使用 flexbox 制作网站可以吗?为什么可以或不可以?
我想,如果你认为所有访客都会使用最新的浏览器,那么你可以只使用 flexbox。如果他们中有些人仍然使用 ie6,并且你必须让他们可以使用你的网站,你必须提出另一种显示方式……
感谢这份指南。非常有用。
编辑建议:在 flex-direction 部分,视觉示例与 css 代码段中显示的顺序不匹配。我以为出于某种原因,flex-box 将“上下”视为“行”,将“左右”视为“列”。
由于所有其他部分的视觉示例与代码段中的顺序相匹配,所以我有点困惑。
爱你的,Rob。
抱歉,我上面评论中缺少 html。这是:http://codepen.io/localnepal/pen/vyXPmy
因此,即使在 box3 中输入新文本时,box1 中的图像尺寸也会在显示中发生变化,即使文本量没有超过之前的文本量。
看来 flex wrap 可以更灵活一些,如果它支持缩进和悬挂缩进,就像段落一样。
用例:一堆带有日期的缩略图,每个月一个 flexbox 填充。快速滚动时,最好看到新月份出现在左边缘,并且“延续”行缩进。我一直用浮动和奇怪的边距来做这件事,但没有看到如何将其转换为 flexbox。
嗨,很棒的教程。
是否可以使用 flex 制作一个完美的网格,其中一些正方形盒子的边长是其他正方形盒子的两倍。网格应该只包含两种盒子——小的和大的(边长是小的盒子的两倍)。
我来自德国,所以我的英语不太好。
所以请尽量用简单的语言回答:)
我已经从网站开头的 Flexbox 中获取了代码。
但现在我意识到 aside 1 和 aside 2 并没有挨着主体部分。
我尝试了将已经写在注释中的代码放进去,但它不起作用。
所以有人可以给我一段代码,我可以直接粘贴到我的代码中吗?
到目前为止,代码是
查看笔:RKbXJX by Christian (@bplaced) on CodePen.
@Christian
嗨,我不是代码高手,但我甚至能看到你的代码就像炒鸡蛋一样。你不应该把代码复制粘贴到你的代码中,如果你不知道在哪以及是什么。我认为你应该从一个干净的 HTML 开始,并保持简单。
嘿,我只是想说,这是我 2016 年访问次数最多的参考页面。你展示了有效的代码。这就是全部。谢谢!
我能不能只为三个项目中的一个清除 align-items?
@Henry 我认为你可以通过在 flex 项目上使用 align-self: … ; 来覆盖 align-items 的默认设置(或你的设置)。
感谢你付出的努力,非常感谢。
我每天都打开这个网站。没有它,我就无法编写正确的 flexbox 设计。谢谢你,Chris!你让我的生活更美好!来自德国的问候
这是一篇很棒的文章。非常感谢。
不要按打印然后走开……它会打印所有评论!提醒一下!
为什么 flex-direction 默认情况下是 row?
我们通常垂直阅读数字内容,所以我不明白为什么 row 的优先级会高于 column。
甚至 React Native 也将 flexDirection 默认设置为 'row',所以我不应该认为 column 应该是 flex-direction 的默认值。
这使得 web 和 RN 的样式设计变得有问题,因为为了获得相同的开发体验,你必须将 div 的 flex-drection 设置为 'column',或者将 View 的 flexDirections 设置为 'row'。
这是我读过最好的 Flexbox 教程。感谢你的辛勤付出。图片真的让事情变得容易多了。如果能有一个用 Flexbox 构建的真实网页示例,就像最后一个示例的更完整版本,这样我们就能看到 Flexbox 在现实生活中是如何使用的,那就更好了。
这是一个非常有用的指南。我已经把它打包到一个 codepen 中:https://codepen.io/vlrprbttst/pen/gRYVMO
在最后一个例子中,如果我们想在包装器上设置高度怎么办?如果这样做,标题/页脚和内容似乎会平均占用高度。有没有办法限制标题/页脚占用一定高度,让中间内容占用剩余高度?
感谢这份资料!我刚开始尝试使用 Flex box(过去主要使用列和简单的内联 + 宽度),这太棒了,太容易了。我将会更多地使用它!
嘿,Chris,
感谢所有很棒的信息,它真的帮助我理解了 flexbox。在我学习的时候,我创建了一个使用传统 12 列方法的开源 flexbox 网格,我发现它有助于更容易地应用 flexbox 的属性。它被称为 Eixample,你可以在以下地址查看:https://github.com/mobilejazz/Eixample
再次感谢你的精彩信息,
Adam
感谢你提供了一个很棒的页面!这个页面是我使用 Flex CSS 的首选参考。
你能提供一些文字解释“cross-start”、“cross-end”、“cross-axis”等意思吗?我发现这些非常令人困惑,希望能得到一些额外的解释。
这些在页面顶部的“基础知识和术语”部分有解释。你必须展开该部分才能看到内容。
@Alex 和 @AndyMaleh(三年后,仅根据 Alex 向我们展示的图片)是的,你可以用 flex 制作一个“完美”(为什么是完美的?)产品网格,你只需要将你的内容调整到 flex-start,并注意你的边距… 另外,你还需要将边距应用于标题(请看 alex 的图片,很明显边距应用于图片中的所有内容)。
这里是我的一个“完美”产品网格(响应式)的版本。
干杯!
非常有趣的文章。我有一些问题,如果你能回答我将不胜感激。我已经离开前端开发几年了,去探索烹饪艺术,但我决定重新开始设计和前端开发。
所以我几乎只在响应式设计刚出现的时候才涉足过。现在我正在尝试弄清楚从哪里开始,以及哪些技术是安全的。我可以放心地信任 Flexbox 的“新”语法几乎得到所有浏览器的完全支持,而不用担心所有后备方案吗?
那么 CSS 网格呢?它是否可以安全地用于生产,并提供后备方案?也就是说,如果需要布局的后备方案,为什么要费事地创建两次布局,并使我的代码膨胀呢?
非常感谢你的时间。只是一些提示和技巧;) 会很棒!
你好。很棒的资料!
我一直在使用这个网站,当我需要复习时总是回来。
我的问题是:在元素上使用 display flex,同时将元素设置为具有 FIRST-LETTER 颜色,这在移动屏幕上是正确的,因为我只在中等及以上的屏幕上调用 display。所以,在那些更大的尺寸下,虽然 first-letter 样式仍然被应用,但 flex box 会去除这些样式。这是为什么呢?
谢谢!
嗨,Michel,
Flexbox 规范禁止在 flex 容器内应用
:first-letter
,请参阅“Flex 容器”部分。这是因为:first-letter
和:first-line
非常难以实现,而且似乎没有足够的理由让它们工作。不过,你应该能够将
:first-letter
直接应用于display: block
的 flex 项。如果这还不够好,向 CSSWG 提交一个问题,解释你想要做什么以及为什么这需要工作;如果有一个很好的理由让它工作,这个限制可以解除。(也就是说,在布局引擎中实现
:first-letter
和:first-line
非常痛苦,所以即使规范中取消了这个限制,也可能需要一段时间才能有人愿意实现它。)非常感谢你的资料。无法告诉你我用了多少次这个很棒的参考。
嗨!我是 SeonghoonBaek,我是韩国的前端开发人员 :)
我可以把这篇文章发布在我的博客上吗?我想把这篇文章翻译成韩语,因为这篇文章可以帮助韩国的许多前端开发人员 :) 以及我的同事们。
当然可以。如果用其他语言分享这篇文章可以帮助其他人,那么,请务必这样做。:)
我真的非常喜欢这篇文章,Chris,它真的让我对 flexbox 的范围和酷炫程度大开眼界——我真的是被它迷住了。
哇。我刚开始研究使用 flexbox,因为我要更新一些 22 年前(没错,html2!)开始的教育材料,从 html 4 更新到 html 5。从框架到 div 的变化让我不知所措。但是你的网站用一个非程序员教师可以使用的语言解释了事情,以便更新到除框架之外的其他东西。感谢你制作了这样一个很棒的网站。现在让我开始动手实践,让我的大脑过载。我的主框架页面有 11 个框架。
这个页面太棒了,比其他网站更容易找到 Flexbox 一般问题的答案。(: 我现在经常访问它,所以现在我只要在 Chrome 的万能地址栏中输入“flex”,它就会是第一个建议。非常感谢 Chris..
很棒的文章,谢谢 :)
你能详细解释一下 flex-shrink 吗?浏览器如何判断是否“需要”缩小某个项目?它是如何缩小项目的?较高的数字相对于较低的数字意味着什么?如果在同一个元素上或在两个兄弟元素上同时指定了 flex-shrink 和 flex-grow 会发生什么?
从相反的角度看文章:https://css-tricks.org.cn/flex-grow-is-weird/
flex-shrink 指的是当空间不足时,元素会“放弃”自身多少。使用下面的示例,如果父 div 的宽度小于两个
flex-basis
的宽度(600px),则 item1 将占用 item2 空间的 1/3。示例
Andrew:这两句话似乎相互矛盾。根据第一句话(符合我的理解),item1 不会“占用” 1/3 的空间,而是会“放弃” 3 倍的空间,也就是说,它的收缩速度是 item2 的 3 倍。
所以如果可用宽度是 500px,而不是都均匀缩小 50px,item1 会缩小 75px(宽度为 225px),item2 仅缩小 25px(宽度为 275px)。我理解正确吗?
顺便说一下,
align-content
属性也有space-evenly
值。我几年前读过这篇文章,现在仍然相关 :)很棒的教程。这里有一段很棒的视频,以动画的方式总结了相同的概念
如果你喜欢上面的教程,一定要看看它。
为什么当我调整显示 Flexbox 元素的浏览器窗口大小(例如在这个页面上)时,调整大小后的页面位置与我之前看到的不同?
例如,如果我正在查看这个评论字段并调整窗口大小,我就无法再看到评论字段了?这是 Flexbox 可以解决的问题吗?
Ola.. 我对在子元素上使用
margin: auto;
与在父元素上使用稍微冗长的justify-content: space-around; align-items: center;
感到好奇。我在 Codepen 上尝试了这个(参见此处的示例),我注意到我可以使用这两种方法实现相同的布局。我一直被 JS 中的“100 种方法做 X”所困扰,每种方法都有其独特的缺点.. 所以我现在持怀疑态度,这两种选项中哪一种更安全,既适用于现在的使用,也适用于未来的其他项目?
你好,Coyier 先生。
我有一个 Flex 布局的图片,我一直很困扰,如果最后一行的图片数量较少,它们会被拉伸以填充可用空间(这是合理的,因为
flex-grow:1
)。我在 https://stackoverflow.com/questions/34928565/properly-sizing-and-aligning-the-flex-items-on-the-last-row?noredirect=1 找到了这个
我在图片上试了一下,发现
flex-grow:1000
对我的使用来说是一个神奇的数字。我知道我应该庆幸它能用,但我真的很想知道为什么 1000 是我的神奇数字!它在媒体查询中也能正常工作 - 所以无论第一行中有 5、4、3 还是 1 张图片,最后一行的效果都很好。为什么,为什么?:)。
感谢阅读
Cath
有没有什么充分的理由不为“* {display: flex;}”设置规则?随着我越来越广泛地使用 Flex 布局,我想知道是否可以将 Flex 设置为所有元素的默认显示方式,并更改不需要它的元素。
flex-grow 和 flex-shrink 是如何工作的?我不太清楚。当我将 flex-grow 应用于 flex-items 时,flex-wrap 不会生效。为什么?
在
align-items
部分,写着但它不应该应该是
min-height/max-height
或者可能同时包含高度和宽度,因为它取决于flex-direction
吗?嗨,
我喜欢你的教程。但是,如何使容器内的 Flex 框大小不同?我知道 flex-grow 控制大小,但是如果我分别给容器 1 和 2 设置 2 和 6,第三个容器会忽略它接收的任何 flex 控制。
在 div 或 span Flex 容器中,对齐的文本(text-align 样式)在换行符的情况下会发生什么?
如果此文本包含(或 JSON 文件中的 \n)通过 JavaScript 使用 innerHTML(动态)从 JSON 文件显示到 HTML 的 div 元素中,即使 CSS 或 JavaScript 对 div 元素进行了样式设置,文本也只会左对齐(对齐样式被关闭了)。
也就是说,当内容使用 JavaScript 动态加载时,有没有办法在 Flexbox 容器中保持对齐文本?
谢谢
Chris,两件事(当然相关)。第一,我没有看到对 place-content 的提及(它是 align-content 和 justify-content 的简写,来自 Mozilla - https://mdn.org.cn/en-US/docs/Web/CSS/place-content)。当然,我知道这可能比你第一次写这篇文章的时候更新了(据我所知,大约是 2013 年 4 月),但我还注意到文章顶部(你的署名下)写着“最后更新时间:2018 年 8 月 22 日”。第二,来自 Mozilla (https://mdn.org.cn/en-US/docs/Web/CSS/align-content),似乎适用于 align-content、justify-content 和 align-items,没有任何属性被标记为“默认”,但它们确实列出了一个关键字“normal”并说“项目将以它们的默认位置排列,就好像没有设置 justify-content 值一样”。这让我相信(虽然没有明确说明)“normal”是新的“默认”而不是你列出的“默认”——“stretch”和“flex-start”(它们可能与“normal”相同)。
哦,我想你可以忽略前面评论的第二部分。我刚刚读了工作草案,虽然“normal”是“默认值”,但 normal 的行为根据上下文而异,在大多数情况下,它与你描述的一致。不过,仍然可以在这篇文章中添加 place-content。:) 如果 Mozilla 能多解释一下 normal 和上下文导致“stretch”和“flex-start”行为就好了。
为什么在宽度为 800px 的情况下,主元素在 .main { flex: 2 0px; } 中的 flex-basis 为 0px?为什么不保留为默认值或设置为 auto?
文章更新后发生了什么变化?
嘿 Glen!最显著的变化是图片(样式和更好的属性行为可视化),但也有一些小的调整来适应更新的规范,包括对这些规范本身的链接。:)
哇!完全震撼了我!我把这个页面一直开着。我重启了一下,当我看到这个页面的时候,我愣了一下。所有的示例都变成了卡通!我以为我眼花了。太酷了!我喜欢它!
很棒的文章!美丽的布局和颜色。而且我非常喜欢你的(Illustrator?)插图——你是怎么做到的?
align-items 现在似乎默认为 stretch
如何创建一个包含三个 div 的盒子布局?两个小的在左边,一个大的在右边,都在一行,每个占 50% 的宽度。在平板设备上,一个小盒子移到最下面,占满宽度,上面是两个等宽的盒子。
提前感谢!
谢谢 Chris,关于 flexbox 的精彩文章。我根据这篇文章开发了一个 flexbox playground,以便更好地学习它,可以在 https://poonia.github.io/flexbox/ 上查看。
一篇很好且全面的文章。我有一个问题,它超出了 flexbox 的范围,那就是,你是怎么画出文章中的那些图表的?你用什么软件制作这些图表?
嘿 max!可能是父容器(.casfakjds)需要指定高度。例如,以下容器使用你示例中的相同 CSS 占据了视窗的全部垂直空间:https://codepen.io/geoffgraham/pen/WmRXaz
很棒的指南。当我使用 flexbox 时,这是我的默认首选指南。
感谢你付出努力。解释得很好,设计得很好。
gap
属性及其长写形式row-gap
和column-gap
可用于设置对齐的 flex 子元素之间的间距。与margin
不同,它支持折叠。https://github.com/w3c/csswg-drafts/issues/1696
https://mdn.org.cn/en-US/docs/Web/CSS/gap
不幸的是,目前只有 Firefox 支持……
精彩的帖子 @Chris coyer……你能发一篇“如何阅读 CSS 规范入门”的帖子吗?我发现它很难理解。
似乎这个指南缺少 justify-items 属性
该属性不适用于 flexbox。 MDN
我认为 justify-items 不适用于 flexbox 布局这一事实也应该包含在这篇文章中 :)
如何只为特定数量的子元素设置 flex direction,请注意,在这种情况下,我不能更改 html,只能更改 css!
我看到这篇文章已经更新了。关于这句话:“content 关键字表示“根据项目的实际内容进行尺寸调整”——这个关键字还没有得到很好的支持,因此很难测试,更难知道它的兄弟 max-content、min-content 和 fit-content 的作用。”
情况还是这样吗?
很好的教程,虽然我认为您应该讨论并详细说明此代码
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
因为它在 CodePen 中查看时有点令人困惑 - 也许甚至提供一个获取更多信息的链接。甚至没有提及它。
除此之外,这是一篇很棒的教程。
很棒的文章!
我相信它可以通过在开头添加对“主轴”和“交叉轴”的简要定义来改进。
嗨,Chris,
感谢这篇很棒的文章。我一直参考它。
最近几天,我一直试图使用 flexbox 来满足我的特定要求。大多数关于 flex-box 的文章都假设子元素可以舒适地放在 flex-box 容器元素中,但在我的情况下,子元素可能会累积到大于 flex-box 大小的尺寸。所以这里是一个例子
问题描述:上面的 .container 小于它包含的三个元素的组合高度,因此溢出属性负责处理 .item3 留在容器外部的部分。这没问题。
因此,当 .item1/.item2/.item3 中的每一个都存在时,justify-content: flex-start 工作正常。但在我的情况下,有时 .item2 或 .item3 可能会同时/单独缺失。所以,假设 .item2 和 .item3 都缺失,根据我上面的 css,.item1 显示在我的 .container 的顶部/开始处 - 这并不理想,因为如果 .item1 是容器中唯一的元素,我希望它表现得好像容器有 justify-content: center 一样。
要求:换句话说,如果我的子元素的总高度超过父容器高度,我希望是“flex-start”行为,但如果子元素的总高度小于父容器高度,那么我希望是 flex box 的“center”行为。
justify-conten 的 space-between、space-around、space-evenly 值可能在 .container 高度大于子元素总高度时工作正常,但在我的示例中,当 .item1/.item2/.item3 中的每一个都存在于 .container 中时,.item1 和 .item3 部分仍然留在 .container 外部,这不是我们想要的。
现在我确信有一种使用 javascript 的方法来做到这一点,但我想知道您是否有一些 css 技巧可以以简单优雅的 css 方式实现这一点。此外,我的页面中有很多这样的 .container div,这就是我更喜欢使用 css 的另一个原因。
提前感谢您的帮助。
嗨 Chris - 感谢您发布这篇教程 - 当我需要刷新 flexbox 时,它是我常用的!我最近构建了一个开源工具来探索 flex-box,我希望您和您的读者会发现它有用 https://app.peterrcook.com/flexplorer/再次感谢 CSS-Tricks 和 Codepen :)
我不明白“ltr 中从右到左;rtl 中从左到右”是什么意思。请再解释一次。
ltr 表示“从左到右”系统,例如英语。
rtl 表示“从右到左”系统,例如阿拉伯语
关于 Flex 属性
“建议您使用此简写属性而不是设置各个属性。简写会智能地设置其他值。”
我不知道我是否一定同意这一点;例如,如果我在 3 个 flex-item 中的 3 个上定义“flex: 30%;”,flex-grow 和 flex-shrink 值都被设置为 1,并且我的 flex-item 增长到 1/3 而不是预期的 30%。在这种情况下,“flex-basis: 30%;” 对我来说效果更好。
因此,为了完全控制,我仍然更喜欢使用单独的属性而不是简写。
这个页面很棒!我记不清我回到这里多少次了。很高兴它出现在谷歌搜索的顶部,所以我总能找到它。巧妙地展示了容器和项目之间的区别。很棒的插图。使用 flex CSS 时唯一需要的页面。谢谢!
很棒的笔记!已保存为书签。我想知道,如何使用 flexbox 使剩余的空白填充项目。假设我有 10 张图片,在一行中显示 3 个项目,如果图片大小不相同,那么每行都会有空白。如何解决?
太棒了!!非常感谢这个资源!
克里斯,
非常棒的文章。我立即开始编码,并获得了非常棒的结果。
我唯一希望(也许要求太多)的是,我可以下载所有这些关于该主题的优秀文章的 PDF 文件。
无论如何,我感谢您的努力。
您可以继续打印页面并选择“另存为 PDF”作为打印机。
不错的文章,有没有办法在项目自然换行时以不同的方式设置项目的文本内容,比如将第二个项目的文本内容设置为右对齐,并在整个项目换行到下一行时将其设置为左对齐。
谢谢,
Chandy
很好的教程……易于理解。谢谢。
我经常参考这份指南,但我希望它真的是“完整”的指南。我仍然经常遇到 flexbox 问题,我还没有找到一个权威的指南。
特别是,我经常想为单页应用程序制作一个全窗口 UI。因此,我想要有各种嵌套的面板,其中内容扩展以适应面板,但不会溢出它(overflow: auto)。
但是我发现,无论项目如何,我总是无法做到,而且总是失败,只是随机猜测哪个特定元素需要“min-height: 0”或“height: 100%”或其他东西。Safari 的行为与 Firefox 和 Chrome 不同,这并没有什么帮助,因此,如果我设法在 FF+Chrome 上使其正常工作,那么我必须继续努力并与 Safari 作斗争,并希望我不会破坏 FF+Chrome。我花了最后 24 个工作时间与这场战斗作斗争并失败了,而且没有任何“完整”的指南涵盖使事情正常工作的实际规则。只是很多搜索,然后猜测互联网上的哪个随机答案可能是正确的答案。
您好 CSS Tricks,
感谢您提供这个很棒的网站。
关于“子项属性(弹性项目)”列:我在 MDN 上看到,存在“justify-self”属性,其值与“align-self”相同。
此 CSS 属性是弹性布局的一部分吗?
– https://mdn.org.cn/en-US/docs/Web/CSS/justify-self
如果是,它会被添加到这篇文章中吗?
感谢您提前回复:)
在弹性布局中,此属性被忽略
@Amel 这在以下位置有很好的解释:https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties#33856609
首先,感谢您发布这篇文章——我经常参考它——但我遇到了一个难题,一直找不到解决方案。我正在为一位艺术家构建一个网站。他的一些作品是横向的,而另一些则是纵向的。我正在为每件作品创建一个页面,其中顶部的“着陆区域”旨在填充页面并容纳标题/副标题、艺术品和一些导航(如果用户向下滚动,则有更多有关作品的信息、购买方式等)……
它对横向作品非常有效,但纵向作品真的让我很头疼。艺术品的包装 div 不会缩小,所有内容都变得巨大和/或溢出。我读过您有关 flex-shrink 和 flex-grow 的文章,但我似乎无法弄明白。如果可以的话,请帮忙!
我创建了一个用于所需效果的模型……位于此处:https://www.dropbox.com/s/xdeltebgmzz23wy/flexbox-question.jpg?dl=0
请注意,CSS 列对弹性容器没有影响。
请解释一下。如何?
谢谢。
在https://css-tricks.org.cn/snippets/css/a-guide-to-flexbox/#justify-content中,您提到了以下内容
flex-start(默认):项目紧贴 flex-direction 的开头。
start:项目紧贴**书写模式方向**的开头。
从技术上讲,这是不正确的。flex-start 也尊重书写模式方向。
试图弄清楚这一点。您写的这部分似乎是正确的:“flex-start 也尊重书写模式方向。”
现在它说的是
–
flex-start
:项目紧贴 flex-direction 的开头。–
start
:项目紧贴书写模式方向的开头。MDN 的说法
–
flex-start
:弹性项目的横向起始边距与行的横向起始边距对齐。–
start
:项目紧贴对齐容器的起始边,沿着适当的轴线。似乎存在某种差异,但我不知道是什么。
测试的简易游乐场https://codepen.io/chriscoyier/pen/OJgVRPL
您好!
要了解这些属性的工作原理,我建议您展示一个实际示例。
例如,只写
<
div style=”width:200px; display: flex; flex-wrap: wrap;”>,
这并不能帮助我理解“flex-wrap: wrap”机制,因为我写了它,但设置了此属性后,我没有看到效果。
展示这些属性很好,但如果添加实际示例会更好。
此致。
是否有属性可以使所有项目具有相同的宽度?
这真是个救星!我读过的其他内容要么不起作用,要么比我愿意做的复杂。非常感谢。
我建议提一下,如果
flex-direction: column
,justify-content
成为垂直对齐器,而align-content
成为水平对齐器。这是我见过的最好的 CSS 指南。清晰、简洁,而且完美无瑕。它彻底改变了网页的样式。
我一直回到这个页面。它太完美了!
我喜欢 flex,因为它可以响应地包装,同时保持每个项目之间的固定间隙。这只能在没有
margin: auto
样式的情况下工作。我相信网格布局默认情况下提供了您喜欢的自适应间隙宽度,同样是在没有margin: auto
样式的情况下。我一直回到这个页面,喜欢您的解释。现在,很多 CSS 网站都是复制粘贴的。
谢谢,为此,我刚开始学习 flexbox,这是一个很好的入门材料。
目前,Chrome 只支持 Blink 中的 last-baseline (https://chromestatus.com/feature/5093352798683136)
为什么会有这些“展开”的部分?这使得在页面中使用 Ctrl+F 查找内容变得很麻烦。
太感谢了!这是我见过的关于 Flexbox 最好的解释。谢谢!
我真的很喜欢这个解释,它非常清晰,但是我能不能得到它的离线版本呢?
当然可以!在页面顶部可以下载 PDF 版本。
感谢这门课程!