【前端】快速掌握CSS-flex布局

这篇文章距离上次修改已过193天，其中的内容可能已经有所变动。

CSS的Flexbox布局提供了一种更简单的方式来对容器内的项进行对齐和分配空间。以下是一些关键的CSS属性和它们的作用：

display: flex; - 这将使得容器使用Flexbox布局。
flex-direction - 这决定了项在容器中的方向，可以是水平的（row）或垂直的（column）。
justify-content - 这决定了项在主轴方向上的对齐方式，比如居中（center）、两端对齐（space-between）等。
align-items - 这决定了项在交叉轴方向上的对齐方式，比如居中对齐（center）、顶部对齐（flex-start）等。
flex-wrap - 当容器内的项太多无法在一行内显示时，这决定了它们是否应该换行以及如何换行。
flex-grow - 当有多余空间时，这决定了项应该如何增长以填充这些空间。
flex-shrink - 当容器空间不足以容纳所有项时，这决定了项应该如何缩小以适应这些空间。
flex-basis - 这定义了在分配多余空间之前，项占据的主轴空间大小。

下面是一个简单的Flexbox布局示例：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
 
.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item" style="background-color: cyan;">1</div>
  <div class="flex-item" style="background-color: magenta;">2</div>
  <div class="flex-item" style="background-color: yellow;">3</div>
</div>
 
</body>
</html>

这个例子中，.flex-container 使用了Flexbox布局，并将其设置为水平方向（row），项之间在主轴方向（水平方向）两端对齐（space-between），在交叉轴方向（垂直方向）居中对齐（center）。每个 .flex-item 有相同的宽和高，并且它们会在容器空间不足时等比缩小。

【前端】快速掌握CSS-flex布局

评论已关闭

推荐阅读