css3之flex布局 - 技术栈

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

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

这个是flex布局的整体图

一、flex container上的属性

1.flex-direction

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

html 复制代码

<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之间的距离的一半

html 复制代码

<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的最终大小的因素，优先级从高到低

max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的size

6.flex

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