Css flex 布局

目录

flex布局

flex布局也可以称为弹性布局，是css中一种非常常用的布局方式，他可以让开发员使用灵活的盒子模型来进行元素的排列和定位。
 flex定义了两条轴，分别是主轴和交叉轴，在默认情况下，主轴为水平轴即x轴，交叉轴为垂直轴即y轴。

常用属性

1. display: flex; 或 display: inline-flex;

2. flex-direction

定义主轴的方向（row、row-reverse、column、column-reverse）。

.box{flex-direction: row | row-reverse | column | column-reverse;}

• row：默认值，主轴为水平方向，起点在容器的左端。子项沿着主轴从左到右进行排列。
• row-reverse：主轴为水平方向，起点在容器的右端。子项沿着主轴从右到左进行排列。
• column：主轴为垂直方向，起点在容器的顶端。子项沿着主轴从上到下进行排列。
• column-reverse：主轴为垂直方向，起点在容器的底端。子项沿着主轴从下到上进行排列 。

3. flex-wrap

这个属性控制了 flex 容器内元素的换行行为，决定了子项（flex items）在一行内显示，还是可以换行多行显示（nowrap、wrap、wrap-reverse）

.box{flex-wrap: nowrap | wrap | wrap-reverse;}

• nowrap：默认值，所有子项都将尽可能在一行内显示。如果一行内没有足够的空间，子项可能会溢出容器。
• wrap：子项将在必要时换行到多行。主轴水平则从左到右；主轴垂直则从上到下。
• wrap-reverse：子项将在必要时换行到多行。主轴水平则从右到左；主轴垂直则从下到上。

4. flex-flow

flex-flow属性是CSS中的一个复合属性，它结合了flex-direction和flex-wrap两个属性的功能，用于设置flex盒子对象的子元素排列方式。如果元素不是弹性盒对象的元素，则flex-flow属性不会起作用。

.box{flex-flow: flex-direction flex-wrap | initial | inherit;}

• flex-direction flex-wrap：分别是两个属性的对应值。比如：column wrap;
• initial：设置该属性为它的默认值。即两个属性的对应的默认值
• inherit：从父元素继承该属性。

5. justify-content

定义项目在主轴上的对齐方式。

.box{justify-content: flex-start | flex-end | center | space-between | space-around;}

• flex-start ：默认值，主轴左对齐。
• flex-end：主轴右对齐。
• center ：主轴居中对齐。
• space-between：在主轴，首尾顶格，子项之间间距相等。
• space-around：在主轴，首尾间距是子项之间间距的一半，即项目之间的间隔是项目与容器边缘间隔的两倍。这意味着第一个项目距离容器的开始边缘有一定距离，而最后一个项目距离容器的结束边缘也有相同的距离。

6. align-items

定义项目在交叉轴上的对齐方式。

.box{align-items:  stretch |  flex-start | flex-end | center | baseline | initial | inherit;}

• stretch：默认值，如果项目未设置具体的高度或设置为 auto，并且没有设置 align-self 属性，则项目会被拉伸以填充容器的交叉轴上的空间。但是，如果项目有具体的高度值，则此值将被忽略。
• flex-start ：交叉轴的起始端对齐。
• flex-end：交叉轴的结束端对齐。
• center ：交叉轴上居中对齐。
• baseline：项目的基线对齐。基线是项目中第一行文本的底部。如果所有项目的基线都相同，则它们会在交叉轴上对齐。如果项目的尺寸或内容不同，则对齐可能会看起来不整齐。
• initial：将此属性设置为其默认值。对于 align-items 来说，默认值是 stretch。
• inherit：从父元素继承 align-items 属性的值。

7. align-content

定义多根轴线的对齐方式。如果项目只有一根轴线，则该属性不起作用。

8. flex-grow

flex-grow 在有空余空间的时候决定了子项在应该如何增长以填充额外空间。当弹性容器的总大小大于其所有子项的总大小时，额外的空间就会根据每个弹性项目的 flex-grow 值来分配。

.box{flex-grow: <number>;/*number非负数，可以是0和正数*/}

• 0：默认值，意味着即使存在剩余空间，该项目也不会增长。
• 正数：增长。举例：如果所有项目的 flex-grow 都设置为 1，则它们将等比例地增长以填充剩余空间。如果一个项目的 flex-grow 值为 2，而其他项目的值为 1，那么前者将占用的空间将是后者的两倍。

工作原理：当容器的主轴上有多余空间 （或者说剩余空间）时，flex-grow 属性会决定这些多余空间如何分配给各个弹性项目。具体来说，每个项目的最终大小将是其基础大小（即项目的原始大小，或设置了 flex-basis 属性后的大小）加上根据 flex-grow 值分配到的额外空间。

9. flex-shrink

flex-shrink 定义了当弹性容器的空间不足以放下所有子项时，各个子项的缩小比例。。定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.box{flex-shrink: <number>;/* 默认值为 1 */}

• 1：默认值，当空间不足时，它们将等比例缩小。
• 0：不缩小，即使空间不足，项目也不会缩小。
• 其他正数：指定了弹性项目的缩小比例，如果一个项目的 flex-shrink 值大于其他项目，则该项目将比其他项目缩小得更多

10.flex-basis

flex-basis定义了在分配多余空间之前，项目占据的主轴（main axis）空间。这个属性可以影响到项目的最终大小，尤其是在空间不足或空间富余的情况下。浏览器根据这个属性，计算主轴是否有多余空间。

.box{flex-basis: auto | length | percentage | initial | inherit;}

• auto：默认值，项目的尺寸将根据其 width（主轴为水平）或 height（主轴为垂直）属性的值来确定。如果这两个属性都没有设置，则尺寸将基于内容来确定。
• length：具体的长度值，如 50px、3em 等。这将设置元素在主轴上的初始大小。
• percentage：百分比值，基于其包含块（flex 容器的内联轴尺寸）的百分比来计算大小。注意，这里的“包含块”指的是 flex 容器的尺寸，而不是父元素或视口的尺寸。
• initial：将此属性设置为其默认值。inherit：从父元素继承 flex-basis 属性的值。

11. flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.box{flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ];}

• none：0 0 auto，元素既不会放大以填充可用空间，也不会缩小以适应容器，并且其基础尺寸将由其 width 或 height 属性（取决于主轴方向）确定。
• 一个无单位数：此值将仅设置 flex-grow 属性，而 flex-shrink 将默认为 1，flex-basis 将默认为 auto。这表示元素将尝试根据提供的值放大以填充可用空间，但也会根据需要缩小。
• 一个长度（如 px、em 等）或百分比：此值将被视为 flex-basis 的值，而 flex-grow 将默认为 1，flex-shrink 将默认为 1。这允许你直接设置元素的基础尺寸，同时保留其放大和缩小的能力。
• 两个无单位数：这两个值将分别设置 flex-grow 和 flex-shrink，而 flex-basis 将默认为 auto。这允许你独立控制元素的放大和缩小行为。
• 两个值（其中一个为长度或百分比）：如果第一个值是无单位数，它将被视为 flex-grow；第二个值如果是长度或百分比，则被视为 flex-basis，而 flex-shrink 将默认为 1。
• 三个值：这允许你同时设置所有三个子属性的值。