前端必须熟悉的几种布局方式.docx

? ? 前端必须熟悉的几种布局方式 ? ? 【摘要】 前端必须熟悉的几种布局方式 前言 最近在准备整理基础，准备跳槽，找个好一点的东家。? 记录学习整理的过程，希望能帮到年后跳槽的你，让我们一起来巩固基础吧。目前在一家国企单位，朝九晚五的生活让我感到舒适，有大量的时间，做自己喜欢的事。时间久了，我感到了焦虑，由于公司是非互联网，开发也是根据自己已知技术去开发，技术成长很慢，技术氛围没那么强，想突破一下自己， 是该逃离舒适区了。本章主要是回顾Flex使用 和 一些常用布局的写法。 熟悉HTML页面架构和常用布局 Flex Flex 概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称项目。 注意： 任何一个容器都可以指定为 Flex 行内元素也可以指定为 Flex 布局， display: inline-flex; Webkit 内核的浏览器，必须加上-webkit前缀。 display: -webkit-flex; / Safari / 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross st