flex布局的基本使用

一.flex基本概念

display: flex 是CSS中的一个属性，用于定义一个容器元素（通常是一个父元素）采用弹性盒模型布局。这个属性的作用是使容器内的子元素能够按照一种灵活的方式进行排列和布局，以适应不同屏幕尺寸和设备。

flex的作用

通过使用 display: flex，可以轻松地实现以下效果：
1. 水平和垂直居中元素。
2. 创建具有等高或等宽的列，无论内容多少。
3. 轻松地重新排列子元素的顺序。
4. 在容器内平均分布子元素的空间，而无需使用复杂的布局技巧。

这使得在网页设计中实现响应式和灵活的布局变得更加容易。通过指定 `display: flex` 和相应的弹性盒属性，您可以更好地控制页面上元素的位置和排列方式。

二.容器属性

1.flex-wrap

2.flex-direction

3.justify-conter

4.align-items

2.1flex-wrap属性

`css中用于控制弹性盒子容器中子元素如何换行的属性，如

flex-wrap：wrap：容器不足以容纳所有子元素时，自动换行到下一行

2.2flex-direction

flex-direction：column：

用于指定弹性盒子（Flexbox）容器内子元素的排列方向。当您将它应用于容器时，子元素会沿垂直方向（从上到下）排列，而不是默认的水平方向。

.box{
  display: flex;
  flex-direction: column;
}

2.3justify-conter

justify-conter：center：

用于控制弹性盒容器内的子元素在主轴上的对齐方式。当您将这个属性应用于容器时，子元素将在主轴上居中对齐。如果主轴是水平方向，那么子元素将水平居中对齐。如果主轴是垂直方向，那么子元素将垂直居中对齐。

.box{
  display: flex;
  justify-conter: center;
}

2.4align-iteams

align-iteams：center：

用于控制弹性盒容器内的子元素在交叉轴上的对齐方式。它将子元素在交叉轴上居中对齐。如果主轴是水平方向，则交叉轴是垂直方向。因此，使用 align-items: center; 将使子元素在垂直方向上居中对齐。

.box{
  display: flex;
  align-iteams: center;
}