前端学习笔记二.布局方式的选择与Flex布局示例

前言：

2022年了不用考虑其他布局了。就在Flex和Grid里选，考虑到Grid的兼容性问题，固然比Flex更强大但应该是未来的主流，目前还是先会用Flex性价比比较高。

Flex教程：阮一峰：Flex 布局教程

Grid教程：CSS Grid 网格布局教程 - 阮一峰的网络日志

一.Flex布局的含义和开启方法以及关于-webkit-flex的说明

Flex布局的容器中有两个轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

可以通过属性的设置使得容器中的内容沿着水平或垂直的轴按照需求响应式排列。

Flex的开启方法：

.box{
  display: -webkit-flex; /* Webkit 内核的浏览器，必须加上-webkit前缀。 */
  display: flex;
}

需要特别说明的是，webkit之类的浏览器前缀，只有在直接打开的html页面中才需要加上。

如果你的项目是打包后（webpack等）发布的，或者你使用框架开发发布（vue等），则不需要手动加上浏览器前缀。你可以仅保留 

display: flex;

这是因为打包工具的Autoprefixer特性。

Autoprefixer是一个后处理程序，它适用于普通的CSS而不使用特定的语法。它在CSS编译后运行。会自动为你的css添加必要的浏览器前缀。

二.Flex布局示例。

参考博客：CSS学习笔记（12）--Flex 布局教程：实例篇