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