Flex布局基础和案例演练剖析

一. 简介

1. 移动端常见布局

(1). 移动端单独制作

　A. 流式布局（百分比布局）

　B. flex 弹性布局（强烈推荐）

　C. less+rem+媒体查询布局

　D. 混合布局

(2). 响应式

　A. 媒体查询

　B. bootstarp

PS. 流式布局：就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。

2. Flex布局原理

　(1). flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

　(2). 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

　(3). flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局

　(4). 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3. 对比与选型

(1). 传统布局

　兼容性好

　布局繁琐

　局限性，不能再移动端很好的布局

(2). flex布局

　操作方便，布局极其简单，移动端使用比较广泛

　pc端浏览器支持情况比较差

　IE11或更低版本不支持flex或仅支持部分

(3). 如何选择？ 

　如果是pc端页面布局，还是采用传统方式

　如果是移动端或者是不考虑兼容的pc则采用flex

 

二. 各种用法

准备：

　　默认情况下，span为块级元素，设置高度、宽度都无效。

Html

     <div class="myDiv0">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>

View Code