flex简单教程

基本概念

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

默认地，父容器主轴是X轴从左向右，侧轴为y轴由上下向。

同样的叫法：行和列

英文：row 和 column

父容器属性

flex-direction:设置主轴方向

justify-content:设置主轴上的子元素排列方向

flex-warp:设置子元素是否换行

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

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

flex-flow:复合属性，相当于同时设置了 flex-direction & flex-wrap

flex-direction

主轴和侧轴是会变的，就看flex-direction 设置谁为主轴，剩下的就是主轴

而我们的元素是跟着主轴来排列的

属性值

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

感觉非常像Android中的LinearLayout，不过andorid中的功能没有这么强大，只有竖向排列和横向排列，没有反转

Andorid中叫oritation,而flex中叫flex-direction

justify-content

设置主轴上的子元素排列方向,使用此属性时，先确定现在谁是主轴

感觉这个设计不太好，不像Android中的RelativeLayout，子组件往哪儿跑可以让子组件自己来定义，是不是子组件也可以自己设置呢？现在还不知道。不过现在我们看，这个设计不太好

属性值	说明
flex-start	默认值从头部开始，如果主轴是x，则从左到右（ABCD )
flex-end	从尾开始排列 ( ABCD)
center	在主轴居中对齐（如主轴是x，则居中对齐）（ ABCD )
space-around	平分剩余空间（ A B C D ）
space-between	先两边贴边，再平分剩余空间（重要）(A B C D)

像下边的形式

形式1
-----------------
组件   组件    组件

形式2
--------------------
组件 组件 组件 组件 组件

flex-warp

在div默认的情况下，子元素过多，子元素会跑到第二行，再显示。但是：

flex容器有一个问题，如果子元素过多，会压缩我们的子元素，强制让其在主轴上显示，如果过多，可能全都变成了一条线，如下：

我们要显示这样的

我们的空间是这么大

( )

我们想要放下26个字母，flex容器默认会强力压缩我们的空间，变成了这样

(|||||)

如果想要让其像div一样自动换行，就需要用到flex-wrap

(ABCDE

FGHIJK
LMNO
P…YZ)

.box{
  display:flex;
    flex-direction:row;//默认
  flex-warp:wrap;//自动换行(no-warp:默认)
}

align-items

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

我们上边通过 justify-content 实现了水平，或者垂直居中，如果想要水平/垂直居中，怎么来做呢？下边的属性值是以x为主轴，y为侧轴说明的。

属性值	说明
flex-start	从左到右
flex-end	从下到上
center	挤在一起（垂直居中）
stretch	拉伸（默认）

所以前边说的垂直水平居中，我们就有想法了

如果当前主轴是x轴（默认），我们通过justify-content设置水平居中，我们再设置侧轴居中，那就是垂直居中了。这样就达到了垂直水平居中的效果。

.box{
  display:flex;
  justify-content:center;
  align-items:center;
}
/** 上面的代码：先让主轴居中，再让侧轴居中，就实现了水平垂直居中效果 */

stretch 不给侧轴方向的尺寸话，会填满侧轴的方向

align-content

上边我们说的的align-item，是单行，如果是多个，有换行的情况下，就需要使用此属性

比如九宫格

单行无效，即添加了flex-warp:wrap;的情况下才有效。

属性值	说明
flex-start	默认值从头部开始，如果主轴是x，则从左到右（ABCD )
flex-end	从尾开始排列 ( ABCD)
center	在主轴居中对齐（如主轴是x，则居中对齐）（ ABCD )
space-around	平分剩余空间（ A B C D ）
space-between	先两边贴边，再平分剩余空间（重要）(A B C D)
stretch	设置子项元素高度平分父元素高度

总结!!!

单行，多行用flex-warp,默认是单行。

侧轴位置（居中，居尾），单行找align-items，多行找align-content

flex-flow

它是flex-direction和flex-warp属性的复合属性

.box{
    display:flex;
  /*
  flex-direction:column;
  flex-wrap:warp;
  可以合写成下面的形式
  */
  flex-flow:column warp;
}

子项常用属性

flex：定义子项目占的份数

align-self:控制子项自己在侧轴的排列方式（可以脱离父容器的排列限制，自己控制）

order:定义子项的排列顺序（前后顺序）

flex

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

例1:

我们app里，头部的搜索栏，如下

---------------------------------
菜单(         输入商品         )搜索
---------------------------------

上面展示了我们常用的一种头部的布局，在ios或者android中我们也很好实现，但是在flex中，我们也非常简单，如下：

<section>
    <div>菜单</div>
  <div>输入商品</div>
  <div>搜索</div>
<section>
<style>
section{
    display:flex;
  width:100%;
  height:50px;
  background-color:#ffffff;
  margin:0 auto;
}
  section div:nth-child(1){
    width:50px;
    height:100%;
       background-color:red;
  }
  section div:nth-child(2){
    flex:1;/** 剩余空间份数 */
    width:50px;
    height:100%;
       background-color:green;
  }
  section div:nth-child(3){
    width:50px;
    height:100%;
       background-color:red;
  }

</style>

例2:

等分，我们之前用的是百分比，我们也可以使用子元素的flex等分来做，如下图

(ABC)

上代码：

<p>
    <span>1</span>
  <span>2</span>
  <span>3</span>
</p>
<style>
  p{
    display:flex;
    width:100%;
    height:50px;
    background-color:#ffffff;
    margin:0 auto;
  }
  p span{
    flex:1;
  }
  /**
  这样太简单了吧，只需要让子元素的flex为1，就能让子元素均分
  类似于android LinerLayout中子元素设置layout-weight属性。
  */
  /**
  如果我们想要让某个子元素大一些，我们只需要把份数增加即可
  p span:nth-child(2){
    flex:2;
  }
  这样的话，中间的就会显示为2 份，边上占1份。
  */

</style>

align-self

让某个子元素，在侧轴上单独定义位置，脱离组织

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

order

设置子元素本身的顺序

div span:nth-child(3){
    order:-1;/** 往前跑了一个位置,默认是0*/
}