CSS Flexbox 是一种强大的布局方式，它可以让我们快速、灵活地创建响应式布局。本文将为你详细介绍 Flexbox 的基本概念、属性和用法，并提供示例代码帮助你深入了解 Flexbox。
什么是 Flexbox？
Flexbox 是 CSS3 的一种布局方式，它可以让我们快速、灵活地创建可伸缩的布局。Flexbox 的核心思想是将父元素分为一个或多个伸缩容器，通过指定容器的属性来定义子元素的排列方式，从而实现灵活的布局效果。
Flexbox 的基本概念
在了解 Flexbox 的具体属性和用法之前，我们需要先了解一些基本概念。
伸缩容器和伸缩项目
在 Flexbox 中，父元素被称为伸缩容器（flex container），而子元素被称为伸缩项目（flex item）。
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
上面的示例中，.container 就是伸缩容器，.item 就是伸缩项目。
主轴和交叉轴
Flexbox 中，有两个重要的轴：主轴和交叉轴。
主轴是伸缩项目排列的主要方向。在默认情况下，主轴是从左到右水平排列的，但也可以通过设置 flex-direction 属性来改变主轴方向。
交叉轴则是垂直于主轴的方向。在默认情况下，交叉轴是从上到下垂直排列的，但也可以通过设置 flex-direction 属性来改变交叉轴方向。
伸缩容器属性和伸缩项目属性
Flexbox 中，有两组重要的属性：伸缩容器属性和伸缩项目属性。
伸缩容器属性用于定义伸缩容器的特性，如方向、对齐方式等。
伸缩项目属性用于定义伸缩项目的特性，如大小、对齐方式等。
Flexbox 的属性和用法
接下来，我们将详细介绍 Flexbox 的属性和用法。
display
Flexbox 的第一个属性就是 display，通过该属性我们可以将元素设为伸缩容器。
.container {
display: flex;
}flex-direction
flex-direction 属性用于指定伸缩项目排列方向，常用的取值有：
row：从左到右排列（默认）row-reverse：从右到左排列column：从上到下排列column-reverse：从下到上排列
.container {
display: flex;
flex-direction: column;
}justify-content
justify-content 属性用于指定伸缩项目在主轴上的对齐方式，常用的取值有：
flex-start：左对齐flex-end：右对齐center：居中对齐space-between：两端对齐，项目之间的间距相等space-around：均匀对齐，项目之间的间距相等且两侧的间距为中间间距的一半
.container {
display: flex;
justify-content: center;
}align-items
align-items 属性用于指定伸缩项目在交叉轴上的对齐方式，常用的取值有：
flex-start：顶部对齐flex-end：底部对齐center：居中对齐baseline：基线对齐，以第一个伸缩项目的基线为准stretch：伸展对齐，所有伸缩项目高度相等
.container {
display: flex;
align-items: center;
}flex-wrap
flex-wrap 属性用于指定伸缩项目是否换行，常用的取值有：
nowrap：不换行（默认）wrap：自动换行wrap-reverse：自动换行，但是以倒序排列
.container {
display: flex;
flex-wrap: wrap;
}align-content
align-content 属性用于指定在伸缩容器内多行伸缩项目的对齐方式，常用的取值有：
flex-start：顶部对齐flex-end：底部对齐center：居中对齐space-between：两端对齐，项目之间的间距相等space-around：均匀对齐，项目之间的间距相等且两侧的间距为中间间距的一半stretch：伸展对齐，所有伸缩项目高度相等
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}order
order 属性用于为伸缩项目指定排序，排序的值越小越靠前，默认值为 0。
.item:nth-child(2) {
order: -1;
}flex-grow
flex-grow 属性用于指定伸缩项目的增长比例，当伸缩容器空间有剩余时，增长比例越大的伸缩项目占据的空间越多，默认值为 0。
.item:first-child {
flex-grow: 1;
}flex-shrink
flex-shrink 属性用于指定伸缩项目的缩小比例，当伸缩容器空间不足时，缩小比例越大的伸缩项目占据的空间越少，默认值为 1。
.item:last-child {
flex-shrink: 0;
}flex-basis
flex-basis 属性用于指定伸缩项目的初始大小，通常与 width 或 height 属性一起使用，默认值为 auto。
.item {
flex-basis: 100px;
}flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。
.item {
flex: 1 0 auto;
}align-self
align-self 属性用于覆盖伸缩容器的 align-items 属性，为当前伸缩项目指定在交叉轴上的对齐方式。
.item:nth-child(2) {
align-self: flex-end;
}示例代码
下面是一个基于 Flexbox 的响应式布局示例代码：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.item {
flex-basis: 200px;
height: 200px;
margin: 10px;
background-color: #ccc;
}上面的示例中，我们将 .container 设为伸缩容器，通过 flex-wrap 属性指定伸缩项目自动换行，通过 justify-content 和 align-items 属性指定伸缩项目居中对齐。伸缩项目的大小和间距通过 flex-basis 和 margin 属性控制。
总结
在本文中，我们详细介绍了 Flexbox 的基本概念、属性和用法，包括 display、flex-direction、justify-content、align-items、flex-wrap、align-content、order、flex-grow、flex-shrink、flex-basis、flex 和 align-self。通过本文的学习，相信你已经掌握了 Flexbox 的基本用法，可以灵活地创建响应式布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501606595b1f8cacdf1acbc