介绍
Flexbox 是一种 CSS3 布局模式，旨在为容器提供更加灵活的布局方式。通过使用 Flexbox，我们可以轻松地排列和定位容器中的子元素，无论它们的数量、大小和顺序如何。
在这篇文章中，我们将探讨如何使用 Flexbox 控制子元素在不同屏幕大小下的位置。我们将介绍 Flexbox 布局的各个方面，包括容器、子元素、弹性盒子和弹性容器。
容器
Flexbox 的布局方式涉及到两个主要的元素：容器和子元素。容器是一个具有一定宽度的父元素，用于包含子元素。在 Flexbox 布局中，容器通常会具备以下样式：
.container {
display: flex; /* 设置容器为弹性盒子 */
flex-wrap: wrap; /* 设置子元素在容器内容不够时是否换行 */
align-items: center; /* 设置子元素在容器中的垂直位置 */
justify-content: space-between; /* 设置子元素在容器中的水平位置 */
}display:flex;
该属性定义弹性盒子。
.container {
display: flex;
}flex-wrap
它用于在容器内控制Flex项目的是否换行。
.container {
flex-wrap: wrap;
}align-items
它用于在容器内控制Flex项目的垂直方向的对齐方式。
.container {
align-items: center;
}justify-content
它用于控制Flex项目在父容器中的水平对齐方式，也就是控制Flex项目沿着主轴的对齐方式。
.container {
justify-content: space-between;
}子元素
在 Flexbox 布局中，子元素是容器的直接子元素。子元素一般具备以下样式：
.item {
flex: 1; /* 设置子元素的伸缩比率 */
margin: 10px; /* 设置子元素之间的间距 */
}flex
它用于定义Flex项目的伸缩性。该属性会分配Flex项目的可用空间，通常想要Flex项目的高度或宽度随着页面大小的变化而变化，可以使用flex:1。
.item {
flex: 1;
}margin
它用来设置元素的外边距，在弹性盒模型中，它不同于普通的外边距，它只对相邻的弹性盒子之间的间距起作用。
.item {
margin: 10px;
}弹性盒子和弹性容器
在 Flexbox 布局中，每个子元素都被拥有一个弹性盒子。弹性盒子是一个基本的可伸缩容器，用于包含并控制Flex项目。弹性盒子的主要特性包括它的方向、填充、尺寸、对齐和流和弹性完整性。
下面是一个弹性盒子的样式示例：
.box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}弹性容器是一个包含多个弹性盒子的父容器。弹性容器的主要任务是确定弹性盒子的排列顺序和排列方式。下面是实现弹性容器的样式：
.container {
display: flex;
}示例代码
下面是一个使用 Flexbox 布局控制子元素在不同屏幕大小下位置的示例代码：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ------------ ------- ---------------- -------------- - ----- - ----- -- ------- ----- ----------------- -------- ----------- ------- ------------ ------ ---------- ----- -
结论
Flexbox 布局是一种非常灵活和强大的布局方式，可以轻松地控制子元素在不同屏幕大小下的位置。通过使用容器和子元素的各种属性，我们可以轻松创建复杂的布局并保持可读性和可维护性。
在使用 Flexbox 布局时，一定要理解容器和子元素的各种属性，并灵活地使用它们以获得最佳的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f4cda5f55128102639d4d