随着Web应用程序和移动应用程序的发展，我们需要更高效的方式来处理列表布局。 CSS Flexbox是个非常强大的工具，可以提供自由式布局而无需使用传统模式，如绝对定位、浮动或表格布局。
什么是CSS Flexbox？
CSS Flexbox 定义了一种灵活的布局方式，可以根据父元素的大小和方向来优化它的子元素。它是由一些容器属性和一些项目属性组成的。容器属性适用于父元素，它们是：
- display - 定义应该使用 Flexbox 布局显示元素的类型，如元素或网格。
- flex-direction - 定义了Flexbox子项目有行或列的排列方式。
- justify-content - 定义主轴上如何对齐Flexbox子项目。
- align-items - 定义Flexbox的项在交叉轴上如何对齐。
- align-content - 定义Flexbox行上的行如何对齐。
项目属性适用于子元素，它们是：
- order - 定义Flexbox子项目的顺序。
- flex-grow - 定义了项目的扩展比例。
- flex-shrink - 定义项目可收缩的比例。
- flex-basis - 定义项目的初始大小。
- flex - 定义了项目的三个属性：flex-grow，flex-shrink和flex-basis。
- align-self - 定义了Flexbox项目如何对齐。
如何使用CSS Flexbox布局列表
假设您正在创建一个在线商店，您需要展示一组产品列表。传统的方式是使用表格，但是即使使用的是CSS进行风格设置，这也不是可扩展且易于管理的。而使用Flexbox，您可以更好地控制项目的排列方式和间距和自适应性。让我们看一下如何创建一个基本的产品列表。
首先，我们需要创建一个父元素。在这个例子中，我们将使用一个 DIV 元素。父元素的属性取决于您想对齐Flexbox子项的方式。我们将在这里使用flex-direction来定义我们子项目的行或列排列方式。如果我们使用的是方向，则在行中排列Flexbox子项，而如果使用的是列则排列Flexbox子项目。
.parent {
display: flex;
flex-direction: row;
}现在我们创建一组子项目。我们还需要定义Flexbox项目的属性。为了创建一个均衡且整齐的产品列表，我们可以使用以下的项目属性：
.child {
flex: 1;
margin-right: 20px;
margin-bottom: 20px;
padding: 20px;
background-color: #f2f2f2;
text-align: center;
}接下来，我们需要将这些子项目添加到父元素中。在这里，我们可以像添加任何其他HTML元素一样，添加一个DIV元素，设置其类并将其包含在父元素中。
-- -------------------- ---- -------
---- ---------------
---- --------------
---- ------------------- ------------ ---
----------- ------
-------------
------
---- --------------
---- ------------------- ------------ ---
----------- ------
-------------
------
---- --------------
---- ------------------- ------------ ---
----------- ------
-------------
------
------现在，您可以使用CSS Flexbox来控制子项的排列方式和间距。在这个例子中，我们将在每个子项之间添加20像素的右边距和底边距，并设置所有项具有相同的宽度。
.child {
flex: 1;
margin-right: 20px;
margin-bottom: 20px;
width: 30%;
}最后，让我们为用户提供一些响应式体验，当屏幕变为小屏幕时，我们可以改变 Flexbox 容器的方向，改为列的方式。这样用户在移动设备上也可以获得更好的体验。
@media only screen and (max-width: 600px) {
.parent {
flex-direction : column;
}
.child {
width: 100%;
}
}总结
使用CSS Flexbox布局可以为您的项目提供极致自由的布局体验，同时保证了浏览器的兼容性和易于维护。在此示例中，我们已经看到如何创建一个基本的商品列表，但是您可以将其扩展到您的特定用例中。有了这些技巧，您可以开始使用CSS Flexbox，并快速将其作用到您的列表中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659d6346add4f0e0ff6ab27b