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

最新推荐文章于 2024-05-23 23:33:04 发布

雨天雨雨

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量278

点赞数 2

文章标签：前端学习 html css3 浏览器前缀

本文链接：https://blog.csdn.net/ytyy1/article/details/126440434

版权

前言：

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

一.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布局示例。

关注