flex布局,flex布局别称

flex布局，flex布局别称？

Flex布局又称弹性布局，在小程序开发中比较适用。因此将Flex布局相关属性整理如下，搞清楚了这个布局，小程序开发的页面布局就不在话下了。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

flex布局,flex布局别称

flex布局怎么让盒子垂直水平居中？

我们这里分为两种形式，一种是定元素宽高的情况下，另一种是不定元素宽高的情况下。

定元素宽高的情况下

a.绝对定位 + 负margin

利用绝对定位absolute和margin完成元素居中，具体例子如下：

给父元素添加相对定位，子元素添加绝对定位，利用margin负子元素宽高的一半，实现元素的居中，这种方法不常用，

优点：好理解，兼容性好

缺点：必需给定子元素的宽高

b.绝对定位+margin:auto

利用absolute绝对定位和margin:auto自动居中方法完成元素的居中，例子如下：

与上例子一样给父元素加相对定位，子元素添加绝对定位，在设置元素的左、右、上、下位置为零，再利用自动居中对齐的方法margin:auto,完成元素的垂直水平居中，这种方法常用

优点：简单易懂，兼容性好

缺点：代码量大，占内存

c.table-cell

利用css的table属性，完成元素的垂直居中，margin完成元素的水平居中，例子如下

设置父元素的元素类型为table-cell类型，设置表格的垂直对齐方式为居中，再给子元素添加margin:0 auto 完成元素的垂直水平居中，这种方法不常用，

优点：兼容性好

缺点：出来的太早，现在都不流行用了

d.translate

利用2d位移来完成元素的居中，例子如下：

只需操作子元素，给子元素添加transform属性，利用2d位移translate,分别向左向右移动父元素宽高度减自身宽高度的一半，完成元素的垂直水平对齐，这种方法不常用，

优点：代码简单

缺点：我们必须给定子元素的宽和高，否则无法完成元素居中

不定元素宽高的情况下

line-heght

给元素设置line-heght,也就是行高，完成元素的居中，具体例子如下：

我们给子元素设置行高，完成元素的垂直居中，再然后利用文本水平对齐方式text-align方法，完成水平居中，这中方法是最简单的，也是我们经常用的

优点：写起来简单，兼容性好

缺点：只适合单行文本的居中，多行文本不支持

b.绝对定位加translate

之前我们说过一个利用translate完成元素垂直水平的，这里就是在那种方法上的进一步改进，也就是可以，不用设置宽高，也能实现元素的垂直水平居中，用translate加绝对定位完成元素的居中，例子如下：

在这里，还有不同就是，我们translate里面可以直接用百分比完成位移，从而实现元素的垂直水平居中，这种方法常用（但是我不常用）

优点：代码简单，兼容性好

缺点：无

c.flex

flex形成弹性盒，我们利用弹性盒可以做很多事情，其中最主要的还是布局，当然这里我们就不详细说了，我们来谈谈如何使一个元素垂直水平居中，例子如下：

我们让父元素形成弹性盒子，再然后设置主轴对齐方式为居中对齐，侧轴对齐方式为居中对齐从而完成元素的垂直水平居中，这种方法经常用，

优点：代码简单易懂

缺点：PC端兼容性不好

d.flex+margin:auto

这种方法与上面那种不同的是，这里没用到弹性盒子里面的属性，而是用margin直接完成元素的居中对齐，例子如下：

让父元素形成弹性盒子，再然后给子元素添加margin:auto,完成元素的垂直水平居中，这种方法也常用，

flex布局怎么检测宽高的变化？

在使用Flex布局时，可以通过JavaScript检测元素的宽度和高度的变化。以下是一种常用的方法：

1. 使用ResizeObserver API：ResizeObserver是一个现代的JavaScript API，用于监听元素大小的变化。通过创建一个ResizeObserver实例，并指定要观察的目标元素，可以在元素的尺寸发生变化时触发回调函数。

下面是一个使用ResizeObserver检测宽度和高度变化的简单示例：

```javascript

const element = document.querySelector('.your-element'); // 替换为你要监听的元素选择器

const resizeObserver = new ResizeObserver(entries => {

for (let entry of entries) {

const { width, height } = entry.contentRect;

console.log('宽度变化:', width);

console.log('高度变化:', height);

}

});

resizeObserver.observe(element);

```

在上述示例中，将`.your-element`替换为你要监听的具体元素的选择器。然后，通过`new ResizeObserver()`创建一个新的ResizeObserver实例，传入一个回调函数，该函数会在元素的大小发生变化时被调用。回调函数中的`contentRect`属性包含了元素的最新尺寸信息，你可以在其中获取宽度和高度的变化。

请注意，ResizeObserver API是现代浏览器提供的，如果需要支持旧版浏览器，可能需要使用Polyfill或其他替代方案。

希望这能帮助到你！如果你还有其他问题，请随时提问。

flex怎么设置自动换行的布局？

flex-align：默认是设置垂直方向的对齐方式，值： start、end、center、stretch、baseline。

flex-pack：设置子元素之间如何分配多余空间，值：start、end、center、justify。

flex-direction：设置子元素的排列方式， row、row-reverse、column、column-reverse。

flex-wrap：设置子元素的是否自动换行和排列方向，值：nowrap、wrap和wrap-reverse。

-ms-flex：设置子元素弹性，参数，分别是正弹性、负弹性和默认大小。其实布局还有好多新玩法，你可以多看看相关的教程，比如说现在有个视频的系列名称叫做《Buid New World》，里面有一集专门讲 CSS3 复杂布局形式

flex布局如何一左一右？

在flex布局中，通过设置容器的justify-content属性来实现子元素一左一右。具体来说，可以将其值设置为space-between，这会使得子元素在容器内水平分布，第一个子元素与容器左侧对齐，最后一个子元素与容器右侧对齐，而其余子元素则平均分布在它们之间，从而实现一左一右的效果。此外，还需要将子元素的flex属性设置为1，以确保它们平分剩余空间。