Flexbox 布局要点-JavaScript中文网-JavaScript教程资源分享门户

什么是 Flexbox？

Flexbox 是一种全新的布局方式，它是 CSS3 中新增的一种布局方式，用于解决网页排版中的一些问题。它可以更好地处理容器中的子元素的对齐、分布、排序和调整大小等问题。

Flexbox 布局的基本概念

Flexbox 布局有两个概念：容器（container）和项目（item）。

容器 (Flex Container)：包裹着所有项目的盒子，也称为父元素。
项目 (Flex Item)：容器中的所有子元素，也称为子元素。

容器的属性

Flexbox 布局中，容器的属性有很多，常用的有以下几个：

flex-direction：定义主轴的方向（横向或纵向）；
justify-content：定义项目在主轴上的对齐方式；
align-items：定义项目在交叉轴上的对齐方式；
flex-wrap：定义是否换行；
align-content：定义多行时的对齐方式。

flex-direction

flex-direction 属性可以定义容器的主轴是横向还是纵向。

默认值为 row，表示横向排列。如果要改为纵向排列，可以将它的值设置为 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：表示以项目的基线对齐。

.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;
  align-content: center;
}

项目的属性

除了容器的属性之外，项目也有一些属性。

order：定义项目排列顺序，数值越小排列越靠前，默认为 0。
flex-grow：定义项目放大比例，默认为 0，表示不放大。
flex-shrink：定义项目缩小比例，默认为 1，表示可缩小。
flex-basis：定义项目在分配多余空间之前，占据的主轴空间，默认为 auto。
flex：flex-grow、flex-shrink 和 flex-basis 的简写。
align-self：定义项目在交叉轴上的对齐方式，会覆盖容器的 align-items 属性。

.item {
  order: 1;
  flex-grow: 1;
  flex-basis: 100px;
  align-self: center;
}

总结

Flexbox 布局是一种非常强大的布局方式，可以优雅地解决网页排版中的一些问题。学习 Flexbox 布局的同时，我们还需要注意一些最佳实践：

尽可能使用弹性布局而不是传统的布局方式。
不要滥用弹性布局，只对需要弹性布局的部分使用。
使用一个属性的缩写来声明弹性布局，而不是多个。
只使用需要的弹性布局属性，不必为了某些效果使用所有弹性布局属性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64684af6968c7c53b087fc50

Flexbox 布局要点