设计网站技术备案 网站名称涉及到行业

flex布局要牢记的两个知识点：

1. 开启了flex布局的元素叫flex container
2. flex container里面的直接子元素叫flex items
   这两点要记牢，设置属性的时候才不会搞混
   
   这个是flex布局的整体图

一、flex container上的属性

1.flex-direction

修改主轴方向的属性，flex items默认都是沿着main axis（主轴）从main start开始往main end方向排布

<template><div class="container"><div class="item item1">item1</div><div class="item item2">item2</div><div class="item item3">item3</div></div>
</template><script lang="ts" setup></script><style lang="scss" scoped>
.container {width: 600px;height: 600px;background-color: red;display: flex; //开启弹性布局/**改变主轴方向，可选值有row(默认值) 从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上*/flex-direction: column-reverse;.item {width: 100px;height: 100px;color: #000;text-align: center;}
}
</style>

2.justify-content

justify-content决定了flex items在main axis(主轴)上的对齐方式

• flex-start(默认值)：与main star对齐
• flex-end:与main end 对齐
• cener:居中对齐
• space-between:flex items之间的距离相等，与main start、main end两端对齐
• space-evenly:flex items之间的距离相等,flex items与main start、main end之间距离等于flex items之间的距离
• space-around:flex items之间的距离相等，flex items与main start、main end之间距离等于flex items之间的距离的一半

<style lang="scss" scoped>
.container {width: 600px;height: 600px;background-color: red;display: flex; //开启弹性布局/**改变主轴方向，可选值有row(默认值) 从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上*/flex-direction: column-reverse;justify-content: space-evenly;
}
</style>

3.align-items

决定了某一行flex items在cross axis上的所占空间里的对齐方式，主要是多行的时候有影响,这里先不管，当单行理解

• stretch:当flex items在cross axis方向的size为auto时（也就是没有设置高度，也可能是没有设置宽度，看交叉轴方向），会自动拉伸至填充flex container
• normal:在弹性布局中，效果和stretch一样
• flex-start:与 cross start对齐
• flex-end:与cross end对齐
• center：居中对齐
• baseline:与基准线对齐

4. flex-wrap

默认情况下，所有的flex items都会在同一行显示

• nowrap(默认值):一行显示
• wrap：换行显示
• wrap-reverse：换行显示且在交叉轴上反转排列

5.flex-flow

flex-direction和flex-wrap的缩写

6.align-content

决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似

• stretch(默认值)：与align-items的stretch类似
• flex-start：与cross star对齐
• flex-end:与cross end 对齐
• cener:居中对齐
• space-between:flex items之间的距离相等，与cross start、cross end两端对齐
• space-evenly:flex items之间的距离相等,flex items与cross start、cross end之间距离等于flex items之间的距离
• space-around:flex items之间的距离相等，flex items与cross start、cross end之间距离等于flex items之间的距离的一半

二、flex items上的属性

1.order

决定了flex items的排布顺序

• 可以设置任意整数（正整数、负整数、0），值越小就越排在后面
• 默认值是0

2.align-self

用于覆盖flex container设置的align-items属性

• auto(默认值)：遵从flex container的align-items设置
• 可自行设置align-items中的值

3.flex-glow

决定了如何分配main size剩余的空间

• 可以设置任意非负数字(正小数、正整数、0)，默认值是0
• 如果所有flex items的flex-grow总和超过1，每个flex item按比例分配剩余空间
• 如果总和不超过1，那么分配的空间就是剩余空间 * flex-grow
• 最终大小不能大于max-width\max-height

4.flex-shrink

设置当一行显示不下，并且设置flex-wrap:nowarp时，每一个flex items该如何收缩

• 可以设置任意非负数字(正小数、正整数、0)，默认值是1
• 如果所有flex items的flex-shrink总和超过1，每个flex item按比例收缩
• 如果总和不超过1，那么收缩的空间就是超出空间 * flex-shrink
• 最终大小不能小于min-width\min-height

5.flex-basis

用于设置flex items在主轴方向上的base size

• auto(默认值)
• 具体的宽度值
• 决定flex items的最终大小的因素，优先级从高到低

1. max-width\max-height\min-width\min-height
2. flex-basis
3. width\height
4. 内容本身的size

6.flex

flex-grow、flex-shrink、flex-basis的简写