当前位置：首页 > news >正文

css3之flex布局

news 2025/8/25 6:15:30

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

开启了flex布局的元素叫flex container
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之间的距离的一半