Vue项目 关于flex布局（详解）

Flet布局

语法（Flex 指定容器 —父元素）

首先我们需要一个总盒
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

<template>
  <div class="box">
    <div class="item"></div>
  </div>
</template>
<style scoped>
  .box{
    // 将box指定为Flex容器
    display: flex;
    // 行内元素当然也可以使用flex布局
    display: inline-flex;
    // Webkit 内核的浏览器，必须加上-webkit前缀。
    display: -webkit-flex;
  }
</style>

容器属性

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

flex-direction属性

<style scoped>
	// row（默认值）：主轴为水平方向，起点在左端   下图第三幅
	// row-reverse：主轴为水平方向，起点在右端    下图第四幅
	// column：主轴为垂直方向，起点在上沿         下图第二幅 
	// column-reverse：主轴为垂直方向，起点在下沿 下图第一幅
  .box {
    flex-direction: row | row-reverse | column | column-reverse;
  }
</style>

flex-wrap属性

<style scoped>
	// 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
	// nowrap（默认）：不换行           下图第一幅
	// wrap：换行，第一行在上方         下图第二幅 
	// wrap-reverse：换行，第一行在下方 下图第三幅
  .box {
    flex-wrap: nowrap | wrap | wrap-reverse;
  }
</style>

flex-flow属性

  .box {
   // flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
    flex-flow: <flex-direction> || <flex-wrap>;
  }

justify-content属性

  // justify-content属性定义了项目在主轴上的对齐方式
  .box {
    // flex-start（默认值）：左对齐
    // flex-end：右对齐
    // center： 居中
    // space-between：两端对齐，项目之间的间隔都相等
    // space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
    justify-content: flex-start | flex-end | center | space-between | space-around;
  }

align-items属性

  // align-items属性定义项目在交叉轴上如何对齐
  .box {
    // flex-start：交叉轴的起点对齐
    // flex-end：交叉轴的终点对齐
    // center：交叉轴的中点对齐
    // baseline: 项目的第一行文字的基线对齐
    // stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
    align-items: flex-start | flex-end | center | baseline | stretch;
  }

语法（Flex 指定项目 —子元素）

项目相关属性

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

flex属性

推荐优先使用这布局属性进行布局

.item {
  // 根据属性大小进行适应性布局
  flex: none | //  跟数值 例如1,2,3
}

order属性

  .item {
    // order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
    order: <integer>;
  }

flex-grow属性

  .item {
    // flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
    flex-grow: <number>; /* default 0 */
  }

flex-shrink属性

  .item {
    // flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    flex-shrink: <number>; /* default 1 */
  }

flex-basis属性

  .item {
  // flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
    flex-basis: <length> | auto; /* default auto */
  }

align-self属性

  .item {
    // align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }

Flex布局 一行显示固定个数,强制换行且均匀分布

布局需求

• 一行五个
• 满五个自动换行
• 宽度进行自适应

请自己动手看看效果吧 最好自己将item的div加上背景颜色

<template>
  <div class="box">
	  <div class="item"></div>
	  <div class="item"></div>
	  <div class="item"></div>
	  <div class="item"></div>
	  <div class="item"></div>
	  <div class="item"></div>
  </div>
</template> 

<style scoped>
  .box{ 
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .item{ 
    flex: 1;
    width: 25%;
    min-width: 25%; // 加入这两个后每个item的宽度就生效了
    max-width: 25%; // 加入这两个后每个item的宽度就生效了
  }
</style>

最后 附上 个人觉得关于Flex布局写的比较好的文章
Flex 布局教程：实例篇
Flex布局详解