flexbox:1.0.0_Flexbox设计指南：了解视觉重量

最新推荐文章于 2022-07-24 23:22:06 发布

cungui5726

最新推荐文章于 2022-07-24 23:22:06 发布

阅读量154

点赞数

文章标签： css java python html css3

原文链接：https://thenewcode.com/901/A-Designers-Guide-To-Flexbox-Understanding-Visual-Weight

版权

flexbox:1.0.0

One of the most notoriously difficult parts of the CSS flexbox spec to understand is the eponymous flex property, which uses cryptic values like 1 1 auto. Confusion only deepens when the designer discovers that flex is merely a shortcut for properties with even stranger names like flex-grow and flex-basis.

同名的flex属性是CSS flexbox规范中最难理解的部分之一，它使用像1 1 auto这样的隐含值。当设计师发现flex只是具有flex-grow和flex-basis类的陌生名称的属性的捷径时，混乱才加深了。

Most explanations of the flexbox spec are fairly technical and dense, with few concessions to visual thinkers. After struggling with the properties and values, I realized that these aspects of flexbox are actually talking about visual weight.

对flexbox规范的大多数解释都是相当技术性和密集性的，对视觉思想家几乎没有让步。在挣扎过属性和值之后，我意识到flexbox的这些方面实际上是在谈论视觉重量。

一种不太平等的算法 (A Not-So-Egalitarian Algorithm)

It would be reasonable to assume that the flexbox model might start by distributing all flexbox items equally. That is, given a series of <article> elements inside a <section>:

假设flexbox模型可以首先平均分配所有flexbox项目开始，这是合理的。也就是说，给定<section>内的一系列<article>元素：

<h1>The Fortean World Times</h1>
<section>
	<article>
		<img src="earth-vs-the-flying-saucers.jpg" alt>
		<h1>Washington D.C. Attacked By Flying Saucers</h1>
		<h2>Dateline Washington D.C.</h2>
		<h3>Frank Bragg reporting</h3>
		<p>The country was brought to a standstill today when flying saucers appeared over the nation’s capital.
		</article>
	<article>
…
</section>

With the <section> provided with display: flex, you might expect each article to have equal width by default, but that’s not the case:

使用display: flex提供的<section> ，您可能希望每篇文章在默认情况下具有相等的宽度，但事实并非如此：

As you can see, the flex items have different widths, depending on their content.

如您所见，弹性项目根据其内容具有不同的宽度。

alt — Flex items are not necessarily given even distribution by default

提供宽度相等的柔性物品 (Providing Flex Items With Equal Width)

If we have three articles in the <section> you might go to the instinctive solution of giving each <article> a width of 33% to make them equal. While that will work, it’s a suboptimal solution that removes many of the advantages of flexbox layout. Instead, I would recommend the following:

如果<section>有三篇文章，您可能会想到一种本能的解决方案，即为每个<article>提供33％的宽度以使它们相等。尽管这将起作用，但它是次优解决方案，它消除了Flexbox布局的许多优点。相反，我建议以下内容：

article { flex: 1 0 0px; }

Which translates to:

转换为：

flex-grow: 1; flex-grow: 1;

“make sure this element grows in width equally to all other flex items with a value of flex-grow: 1”

“确保此元素的宽度与所有其他flex项的宽度增长相等，其flex-grow值为：1”

flex-shrink: 0; flex-shrink: 0;

“don’t shrink this element more than any others to fit in the available space”)

“不要将这个元素缩小到比可用元素更多的大小以适合可用空间”)

flex-basis: 0px; flex-basis: 0px;

“start this element at 0 pixels wide, and adjust from there”

“从0像素宽开始此元素，然后从那里进行调整”

In turn, this can be shortcut to:

反过来，这可以是以下快捷方式：

article { flex: 1; }

I would recommend using this shortcut in your CSS: not only is it quicker to write, but it has better support cross-browser right now.

我建议在CSS中使用此快捷方式：不仅编写起来更快，而且现在也更好地支持跨浏览器。

Note that if flex is shortcut with a unitless value, it defines flex-grow. When a single flex value is defined with a unit (px, etc), the shortcut defines the flex-basis value.

请注意，如果flex是具有无单位值的快捷方式，则它将定义flex-grow 。当使用单位( px等)定义单个flex值时，快捷方式定义flex-basis值。

Written as part of the following CSS:

作为以下CSS的一部分编写的：

section { 
	display: flex; 
}
article { 
	margin: 1rem;
	flex: 1;
}
article img {
	width: 100%;
	height: auto;
}

… the CSS creates equal width and distribution of the flex “columns”:

…CSS创建相等的宽度和弹性“列”的分布：

The advantage of this system is that it’s adaptive: add another <article> element, and the space is distributed automatically between them, with all articles keeping the same width, and no need to adjust any of your CSS.

该系统的优势在于它是自适应的：添加另一个<article>元素，并且空间在它们之间自动分配，所有文章都保持相同的宽度，而无需调整任何CSS。

提供具有更大视觉重量的弹性物品 (Providing A Flex Item With More Visual Weight)

The example we’ve been working on displays articles for an online newspaper. For such a layout, it would make sense that you would occasionally need a larger space for a breaking story, which we’ll apply as a class:

我们一直在为在线报纸显示文章的示例。对于这样的布局，您偶尔需要一个较大的空间来放置一个故事是有意义的，我们将其作为一个class ：

<article class="breaking">

It’s reasonable to assume that breaking stories should always take twice as much space as any other articles on the page. I’ll use another flex shortcut to define a new flex-grow value for this particular class:

合理的假设是，突发新闻应始终占用页面上其他任何文章两倍的空间。我将使用另一个flex快捷方式为此特定类定义新的flex-grow值：

article.breaking { flex: 2; }

However it is applied, flex-grow remains true no matter how big or small the space for the articles becomes: the breaking news article remains always twice as wide as the others: i.e. it always has twice as much visual weight. (The article’s height is determined by it’s content, by default, following standard web layout principles: the one special consideration is that all flex items in a row are the height of the item with the most content).

无论采用何种形式，无论文章的大小有多大， flex-grow都是正确的：突发新闻文章的宽度始终是其他文章的两倍：即，视觉重量总是两倍 。 (默认情况下，文章的高度由其内容决定，遵循标准的Web布局原则：一个特别的考虑是，一行中的所有弹性项目都是内容最多的项目的高度)。

为小屏幕添加解决方案 (Adding A Solution For Small Screens)

Obviously at a certain point cramming articles side-by-side will create unreadable content. At a reasonable breakpoint, we’ll distribute the articles in a column, rather than a row:

显然，在某些时候并排填充文章会产生难以阅读的内容。在合理的断点处，我们将文章分发到一列而不是一行中：

@media screen and (max-width: 750px) {
	section { 
		-webkit-box-orient: vertical;
		flex-direction: column;
	}
}

The -webkit-box-orient: vertical is for iOS 7, which somehow didn’t carry through the flex-direction: column part of the specification, while it does support all the rest, albeit with vendor prefixes).

-webkit-box-orient: vertical适用于iOS 7，虽然它不支持规范的flex-direction: column部分，但它确实支持其余所有内容(尽管带有供应商前缀)。

Note that flex-grow doesn’t make any difference now: all the articles are the same width when they are arranged vertically, with each article’s height determined by its content.

请注意， flex-grow现在没有任何区别：垂直放置时，所有文章的宽度相同，每篇文章的高度取决于其内容。

结论 (Conclusion)

grow is only one part of the visual weight controls in flexbox: the next articles in this series will deal with the two other aspects, flex-shrink and flex-basis.