05 移动端网页开发---flex弹性布局

目录

一、布局原理

二、常见父项属性

2.1flex-direction设置主轴的方向

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

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

2.4 flex-wrap 设置子元素换行

2.5 flex-flow

三、flex布局子项常见属性

3.1 flex属性

3.2 align-self控制子项自己在侧轴上的排列顺序

3.3 order属性定义项目的排列顺序

---

• pc端用传统布局

• 移动端或者不考虑兼容性问题的pc端页面，使用flex弹性布局

一、布局原理

flex是flexible Box的缩写，意味“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局

• 当为父盒子设置为flex布局以后，子元素的float，clear，vertical-align属性将失效

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

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

• div相当于容器

• span相当于子容器/flex项目

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

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

二、常见父项属性

2.1flex-direction设置主轴的方向

flex布局中，分为主轴和侧轴，或行和列，x轴和y轴

• 默认主轴方向为x轴方向

• 默认侧轴方向为y轴方向

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

主轴和侧轴会变化，取决于flex-direction设置谁为主轴

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

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

justify-content属性定义了项目在主轴上的对齐方式

属性值	说明
flex-start	默认值，贴着头开始
flex-end	贴着尾部开始排列
center	让子元素居中对齐
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间

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

属性值	说明
flex-start	默认值 从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（在子盒子没有高度时，沿着侧轴拉伸到和父盒子一样高）

2.4 flex-wrap 设置子元素换行

当父盒子一行不足以装子盒子此时会改变子盒子宽度，使其一行显示

flex布局中默认子元素不换行

属性值	说明
no-wrap	不换行
wrap	换行，在不改变子盒子之间的距离和盒子大小的前提下父盒子一行装不下时换行

2.5 flex-flow

flex-flow是flex-direction和flex-wrap和写的方式

    1
    2
    3

三、flex布局子项常见属性

3.1 flex属性

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

.item {
    /*默认为0，flex后天数字*/
    flex:;
    /*每个孩子分三份*/
    flex:3;
}

案例：将父盒子平均分三等分，三个孩子各分一份  

3.2 align-self控制子项自己在侧轴上的排列顺序

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认为auto，表示继承父元素align-items属性，没有父元素就等同于stretch

span:nth-child(3){
    /*设置自己在侧轴上的排列方式,控制第3个子盒子在侧轴上从下到上排列*/
    align-self:flex-end;
}

3.3 order属性定义项目的排列顺序

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

注意：和z-index不一样

例如，让第2个盒子跑到第一个前面,第一个盒子为0，让第二个盒子提到前面必须比0小，设置为-1

span:nth-child(2){
	order:-1;
}