css flex布局教程

CSS Flex布局是一种灵活的布局方式，它允许你创建复杂的布局结构，并且能够自适应不同的屏幕大小和设备。以下是一篇CSS Flex布局的教程，帮助你掌握这个强大的布局工具。

一、Flex容器和Flex项目

在CSS Flex布局中，有两种类型的元素：Flex容器（flex container）和Flex项目（flex item）。

• Flex容器

要创建一个Flex容器，只需将一个元素的display属性设置为flex或inline-flex。例如：

.container {  
  display: flex;  
}

这将创建一个Flex容器，其中包含的子元素将成为Flex项目。

• Flex项目

在Flex容器中的子元素将成为Flex项目。这些项目将按照Flex容器的规则进行布局。

二、Flex属性

Flex容器有许多属性，可以用来控制Flex项目的布局。以下是一些常用的Flex属性：

1、flex-direction

flex-direction用于控制Flex项目的方向。可以选择row（默认值，水平排列）、row-reverse（水平反向排列）、column（垂直排列）或column-reverse（垂直反向排列）。

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

2、flex-wrap

flex-wrap用于控制Flex项目是否换行。可以选择nowrap（默认值，不换行）、wrap（换行）或wrap-reverse（反向换行）。

flex-wrap: nowrap;

.container {
  flex-wrap: nowrap;
}

flex-wrap: wrap;

.container {
  flex-wrap: wrap;
}

flex-wrap: wrap-reverse;

.container {
  flex-wrap: wrap-reverse;
}

3、flex-flow

flex-flow是flex-direction和flex-wrap的简写属性，用于同时设置方向和换行。

4、justify-content

justify-content用于控制Flex项目在主轴上的对齐方式。可以选择flex-start（默认值，起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间距相等）、space-around（项目两侧的间距相等）或space-evenly（项目之间的间距和项目与容器边缘的间距相等）。

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

5、align-items

align-items用于控制Flex项目在交叉轴上的对齐方式。可以选择stretch（默认值，项目占满整个容器）、flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）或baseline（基线对齐）。

align-items: stretch

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

6、align-content

align-content用于控制Flex容器在交叉轴上的对齐方式。其选项与align-items相同。这个属性只在flex-wrap为wrap或wrap-reverse时有效。

7、flex-grow

flex-grow用于设置Flex项目的放大比例。默认值为0，表示不放大。值越大，放大比例越高。

8、flex-shrink

flex-shrink用于设置Flex项目的缩小比例。默认值为1，表示按比例缩小。值越小，缩小比例越高。

如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

9、flex-basis

flex-basis用于设置Flex项目的初始大小。默认值为auto，表示根据内容确定大小。还可以设置为具体的长度、百分比或相对单位。

10、flex

flex是flex-grow、flex-shrink和flex-basis的简写属性，用于同时设置这三个属性。

三、综合实例

下面是一个简单的示例，演示了如何使用CSS Flex布局来创建一个具有多个项目的布局：

HTML:

<div class="container">  
  <div class="item">Item 1</div>  
  <div class="item">Item 2</div>  
  <div class="item">Item 3</div>  
</div>

<style>
.container {  
  display: flex;  
  justify-content: space-between; /* 主轴两端对齐 */  
  align-items: center; /* 交叉轴居中对齐 */  
}  
  
.item {  
  flex: 1; /* 等宽布局 */  
  border: 1px solid black; /* 添加边框以便观察 */  
  margin: 10px; /* 添加间距 */  
}
</style>

在这个示例中，我们创建了一个名为.container的Flex容器，其中包含三个名为.item的Flex项目。通过设置justify-content: space-between和align-items: center，我们使项目在主轴上两端对齐，并在交叉轴上居中对齐。通过设置flex: 1，我们使所有项目等宽布局。最后，我们为项目添加了边框和间距以便观察效果。

本文地址：https://www.tides.cn/p_css-flex