📌  相关文章
📜  使用 flexbox 推进 CSS 布局(1)

📅  最后修改于: 2023-12-03 15:36:27.952000             🧑  作者: Mango

使用 Flexbox 推进 CSS 布局

什么是 Flexbox？

Flexbox（Flexible Box）是一个CSS3新提出的布局方式，由于它的灵活性，现在被广泛应用于网站的布局中。

Flexbox旨在解决当我们希望创建具有不同大小、不同比例和不同方向的容器元素的高度和宽度时，传统布局方式无法轻松应对复杂布局的问题。Flexbox带来了强大的能力，它提供了一种更直观和灵活的方法，通过简单的CSS属性就能创建复杂的布局。

如何使用 Flexbox？

在使用Flexbox布局之前，需要先了解一些关键的概念和术语：

  • Flex Container: 作为 Flex 布局的容器，属性值为 display: flex或display: inline-flex。
  • Flex Item: Flex 布局的每个子元素。
  • Main Axis: Flexbox 布局中主轴的方向，因为它定义了Flex Item 沿着容器排列的方向。可以通过指定 flex-direction: row 或 flex-direction: column 来更改它。
  • Cross Axis: Flexbox 布局中与主轴垂直的轴，必须是上面提到的主轴方向的垂直方向。如果主轴方向是 row，则交叉轴方向是 column，反之亦然。

接下来是一些常用的布局属性

容器属性
  1. display: flex: 创建一个 Flex Container。
  2. flex-direction: row | row-reverse | column | column-reverse: 设置容器的主轴方向，默认为 row。
  3. flex-wrap: nowrap | wrap | wrap-reverse: 设置如何换行。默认不换行。
  4. flex-flow: <'flex-direction'> || <'flex-wrap'>: 这是 flex-direction 和 flex-wrap 的简写形式。
  5. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly: 定义 Flex Item 在主轴上的对齐方式。
  6. align-items: flex-start | flex-end | center | baseline | stretch:定义 Flex Item 在交叉轴上的对齐方式。
  7. align-content: flex-start | flex-end | center | space-between | space-around | stretch: 定义多个 Flex Line （参考下面的解释）在交叉轴上的对齐方式。
元素属性
  1. flex-grow: <number>：定义了 Flex Item 的放大比例。
  2. flex-shrink: <number>：定义了 Flex Item 的缩小比例。
  3. flex-basis: <length> | auto：定义了 Flex Item 的基础大小。
  4. flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]：是 flex-grow, flex-shrink 和 flex-basis 的简写形式。
  5. align-self: auto | flex-start | flex-end | center | baseline | stretch：定义了单个 Flex Item 在交叉轴上的对齐方式。
Flex Box Model

Flexbox有一个复杂的盒模型，由以下几个部分组成：

Flex-Box-Model

  • Flex Container:通常是 <div>，它是一组Flex Item的集合。
  • Main Axis: 容器的主要轴。
  • Main Start | Main End : Flex容器的左侧和右侧，如果是竖直布局则是上侧和下侧。
  • Main Size : Flex容器的宽度或高度。
  • Cross Axis：容器的次轴。它时主轴的垂直方向，如果主轴是竖直向下的，那么它就是向左&右两边的。这个概念非常重要，因为许多Flex容器属性都在交叉轴上定义。
  • Cross Start | Cross End: Flex容器在交叉轴上的上/下或左/右终点和起点。
  • Cross Size : Flex容器在交叉轴上的高度或宽度，这与主要尺寸不同，因为它可以被收缩或拉伸。

由于篇幅原因，在这里就不介绍全部的属性，如果有兴趣，可以查阅相关资料。

Flexbox布局示例

下面有一个简单的应用了Flexbox的布局，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>Flexbox layout example</title>
	<style>
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background-color: antiquewhite;
		}
		.item {
			min-width: 300px;
			max-width: 500px;
			height: 300px;
			margin: 10px;
			background-color: cadetblue;
			color: white;
			font-size: 24px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			flex-grow: 1;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="item">Flex item 1</div>
		<div class="item">Flex item 2</div>
		<div class="item">Flex item 3</div>
		<div class="item">Flex item 4</div>
		<div class="item">Flex item 5</div>
	</div>
</body>
</html>

上述示例展示了一个简单的 Flexbox 布局。我们使用了 Flexbox 的几个常用属性：

  • display: flex 创建容器。
  • flex-direction: column 定义了 Flex Item 的排列方向，以垂直方向为主轴。
  • justify-content: center 居中了 Flex Item 在主轴方向上的位置。
  • align-items: center 居中了 Flex Item 在交叉轴方向上的位置。

示例的效果如下图所示：

Flexbox-demo

总结

除了上述介绍的Flex容器和Flex Item的带有flexbox官方名称的属性外，还有其他的CSS属性也可以用于这种布局技术。在深入了解 Flexbox 和其所有可用功能之前，上述内容可以帮助你开始使用一种令人兴奋的新的布局模式。

在体验了一段时间后，你可能会发现使用 Flexbox 更简单高效，特别是在处理移动端设备的时候，更是从不同角度提高了用户体验。希望本文对你有所帮助，引导你了解并开始使用Flexbox布局技术。