【flex布局快速上手】快速理解flex布局用法，通过常见的四个布局案例解释【详细注释，一看就会】

前言

很多小伙伴做项目布局的时候还是会用老方法，定位，margin，浮动等，这样虽然也可以完成项目布局，但是还是有点繁琐了，但是看了网上的帖子，flex布局用的其实没有特别熟悉。
我也看了很多帖子，但是基本都是把阮一峰的帖子复制出来发的，或者类似的，只有熟悉的文档功能介绍，但是没有其他案例配合，有时候看的不是很理解。
这里呢，我就通过四个小案例，来主要解释一下我们常用的几个flex属性，熟悉了这一些，基本就够用了，并能够立即上手写。

效果图

像这样，四个小案例，并在代码内附上详细注释解释做法，看完了你就一定会使用了。
在这里插入图片描述

flex_10">flex属性介绍

如果需要配合图片看详细的，可以去阮一峰的flex教程看
链接在这：阮一峰flex教程

【X轴：justify-content】
常用：
justify-content: center; /* 居中排列 /
justify-content: start; / 从左开始排列 /
justify-content: end; / 从右开始排列 /
justify-content: space-between; / 左边和右边的元素靠边，然后中间的自动分配
justify-content: space-around; /均匀排列每个元素，平分

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

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

【换行：flex-wrap】
常用：
nowrap：不换行
wrap：换行
wrap-reverse：换行，但是第一行在下面

【方向换行集合：flex-flow】
是flex-direction属性和flex-wrap属性的简写形式
格式：默认值为row nowrap。

【多轴：align-content】
前提条件：设置方向和换行才生效。多行就是多个div
属性：
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

代码部分

<template>
  <div>
    <p>用户名片布局</p>
    <div class="user">
      <div class="userLeft">
        <img
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          alt=""
          style="width: 50px; height: 50px; margin-right: 10px"
        />
        <span>用户名</span>
      </div>
      <div class="guanzhu">+ 关注</div>
    </div>
    <p>分类列表布局</p>
    <div class="fenlei">
      <div class="list">
        <img
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          alt=""
          style="width: 50px; height: 50px"
        />
        <div>模拟分类</div>
      </div>
      <div class="list">
        <img
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          alt=""
          style="width: 50px; height: 50px"
        />
        <div>模拟分类</div>
      </div>
      <div class="list">
        <img
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          alt=""
          style="width: 50px; height: 50px"
        />
        <div>模拟分类</div>
      </div>
      <div class="list">
        <img
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          alt=""
          style="width: 50px; height: 50px"
        />
        <div>模拟分类</div>
      </div>
    </div>
    <p>搜索框布局</p>
    <div class="search">
      <input
        type="text"
        style="height: 30px; width: 70%"
        placeholder="搜索框"
      />
      <div style="width: 25px; height: 25px; border: 1px solid #ccc"></div>
      <div style="width: 25px; height: 25px; border: 1px solid #ccc"></div>
    </div>
    <p>信息多一点的用户名片布局</p>
    <div class="userBottom">
      <div class="userBottomLeft">
        <img
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          alt=""
          style="
            width: 80px;
            height: 80px;
            border-radius: 50%;
          "
        />
      </div>
      <div class="userBottomCenter">
        <div style="font-size: 18px; font-weight: bold">某某某著名工作室</div>
        <div style="font-size: 14px;">研发部 技术总监</div>
        <div style="font-size: 14px;">江苏某某某有限公司</div>
      </div>
      <div class="guanzhu2">+ 关注</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
p {
  font-size: 14px;
  background-color: #ccc;
}
/* 用户名片布局 */
/*
 理解：通过给父盒子加display：flex让他变成弹性盒子，然后给父盒子加两个轴的排列方式。
 其中justify-content代表X轴，也就是横向排列方式，space-between代表左右元素贴边，中间如果有元素就自动分配剩余位置
 align-items代表Y轴，也就是竖向排列方法，center就是居中。所以我们只需要用这个属性就可以让盒子内的元素直接垂直居中了。
 这里有很重要的一点要记住，不熟悉flex的人总容易理解错，这个flex盒子内的两个轴属性只作用于子级盒子。不作用于更下面的元素。
 简单说，就是我这里user盒子的flex属性。只作用于userLeft和关注这两个直接子级的盒子，他们里面的图片文字等都是不生效的。
 因为很多不熟悉的人在父盒子写了这个属性以为是里面所有级别的元素都会生效，并不是，只会影响到子级。那么如果你想要子级内的元素也居中或者其他排列方法怎么做呢
 很简单，给你的子级盒子再加一个display：flex，然后设置align-items或者justify-content属性来排列就可以了。参考我userLeft写法
*/
.user {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.userLeft {
  display: flex;
  align-items: center;
}
.guanzhu {
  width: 70px;
  height: 25px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
  border-radius: 10px;
  background-color: orange;
  color: #fff;
  font-weight: bold;
}

/* 分类列表布局 */
/* 
理解：这里首先我还是给父盒子来了一个横向排列方式，因为是分类列表，所以四个模块应该是平分空间的，而不是两边贴边，中间很大的。
space-around就代表了平分空间的意思。
同时，这时候会发现你的子级排列好了，但是子级内的图片和文字并没有对齐。都是左靠齐的。这样不好看，通过上面的案例大家知道了，父盒子上的flex属性只能作用于直接子级。
所以我们需要在图片和文字的父盒子上再来一个flex属性，这里注意点是，display：flex是默认会横向排列的，但是这里我们需要竖着显示，所以我们要用到flex-direction属性
这个属性的意思就是弹性盒子的布局方向，row代表横着排列，column代表竖着排列。我们竖着排列后通过align-items让竖着的元素居中对齐，就达到了图片和文字都居中的效果。
*/
.fenlei {
  display: flex;
  justify-content: space-around;
}
.list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 搜索布局 */
/* 
功能简介：这种情况是有时候移动端会出现的，顶部有一个搜索框，搜索框的右边还会放两个图片或者图标按钮，点击会出现比如最新消息，联系客服，设置等按钮，所以这时候用这个flex布局也可以轻松的布局出来
理解：这里因为父盒子内的元素都是直接子级，所以直接在父盒子上排列就搞定了，很简单。
这种方法通过space-around让元素平分空间，然后这时候我们再把搜索框宽度调成百分比的，这样就可以让他们成为自适应的效果。
align-items: center;让元素垂直居中。
*/
.search {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* 信息多的名片布局 */
/* 
理解：这里首先父盒子用space-around让三个子盒子平分空间，然后中间写很多字的盒子设置flex，因为设置了flex默认横向排列，所以通过flex-direction: column属性我们给他方向改为竖向
然后通过justify-content: space-around属性把三行文字平分空间，就完成了布局。

这里重点解释一下：
可能到这里有些朋友没搞懂，明明前面说了justify-content是X轴的排列，为什么我竖着的应该是Y轴，但是却用justify-content来平分呢。不是align-items才是管Y轴的吗。
这里大家可以理解为，当你方向改变成竖向的后，其实是整个盒子都转了一下，而轴也跟着转了，可以理解为，原本横着是X轴，竖着是Y轴，但是你把盒子转了一下，那横着的其实是Y轴，竖着的才是X轴。
所以能明白为什么我方向是竖着的，但是用的确实X轴的属性了吗。
*/
.userBottom {
  display: flex;
  justify-content: space-around;
}
.userBottomCenter {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.guanzhu2 {
  width: 60px;
  height: 20px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  border-radius: 10px;
  background-color: orange;
  color: #fff;
  font-weight: bold;
  margin-top: 5px;
}
</style>

flex_248">2022-8-2 更新：flex翻转和对齐方式

利用翻转和对齐方式完成微信聊天样式

效果图
在这里插入图片描述

代码部分

html

    <div class="content_box" :style="{ height: contentHeight }">
      <div class="timer">2022-08-02 11:08:07</div>
      <div class="userbox2">
        <div class="nameInfo2">
          <div style="font-size: 14px">查水表</div>
          <div class="contentText2">123456789123456789123456789123456789</div>
        </div>
        <div class="imgPosition">
          <van-image
            round
            width="50px"
            height="50px"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
      </div>
      <div class="userbox">
        <div class="nameInfo">
          <div style="font-size: 14px">查水表</div>
          <div class="contentText">123456789123456789123456789123456789</div>
        </div>
        <div class="imgPosition">
          <van-image
            round
            width="50px"
            height="50px"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
      </div>
    </div>

CSS

/* 发送的信息样式 */
/* 
右边消息思路解释：首先大盒子userbox内放两个盒子，一个放头像，一个放用户名和发送的内容，我们先用flex让他横向排列。
然后把写文字的大盒子设置flex：1。这个属性的意思就是让这个元素撑满父盒子剩余位置。然后我们再把文字盒子设置flex，并把他对齐方式设置为尾部对齐就完成了基本的结构，然后微调一下就可以了
*/
.userbox {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}
.nameInfo {
  /* 用flex：1把盒子撑开 */
  flex: 1;
  margin-right: 10px;
  /* 用align-items把元素靠右对齐 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.contentText {
  background-color: #9eea6a;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 61%;
  padding: 5px 10px;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  margin-top: 3px;
  font-size: 14px;
}


/* 接收的信息样式 */
/* 
左边消息思路解释：跟上面一样，就是换一下位置，首先通过把最外层大盒子的排列方式通过flex-direction: row-reverse;属性翻转，也就是头像和文字盒子换位置
然后删除掉尾部对齐方式，因为不写这个默认是左对齐的。我们写的左边就没必要再写了。
*/
.userbox2 {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 15px;
}
.nameInfo2 {
  /* 用flex：1把盒子撑开 */
  flex: 1;
  margin-left: 10px;
}
.contentText2 {
  background-color: #9eea6a;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 61%;
  padding: 5px 10px;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  margin-top: 3px;
  font-size: 14px;
}