flex布局

能够说出flex盒子的布局原理

能够使用flex布局的常用属性

能够独立完成携程移动端首页案例

Flex布局体验：

传统布局：

兼容性好

布局繁琐

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

Flex弹性布局：

操作方便，布局极为简单，移动端应用很广泛

PC端浏览器支持情况较差

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

初体验：

1 搭建HTML结构

<div>

<span>1</span>

<span>2</span>

<span>3</span>

</div>

Flex布局原理:

Flex时flexible box的缩写，意为“弹性布局”，用来为盒状模型提高最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设为flex布局之后，子元素的float、clear、vertical-align属性将失效。

• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。

• 体验中div就是flex父容器

• Span就是子容器 flex项目

• 子容器可以横向排列也可以纵向排列

总结flex布局原理：

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

Flex布局父项常见属性：

以下有6个属性是对父元素设置的：

• Flex-direction:设置主轴的方向

• Justify-content：设置主轴上的子元素排列方式

• Flex-wrap：设置子元素是否换行

• Align-content：设置侧轴上的子元素的排列方式（多行）

• Align-items：设置侧轴上的子元素排列方式（单行）

• Flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

Flex-direction：设置主轴的方向：

1 主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x和y

默认主轴方向就是x轴方向，水平向右

默认侧轴方向就是y轴方向，水平向下

2 属性值

Flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的。

属性值	说明
Row	默认值从左到右
Row-reverse	从右到左
Column	从上到下
Column-reverse	从下到上

3 justify-content设置主轴上的子元素排列方式

它定义了项目在主轴上的对齐方式。

注意：使用这个属性之前一定要确定好主轴是哪个

属性值	说明
Flex-start	默认值从头部开始 如果主轴是x轴，则从左到右
Flex-end	从尾部开始排列
Center	在主轴居中对齐（如果主轴是x轴则水平居中）
Space-around	平分剩余空间
Space-between	先两边贴边 再平分剩余空间（重要）

Flex-wrap设置子元素是否换行：

默认情况下，项目都排在一条线（又称“轴线”）上，flex-wrap属性定义，flex布局中默认是不换行的。如果装不开，就缩小子元素的宽度，放到父元素里面。

属性值	说明
Nowrap	默认值，不换行
Wrap	换行

Align-items设置侧轴上的子元素排列方式（单行）：

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项的时候使用

属性值	说明
Flex-start	从上到下
Flex-end	从下到上
Center	挤在一起居中（垂直居中）
Stretch	拉伸（默认值）

Align-content设置侧轴上的子元素的排列方式（多行）：

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

属性值	说明
Flex-start	默认值在侧轴的头部开始排列
Flex-end	在侧轴的尾部开始排列
Center	在侧轴中间显示
Space-around	子项在侧轴平分剩余空间
Space-between	子项在侧轴先分布在两头，再平分剩余空间
Stretch	设置子项元素高度平分父元素高度

Flex-flow属性是flex-direction和flex-wrap属性的复合属性：

Flex-flow：row wrap；

• Flex-direction:设置主轴的方向

• Justify-content：设置主轴上的子元素排列方式

• Flex-wrap:设置子元素是否换行

• Align-content：设置侧轴上的子元素的排列方式（多行）

• Align-items:设置侧轴上的子元素排列方式（单行）

• Flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

Flex布局子项常见属性：

Flex属性：flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item{

Flex:<number>;/*default0 */

}

Flex子项目占的份数

Align-self控制子项目自己在侧轴的排列方式:

Align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于strech

Span：nth-child（2）{

设置自己在侧轴上的排列方式

Align-self：flex-end；

}

Order属性定义子项的排列顺序（前后顺序）：

数值越小，排列越靠前，默认为0

注意：和z-index不一样。

携程网首页案例制作：

访问地址：m.ctrip.com

1. 技术选型

方案：我们采取单独制作移动页面方案

技术：布局采取flex布局

2. 搭建相关文件夹结构

3. 设置视口标签引入初始化样式

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/index.css">

4 常见flex布局思路

（用flex布局这种上下的结构）

5 背景线性渐变颜色

背景渐变必须添加浏览器私有前缀

起始方向可以是：方位名词或者度数，如果省略默认就是top

Background:-webkit-linear-gradient(left,red,blue);