CSS Flex 布局【转载】，前端最新大厂面试真题总结

在CSS中，Flexbox布局提供了一种更为有效的方式来对容器内的项目进行排列、对齐和分配空间。Flexbox可以使容器内的项目能够在任何方向上动态扩展和收缩，以最佳方式填充可用空间。

以下是一些常用的Flexbox属性：

display: flex; - 将一个容器指定为Flexbox布局。
flex-direction - 定义Flex项目的排列方向（row, row-reverse, column, column-reverse）。
flex-wrap - 定义如果一行排不下时，Flex项目是否应该换行（nowrap, wrap, wrap-reverse）。
justify-content - 定义Flex项目在主轴方向上的对齐方式（flex-start, flex-end, center, space-between, space-around）。
align-items - 定义Flex项目在交叉轴方向上的对齐方式（stretch, flex-start, flex-end, center, baseline）。
align-self - 允许Flex项目有与其它项目不同的对齐方式。
flex-grow - 定义项目的放大比例。
flex-shrink - 定义项目的缩小比例。
flex-basis - 定义在分配多余空间之前，项目占据的主轴空间（类似于width/height属性）。
flex - 是flex-grow, flex-shrink, flex-basis的简写。

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




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
.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容器，.flex-item 是其中的Flex项目。这个容器将会展示为一个水平排列的项目列表，并在必要时进行换行，列之间的空间会根据项目数量均匀分布。

CSS Flex 布局【转载】，前端最新大厂面试真题总结

评论已关闭

推荐阅读