flex布局 - 零基础保姆级

最新推荐文章于 2024-06-28 15:55:34 发布

侧耳倾听...

最新推荐文章于 2024-06-28 15:55:34 发布

阅读量525

点赞数

分类专栏： css样式文章标签： vue.js css3

本文链接：https://blog.csdn.net/xm_w_xm/article/details/115349871

版权

css样式专栏收录该内容

19 篇文章 0 订阅

订阅专栏

2.2.1 flex-direction属性决定主轴的方向（即项目的排列方向）。

2.2.2 flex-wrap属性 flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

2.2.3 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

2.2.4 justify-content属性定义了项目在主轴上的对齐方式。

2.2.5 align-items属性定义项目在交叉轴上如何对齐 ,可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。也就是。

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

2.3 弹性元素

2.3.1 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以负数或整数。

2.3.2 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。可以使用整数或小数声明

2.3.3 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

2.3.4 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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

2.3.6 align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

一、实现效果

二、代码

<template>
  <div class="flex">
    <div class="flex-box">
      <div v-for="item in dataList" :key="item.id" class="flex-box-item">
        <div class="flex-box-img" @click="jumpApp()">
          <img :src="item.imgurl" />
          <div>
            <div class="box-title">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
      <i v-for="ele in dataList.length" :key="ele"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "flex",
  components: {},

  data() {
    return {
      dataList: [
        {
          imgurl: require("@/assets/logo.png"),
          title: "测试demo",
          context: "测试demo====================",
          url: "查看APP",
        },
        {
          imgurl: require("@/assets/logo.png"),
          title: "测试demo",
          context: "测试demo====================",
          url: "查看APP",
        },
        {
          imgurl: require("@/assets/logo.png"),
          title: "测试demo",
          context: "测试demo====================",
          url: "查看APP",
        },
        {
          imgurl: require("@/assets/logo.png"),
          title: "测试demo",
          context: "测试demo====================",
          url: "查看APP",
        },
        {
          imgurl: require("@/assets/logo.png"),
          title: "测试demo",
          context: "测试demo====================",
          url: "查看APP",
        },
        {
          imgurl: require("@/assets/logo.png"),
          title: "测试demo",
          context: "测试demo====================",
          url: "查看APP",
        },
        {
          imgurl: require("@/assets/logo.png"),
          title: "测试demo",
          context: "测试demo====================",
          url: "查看APP",
        },
        {
          imgurl: require("@/assets/logo.png"),
          title: "测试demo",
          context: "测试demo====================",
          url: "查看APP",
        },
      ],
      logintitle: "未登录",
    };
  },
  methods: {},
  mounted() {},
};
</script>
<style scoped>
.flex-box {
  box-sizing: border-box;
  display: flex;
  /* justify-content: space-between; */
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-box > i {
  width: 300px;
}
.flex-box-item {
  height: 300px;
  width: 280px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ddd;
  cursor: pointer;
}
.box-title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: #41b883;
}
</style>

三、基础知识

2.1 flex布局是什么

Flex 是 Flexible Box 的缩写，意为"弹性布局"，可以轻松的控制元素排列、对齐和顺序的控制。现在的终端类型非常多，使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

2.2 弹性盒子-容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

`2.2.1 flex-direction`属性决定主轴的方向（即项目的排列方向）。

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

`2.2.2` flex-wrap属性 flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。默认情况下，项目都排在一条线（又称"轴线"）上。`flex-wrap`属性定义，如果一条轴线排不下，如何换行。

nowrap（默认）：不换行
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

`2.2.3 flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。

`2.2.4 justify-content`属性定义了项目在主轴上的对齐方式。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-evenly：元素间距离平均分配

`2.2.5 align-items`属性定义项目在交叉轴上如何对齐 ,可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。也就是。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

`2.2.6 align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
space-evenly:元素间距离平均分配

注意：这个一定要设置高度。

2.3 弹性元素

order
flex-grow
flex-shrink
flex-basis
flex
align-self

2.3.1 `order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以负数或整数。

VUE利用flex的order属性实现列表的动态排序

<template>
  <div class="flex-box">
    <div
      v-for="item in dataList"
      :key="item.id"
      :style="[{ background: item.color }, { order: item.time }]"
      class="flex-box-item"
    >
      <div class="box-title">
        {{ item.title }}
      </div>
      <div class="box-time">
        order:{{ item.time }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "flex",
  components: {},

  data() {
    return {
      dataList: [
        {
          title: "1",
          time: 3,
          color: "oldlace",
        },
        {
          title: "2",
          time: 7,
          color: "#eab2bf",
        },
        {
          title: "3",
          time: 9,
          color: "#eab2e8",
        },
        {
          title: "4",
          time: 0,
          color: "#c2b2ea",
        },
        {
          title: "5",
          time: 2,
          color: "#b2c8ea",
        },
        {
          title: "6",
          time: 4,
          color: "#c7ebec",
        },
        {
          title: "7",
          time: 1,
          color: "#c7ecdd",
        },
        {
          title: "8",
          time: 2,
          color: "#ecd2a0",
        },
      ],
      logintitle: "未登录",
    };
  },
  methods: {},
  mounted() {},
};
</script>
<style scoped>
.flex-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100%;
}
.flex-box-item {
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 2px solid #ddd;
  cursor: pointer;
}
.box-title {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  color: #41b883;
}
.box-time{
  font-size: 25px;
  font-weight: 600;
  text-align: center;
  color: #41b883;
}
</style>

2.3.2 `flex-grow`属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。可以使用整数或小数声明

总结：

当都是0时不放大默认为0
当都是相同的数值且>1时等分占全部
当不同比列的时候且不为零公式：（整体宽度- 每块的固定宽度）/ 每块flex-grow的总和 * 没块的flex-grow + 每块的固定宽度

2.3.3 `flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

当这两块的flex - shrink 比例是 0 0时 A和B不改变

当这两块的flex - shrink 比例是 0 1时 A不变，B变成父宽度 - A宽度如下图：

当这两块的flex - shrink 比例是 3 2时

公式：

A缩小后的宽度 = A宽度 - （（A宽度 + B宽度 - 父宽度）* (（A宽度 * A的flexShrink）/ （A宽度 * A的flexShrink + B宽度 * B的flexShrink）) ）

带入公式 200 - （（200+300-400）* (（200 * 3）/ （200 * 3 + 300 * 2）) ） = 150

B缩小后的宽度 = B宽度 - （（A宽度 + B宽度 - 父宽度）* (（B宽度 * B的flexShrink）/ （A宽度 * A的flexShrink + B宽度 * B的flexShrink）) ）

带入公式 300 - （（200+300-400）* (（300 * 2 ）/ （200 * 3 + 300 * 2）) ） = 250

2.3.4 `flex-basis`属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。

可以是长度单位，也可以是百分比。flex-basis的优先级高于width、height属性。

优先级：flex-basis 优先级大于 width、height。

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

flex是flex-grow、flex-shrink 、flex-basis缩写组合。flex :1 0 100px

建议使用 flex 面不要单独使用 flex-grow / flew-shrink / flex-basis 。

2.3.6 `align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。

用于控制单个元素在交叉轴上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列。

 <div
      v-for="item in dataList"
      :key="item.id"
      :style="[{ background: item.color }, { alignSelf: item.alignSelf }]"
      class="flex-box-item"
    >
      <div class="box-time">alignSelf:{{ item.alignSelf }}</div>
    </div>