移动web开发（二）flex弹性布局

移动端web开发（二）flex弹性布局

一、flex弹性布局

原理

为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。采用flex布局的元素，成为flex容器，简称容器。他所有的子元素都自动成为容器成员，成为flex项目，简称项目

• 当我们为父盒子设置flex布局以后，子元素的float、clear和vertial-align属性将失效
• 伸缩布局 = 弹性布局 = flex布局

注意：是给父元素添加flex属性

 

二、 常见父项属性

• flex-direction：设置主轴方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上子元素的排列方式（多行）
• align-items：设置侧轴上子元素的排列方式（单行）
• flex-flow：符合属性，相当于设置了flex-direction和flex-wrap

 

1、flex-direction 设置主轴方向

• 默认主轴方向就是x轴方向，水平向右
• 默认侧轴方向就是y轴方向，水平向下

 

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

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

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

 

2.1 子元素垂直居中的方法

注意：写在父元素上

flex-direction:column; //主轴设为y轴
justify-content:center;

 

3、 flex-wrap 设置子元素是否换行（重要）

默认情况，项目都排在一条线上（轴线）。flex布局默认是不换行的

注意：如果一行装不开，则会压缩子元素的大小

 

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

该属性控制子项在**侧轴（默认y轴）**上的排列方式，在子项为单项时使用，多行时实现不了

实例：实现盒子水平垂直居中

/*默认主轴为x轴*/
justify-content:center;
/*侧轴居中*/
align-items:center;

 

5、 alilgn-content 设置侧轴上的子元素排列方式（多行）

设置子项在侧轴的排列方式，且只能用于子项出现换行的情况（多行)，在单行下是没有效果的，比单行多了space-between和space-around的情况

 

6、align-content 和 align-items区别

• align-items 用于单行，只有上对齐，下对齐，居中和拉伸
• align-content 用于换行（多行），可设置上对齐，下对齐，居中、拉伸以及平均分配剩余空间等

 

7、flex-flow 复合属性

flex-flow：row wrap;

 

三、 flex布局子项常见属性

• flex属性定义子项目占的份数
• align-self 控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序（前后顺序）

 

1、flex属性（重要）

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

.item {
	flex:<number>; /*默认为0*/
}

注意：是分配剩余空间

例子：

section div:nth-child(1) {
    width: 100px;
    height: 150px;
    background-color: red;
}

section div:nth-child(2) {
    flex: 1;
    background-color: green;
}

section div:nth-child(3) {
    width: 100px;
    height: 150px;
    background-color: blue;
}

 

2、align-self 控制子项自己在侧轴的排列方式

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

span:nth-child(2) {
	align-self:flex-end;
}

 

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

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