flex弹性布局

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

Flexbox（弹性布局）是CSS3中的一种布局模型，可以在不同方向上对元素进行排列、对齐和分配空间。

以下是一些基本的Flexbox布局样式属性：

display: flex; - 将一个元素指定为弹性容器。
flex-direction - 定义项目的方向，可以是行内的（row, row-reverse）或块的（column, column-reverse）。
flex-wrap - 定义如果项目不能一次性放置在一行/列中时如何换行。
justify-content - 定义项目在主轴方向上的对齐方式（例如：flex-start, flex-end, center, space-between, space-around）。
align-items - 定义项目在交叉轴方向上的对齐方式。
align-self - 允许单个项目有与其他项目不一样的对齐方式。
flex-grow - 定义项目的放大比例。
flex-shrink - 定义项目的缩小比例。
flex-basis - 定义在分配多余空间之前，项目占据的主轴空间（类似于width/height属性）。
flex - 是flex-grow, flex-shrink, flex-basis的简写。

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




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  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 class="flex-item" style="background-color: green;">4</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 是一个弹性容器，它拥有六个 .flex-item 作为子元素。这个容器被设置为水平方向上的项目排列，并且如果项目不能一次性放置在一行中，则允许换行，并且在主轴方向上（即水平方向）项目沿着容器居中对齐，在交叉轴方向上项目在垂直方向上居中对齐。每个项目被设置为100像素宽和高，并有10像素的外边距。

评论已关闭

推荐阅读