移动端常见布局

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

目录

一、移动端常见布局

二、每日面试题

---

一、移动端常见布局

前面说了移动端有两种布局方式，一种是单独制作移动端页面，一种是响应式兼容PC移动端，下面就详细介绍下主流的单独制作移动端页面。

单独制作移动端页面（主流）：

在这之前，简单说一下流式布局，也称非固定像素布局，较常见，通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，内容向两侧填充，
max-width：最大不超过多少，min-width：最小不超过多少。

flex弹性布局

操作方便，布局极简；移动端应用广泛，PC端支持较差

布局原理：

• 为盒模型提供最大的灵活性，任何容器都可以指定为flex布局
• 就是通过给父盒子添加flex属性，控制子盒子的位置和排列方式
• 当为父盒子设为flex后，子元素的float、clear、vertical-align属性将失效
• 伸缩布局=弹性布局=弹性盒布局=伸缩盒布局=flex布局
• 采用flex布局的元素成为flex容器，它的子元素自动成为容器成员，称为flex项目
• 要先设置display：flex

看一下都有什么属性：

父项常见属性：
一、flex-dirction：设置主轴的方向：默认为x轴，侧轴就是y轴，元素是根据主轴排列的

 div {
   
            /*  */
            display: flex;
            /* 设置主轴从上到下 */