大家好。我是前端西瓜哥。今天我们就带大家彻底了解一下Flex Layout。
Flex布局，即柔性布局，是前端开发中非常常见的布局方式。主要原因是容器内的元素可以轻松地水平和垂直居中。
首先我们需要一个容器元素（称为容器），然后在容器元素内部我们需要一些子元素（称为项目）。
divclass='container'divclass='item'1/divdivclass='item'2/divdivclass='item'3/div/div 提供了一些基本样式。
.container{width:400px;height:150px;background-color:brown;}.item{border:1pxsolid#333;border-radius:8px;width:50px;height:50px;background-color:cornflowerblue;}目前似乎还没有使用Re。 x 布局是这样的：
做水平居中
现在，让我们从左到右排列上述项目元素以创建水平中心。
首先，启用Flex Layout 并将主轴方向设置为中心。
.container{display:flex;justify-content:center;/*.*/} 效果为：
库存中使用的关联属性。
display
Display 指定布局方法。这里使用flex来表示使用灵活布局。
flex-direction
flex-direction 指定柔性布局的主轴方向，即项目在容器内放置的方向。其值为：
默认值为row（意思是“行”），方向为从左到右。列（意为“列”）是从上到下排列的。从右到左；列反转（意思是“列方向”），这里我们没有设置任何属性，所以默认是行，项目是从左到右排列的。
justify-content
justify-content（意思是“内容对齐”）指定项目沿主轴的对齐方式。常用的值有：
flex-start 对齐起始位置。 center, center经常用来实现居中布局。 flex-end 对齐末端并在项目之间添加相等的间距。每个项目的两侧必须两侧对齐。 space-around 与space- Between 类似，在项目之间添加空间，包括在第一个和最后一个项目的两侧留出间隙。 1010 水平居中完成。接下来让我们添加水平居中
.container{align-items:center;/*.*/}此时可以看到已经实现了垂直和水平居中对齐。
接下来继续探索相关属性。
再做垂直居中
align-items（意思是“对齐项目”）对应于交叉轴对齐。所谓横轴是指垂直于主轴线的轴。例如，在此示例中，长轴是从左到右，横轴是从上到下。
align-items常用的值有：
flex-start：对齐交叉轴的起点。对于垂直方向，向上对齐；对于水平方向，向左对齐。当然，如果没有对应的固定宽度或高度基线，它只会沿横轴方向移动。例如，如果某个项目的字体比较大，那么它基本上会向下移动，其他项目也会向下移动。参见下图。
align-items
align-items 对所有项目应用相同的规则。如果您有想要应用其他放置规则的项目，您也可以这样做。
对相应的项目使用align-self 属性。值与align-items 相同。默认值为auto，继承自父元素的align-items。
.item2{align-self:flex-start;}这里我们在第二个元素上设置flex-start对齐，渲染结果如下所示：
align-self
如果item元素较多，则需要设置换行规则。该属性被添加到容器元素中。
flex-wrap 属性值：
默认值nowrap 不换行。如果默认不进行换行，如果您有大量项目，则默认情况下它们将被压缩。即使项目设置了宽度，如果你不想让它被压缩，你可以使用max-width，但如果没有足够的位置，你会得到溢出的效果。自动包裹。 Wrap-Reverse：反向环绕。第一行添加了一些元素并设置了换行符。
.container{flex-wrap:wrap;/*其他属性*/}效果为：
flex-wrap
发生断线时会生成多个轴。这些轴可以使用align-content并设置对齐规则来对齐。
如果只有一个轴，则此属性无效。
align-content支持与justify-content基本相同的值，除了相应的方向之外。只是默认值不同。
其值为：
默认值会拉伸以填充容器。 flex-start 对齐起始位置。 flex-end 对齐结束位置。但是，两个值将相等。开始和结束每个项目的两侧都必须对齐。 space-around 与space- Between 一样，包括第一个和最后一个项目两侧的间隙，并在它们之间添加空间。 flex-direction 和flex-wrap 的缩写属性。默认值为行午睡。
就流动方向而言，流动有两种含义。一是流动的方向，二是流动是否是循环的。我觉得这样想的话就更容易记住了。
说实话，我认为缩写属性是一种不好的文明，就像将不同的参数传递给一个有大量重载的函数，导致不同的效果。
缩写的属性进一步增加了学习成本，更容易出错，而且非常令人不快。当然，我认为你可以为一些常用的属性提供省略的属性，但你不应该有太多的参数格式。
align-content
指定项目的顺序。它是一个整数，值越小越接近，值越大越接近。该值可能为负值。如果顺序相同，则按顺序排序。
将第二项的顺序设置得较小。
.item2{order:-1;}效果：
如果您希望第二项运行到最后，请设置大于1 的值。
虽然order可以在不使用JavaScript的情况下实现改变item位置的效果，但在现实开发中仍然很少使用。
flex-flow
flex-grow 用于设置item增长权重。该值是数字类型，可以是小数，但不能是负数。
在这种情况下，该项目可能不会占据整个容器。在这种情况下，您可以使用flex-grow 指定一些元素并增长它们以填充整个容器。
flex-grow 的默认值为0。这意味着即使有剩余空间它也不会扩展。
为第二个和第三个项目设置不同的flex-grow 。
.item2{flex-grow:1;}.item3{flex-grow:2;} 效果：
这个属性可以轻松实现“左边固定宽度，右边自适应宽度”。
order
flex-shrink 用于设置项目的收缩权重。该值是数字类型，可以是小数，但不能是负数。
有时容器内有空间，有时则没有空间。如果空间不足，flex 不希望项目溢出。然后根据flex-shrink 分配丢失空间的百分比。
flex-shrink 的默认值为1。这意味着如果空间不足，所有项目都会缩小相同的百分比。
测试表明，flex-shrink 不能无限缩小，而是随着项目内的内容而增长。有一个适应内容宽度的最小值。
如果您选择使用flex-wrap: 设置换行，则flex-shrink 不起作用，因为项目不需要收缩，并且如果没有足够的位置，则会换行。然而，项目本身的宽度超过了容器的宽度。
这次我使用了13 个项目，并将第二个元素设置为flex-shrink: 0。这意味着元素不会缩放并保持其原始宽度。
.item2{flex-shrink:0;}渲染结果为：
flex-grow
flex-basis 用于在分配剩余空间之前指定项目沿主轴的大小。
主轴方向的尺寸可以是宽度，也可以是高度，但为了说明方便，下文中默认为宽度（主轴方向为水平）。
flex-basis 可以设置为与width 相同的值。此外，常见的关键字值有：
auto，默认值，项目大小使用宽度。否则根据item的内容进行调整（相当于content的值）。此外，它不能超过最小宽度范围。和最大宽度。内容。根据项目内内容的宽度进行调整。如果使用flex-basis 指定特定的尺寸，则flex-basis 的效果将覆盖宽度。
将第二个项目的宽度设置为内容自适应。
.item2{flex-basis:content;}效果为：
flex-shrink
flex 是flex-grow、flex-shrink 和flex-basis 的缩写属性。
支持的关键字值为：
auto（相当于“1 1 auto”）意味着同时增长和收缩。 none（相当于“0 0 auto”）表示保持项目的原始大小，既不增大也不缩小。常用的“flex: 1”相当于“flex: 1 1 0%”。现代标准应该是“1 1 0px”，但由于浏览器已经实现了这一点，浏览器制造商出于兼容性原因决定保留它。
flex-basis
快速总结一下，可以先在容器元素上设置display: flex，然后设置一组flex相关属性。
在这种情况下，容器属性将为：
flex-direction：主轴方向，默认从左到右（行）； justify-content：项目沿主轴对齐，center常用于居中。交叉轴方向可以与justify-content 结合起来执行常用的水平居中效果。 flex-wrap：是否换行，默认为不换行。 axis，仅在发生换行时有用。 flex -flow：flex-direction 和flex-wrap 的简写属性。 item 的属性有：
align-self：定义项目在横轴上的对齐方式。默认值继承自父元素的align-items。 order：较小，默认值为1。 flex-grow：如果容器还有剩余空间，则占用的额外空间的大小权重。 flex-basis：指定项目的预缩放大小。 flex：flex-growth、flex-shrink 和flex-basis 的缩写属性。我是前端西瓜哥。关注我们学习前端知识。
版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。