好用的Flex 与 Grid

Flex篇

FLex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可指定为flex布局，无论是块级元素还是内联元素。

	.box{
		display :flex;	// 块级元素
		display :inline-flex;	// 行内元素
		display : -webkit-flex;		//webkit内核浏览器需要加上 -webkit前缀
	}

在设置完flex布局后，子元素的float、clear 和 vertical-align 均将无效

容器的属性

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

1.flex - direction属性
此属性决定主轴方向 (即 项目排列方向)

	.box {
	  flex-direction: row | row-reverse | column | column-reverse;
	  /* 自下而上、  自上而下 、 自左而右 、 自右而左 */
	}

2.flex-wrap
此属性决定：如果一条轴线排列不下，该如何换行？

	.box{
		flex-wrap: nowrap | wrap | wrap-reverse
		/* 不换行 、 换行（多余的项目在下方展示）、换行（多余的项目在上方展示） */
		/* 不换行的结果就是，每个item的宽度都会被压缩，使得他们能够在一行内摆下 */
	}

3.flex-flow
此属性是flex-direction属性和flex-wrap属性的简写模式。默认值是row nowrap

	.box {
	  flex-flow: <flex-direction> || <flex-wrap>;
	}

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

	.box {
	  justify-content: flex-start | flex-end | center | space-between | space-around;
	}

5.align-items
此属性定义项目在交叉轴上的对齐方式

	.box {
	  align-items: flex-start | flex-end | center | baseline | stretch;
	  /* 交叉轴方向 （竖直）： 自上而下排列  、 自下而上排列 、 竖直居中 、  以项目的第一行文字的基线 为基准来 对齐 、如果项目未设置高度或设为auto，将占满整个容器的高度( 默认值 )*/
	}

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

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-grow属性
此属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

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

	.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

下面是完全代码，喜欢的朋友可以直接cv预览：

<template>
  <div class="flexiblecontainer">
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
  </div>
</template>
<script>
export default {
  name: "flexible",
  data () {
    return {};
  },
  methods: {
    setDate () {
      var x = 0;
      var y = 0;
      function add (n) {
        n = n + 1;
        return n;
      }
      y = add(x);
      console.log(y);
    }
  },
  mounted () {
    // this.setDate();
  }
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.flexiblecontainer {
  width: 500px;
  height: 640px;
  background: orange;

  display: flex;
  // 0.为弹性和父元素设置
  // display: flex 开启块级元素弹性盒布局
  // display: inline-flex 开启行内元素级元素弹性盒布局
  // baseline 按照水平基线排列

  flex-direction: row; //  改变 main axis 的走向为 横向排列 (自左向右) 默认值
  // 1. flex-direction 用于改变 main axis 的走向
  // flex-direction: row-reverse; 改变 main axis 的走向为 (自右向左)
  // flex-direction: column; 改变 main axis 的走向 为自上而下
  // flex-direction: column-reverse; 改变main axis的走向为自下而上

  justify-content: space-evenly;
  //  2.justify-content: 决定flex item 的主轴对齐方式
  // space-between: 首个item与末个item 紧贴父级元素展示,中间的空隙平均分布,且只有中间含有空隙
  // space-around: 首个item与末个item 会与父级元素产生空隙,但两边空隙的宽度 为 中间空隙宽度的1/2
  // space-evenly: 所有items 之间的空隙平均分配

  align-items: center;
  //  3.align-items: 决定align-items 的 交叉轴对齐方式
  //  align-items: flex-start
  //  align-items: flex-end

  flex-wrap: wrap; // 一行排列不下则换行
  // 4.flex-wrap 控制items 在main axis 上的排列 是否换行(默认情况下,全部在一行显示)
  // flex-wrap: nowrap; // 一行排列不下,挤压items的宽度让其在一行之内展示(默认情况)
  // flex-wrap: wrap-reverse; // 倒置交叉轴进行排列,用的非常非常少几乎不用,知道即可

  // 5.flex-flow: <flex-direction> | <flex-wrap> flex-flow 是 flex-direction 与 flex-wrap 的缩写
  flex-flow: row wrap; //将主轴设置为 反向横向排列 排列不下时则换行排列

  align-content: flex-start; //   交叉轴上 自上而下排列
  // 6.align-content 用于在多行的情况下 flex-items 在 交叉轴上(cross axis)的 排列方式,
  // 用法与justify-content 类似
  // align-content: space-evenly; //  交叉轴上 空隙 等分排列
  // align-content: space-around; //  交叉轴上 空隙 环绕排列
  // align-content: space-between; //  交叉轴上 空隙 在中间排列
  // align-content: flex-end; //     交叉轴上 自下而上排列

  .item {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    // 以下会列举一些 flex-items 上的属性
    // 1. order
    // 可以设置任意整数(正负数与0),值越小越靠前 默认为0
    // 2. align-self
    // 用于覆盖align-items 设置的交叉轴排列方式 可选值为:flex-start flex-end center stretch(拉伸) baseline(基线对齐)
    // 3.flex-grow
    // 控制 item 在 main axis 上的拉伸度, 可选值为 number值(支持小数), 当所有flex-item的值大于1的时候
    // 每个所分得的宽度就为  该item的flex-grow值  / 所有flex-grow的总和
    // 如果 该值 小于1,那么所有的空隙大小就是1,这就意味着,flex-items的项, 无法将空隙分完.
    // 所分得的的大小 是 flex-grow的值 乘以 剩余的空间大小
    // EG: flex-grow: 0.2  剩余大小为200px  那么分的的宽度则为 0.2*200 =>40px
  }
  .item1 {
    background: red;
    flex-grow: 1;
  }
  .item2 {
    background: blue;
    order: 1;
  }
  .item3 {
    background: green;
    order: 5;
  }
  .item4 {
    background: brown;
    order: 3;
  }
  .item5 {
    background: purple;
    order: 3;
  }
  .item6 {
    background: springgreen;
    order: 10;
  }
}
</style>

下面的部分是 转载 阮一峰老师的 教程。
很棒 推荐！
FLex 布局教程