flex布局

最新推荐文章于 2025-06-21 13:12:31 发布

Tautus

最新推荐文章于 2025-06-21 13:12:31 发布

阅读量841

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/Snoopyqiuer/article/details/83474754

css 专栏收录该内容

3 篇文章

订阅专栏

传统的css布局是基于css盒模型，依赖display、position、float等属性的布局方案，有稳定的跨浏览器兼容性，但在某些布局方面仍存在限制，例如：在父内容里面垂直居中一个块内容；使容器的所有子元素占用等量的可用高度/宽度，且不需要关心容器高度/宽度的限制；使多列布局中的所有列采用相同的高度，即使每一列内容不同。而flex布局使的这些布局问题得到更容易的解决。

1. flex布局

flex布局是Flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性。任何类型容器都可以使用flex布局。想要使用flex布局则给希望设置为flexible元素的父元素设置属性display：flex，想将行内元素设置为flexible box，则为其设置属性display：inline-flex。Webkit 内核的浏览器，须加上-webkit前缀。需要注意的是，容器使用flex布局后，其子元素的float、clear、vertical-align属性将失效。

2. flex模型说明

当元素表现为flex框时，它们沿着两个轴来布局：

主轴(main axis)：是沿着flex元素放置的方向延伸的轴(比如页面伤的横向的行、纵向的列)。该轴的开始和结束被称为main start和main end(主轴与容器边框的交点)。
交叉轴(cross axis)：是垂直于flex元素放置方向的轴，该轴的开始和结束被称为cross start 和 cross end(交叉轴与边框的交点)。
设置了display：flex的父元素被称之为flex容器(flex container)。
在flex容器中表现为柔性的盒子的元素(即容器内的子元素)被称之为flex项(flex item)。

3. flex布局主轴方向

flex-direction属性指定了主轴的方向。flex-direction属性值：

row：flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
row-reverse: 表现和row相同，但是置换了主轴起点和主轴终点，即row的反向。
column：flex容器的主轴和块轴(默认从上至下垂直堆叠)相同。主轴起点与主轴终点和书写模式的前后点相同。
column-reverse：表现与column相同，但是置换了主轴起点和主轴终点，即column 的反方向

flex-direction属性值默认为row，需要注意的是，值 row 和 row-reverse 受 flex 容器的方向性的影响。如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。

4.flex布局换行

默认情况下flex项都排列在轴线上，当在布局中使用定宽或者定高的时候，可能会出现一个问题：子元素内容过大时会溢出容器，破坏布局。解决方案：为容器添加flex-wrap：wrap。

flex-wrap属性值：

nowrap：为flex-wrap属性的默认值，即不换行；
wrap：换行，第一行在上方，依次向下；
wrap-reverse：换行，第一行在下方，依次向上；

5. flex-flow 缩写

flex-flow 为 flex-direction和dlex-wrap的缩写，默认为 flex-flow：row no-wrap。例：

flex-direction：row；flex-wrap： wrap； => flex-flow：row wrap；

6. flex布局水平和垂直对齐：align-items，justify-content

align-items：控制flex项在交叉轴上的位置。假设交叉轴从上至下：

stretch：默认值，若flex项未设置高度或高度设置为auto，则flex项被拉伸到高度为整个容器的高度，但同时会遵照'min/max-width/height'属性的限制。
center：基于交叉轴的中心点对齐，若元素在交叉轴上的高度高于其容器，那么在两个方向上溢出距离相同。
baseline：基于flex项的第一行文字的基线对齐(第一行文字底部对齐)；
flex-stat：基于交叉轴的起点对齐(全部置顶)；
flex-end：基于交叉轴的终点对齐(全部置底)；
其他属性

注：flex项可以使用align-self属性覆盖align-items的值，如果任何 flex 项的交叉轴方向 margin 值设置为 auto，则会忽略 align-self。align-self的值有auto、stretch、center、baseline、flex-stat、flex-end，与align-items值意义相同。align-self默认值为auto，设置为父元素的align-items值，若该元素没有父元素的话，则设置为stretch。

justify-content：控制flex在主轴上的位置。假设主轴从左至右：

flex-start：默认值，使所有flex项都位于主轴的开始处(即左对齐)。
flex-end：使所有flex项都位于主轴的结尾处(即右对齐)。
center：使所有的flex项基于主轴居中对齐。
space-around：使所有的flex项沿着主轴均匀分布，在任意一端都会留有一点空间，即每个flex项两侧的间距相等，flex项之间的间距为flex项与边框间距的2倍。
space-between：使所有的flex项沿着主轴均匀分布，与space-around不同的是，flex项与边框之间没有间隔，即两端对齐。

6. flex项的属性

(1) flex项排序：order

弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。这也是传统布局方式很难做到的一点。语法：order：integer （可取负，0，正），或者全局值：inherit、initial、unset。

需熟知：

所有flex项默认的order值为0；
order值大的flex项比order值小的在显示顺序中更靠后；
相同order值的flex项按源顺序展示，即若有四个元素，order为2、1、1、0，则其显示顺序为第四、第二、第三、第一，第三个元素显示在第二个元素之后是应为两者order相同但第三个元素在源顺序上排在第二个元素之后。
给元素order设置为负值，则该元素排在order为0的元素之前。

(2) flex-grow

定义flex项的拉伸因子，即放大倍数，值为Number，无单位，不可取负值，默认为0，即不放大，无论是否有空余位置。

(3)flex-shrin

指定了 flex 元素的收缩规则，即缩小倍数。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。值为Number，无单位，默认为1，空间不足时flex项缩小。一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。

(4)flex-basis

指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。flex-basis取值：

可以是一个数字后面跟着绝对单位例如 px, mm, pt; 该值也可以是一个百分数，那么这个百分数就是相对于其父弹性盒容器的宽或者高（取决于主轴方向）。负值是不被允许的。
content：基于 flex 的元素的内容自动调整大小。由于最初规范中没有包括这个值，在一些早期的浏览器实现的flex布局中，content值无效，可以利用设置(width或 height) 为 auto达到同样的效果。
auto：默认值，含义是 “参照我的width和height属性”。

(5) flex

flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置flex-grow, flex-shrink与flex-basis。大多数情况下，开发者需要将flex设置为auto，initial，none，或一个无单位正数(后两项可选)。flex的快捷设置值：

auto：元素会根据自身的宽度与高度来确定尺寸，但是会自行伸长以吸收flex容器中额外的自由空间，也会缩短至自身最小尺寸以适应容器。这相当于将属性设置为 "flex: 1 1 auto"。
initial：属性默认值，元素会根据自身宽高设置尺寸。它会缩短自身以适应容器，但不会伸长并吸收flex容器中的额外自由空间来适应容器。相当于将属性设置为"flex: 0 1 auto"。
none：元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应flex容器。相当于将属性设置为"flex: 0 0 auto"。
<positive-number>(正值)：元素会被赋予一个容器中自由空间的指定占比。这相当于设置属性为"flex: <positive-number> 1 0"。

默认情况下，元素不会缩短至小于内容框尺寸，若想改变这一状况，请设置元素的 min-width 与mi-height 属性。

7. flex嵌套

弹性盒子也能创建一些颇为复杂的布局。设置一个元素为flex项目，那么他同样成为一个 flex 容器，它的孩子(直接子节点)也表现为 flexible box 。

8. align-content

align-content 属性定义了当作为一个弹性盒子容器的属性时，浏览器如何在容器的侧轴围绕弹性盒子项目分配空间。其定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。