移动端flex弹性布局容器常用属性

容器常用属性

下列属性用于设置容器，也就是父盒子

• flex-direction：设置主轴的方向，也就是项目横向排列还是纵向排列
• justify-content：设置主轴上的子元素的排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上子元素的排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了flex-directon 和 flex-wrap

1. flex-direction

在flex布局中，分为主轴和侧轴。
默认情况下，水平方形为主轴，水平向右，垂直方向为侧轴，垂直向下。

flex-direction属性可以改变默认的主轴设置

body {
    background-color: #ccc;
}

div {
    display:flex;
    /*设置容器的主轴为X轴，也就是行为主轴，此值为默认值*/
    flex-direction: row;
    width: 800px;
    height: 400px;
    background-color: #000;
}

span {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid black;
}

1.设置水平方向为主轴，项目从左向右排列

flex-direction:row;     //设置容器的主轴为x轴，此值为默认值。

2. 设置水平主轴反向
   反转主轴，设置水平方向为主轴，项目从右向左排列

flex-direction: row-reverse;

3.设置垂直方向为主轴，项目从上向下排列

flex-direction:column;     

4. 设置垂直主轴反向
   反转主轴，设置垂直方向为主轴，项目从下向上排列

flex-direction: column-reverse;

总结

• 主轴不是固定的
• 项目永远沿主轴排列，所以设置主轴为水平方向，项目1行排列；设置主轴为垂直方向，项目1列排

2. justify-content

设置主轴上项目的排列方式

使用此属性之前，要确定主轴是哪一个，主轴不一样，设置的值也不一样

• flex-start 默认值，从头部开始，如果主轴是x轴，则从左到右
• flex-end 从尾部开始排列，如果主轴是y轴，则从又到左
• center 在主轴居中对齐，如果主轴是x轴，则水平居中
• spance-around 评分剩余空间
• spance-between 先两边贴边，再评分剩余空间

2.1 x轴为主轴时

flex-start

body {
    background-color: #ccc;
}

div {
    display:flex;
    /*设置容器的主轴为X轴，也就是行为主轴，此值为默认值*/
    flex-direction: row;
    /* 设置项目从左到右排列 */
    justify-content: flex-start;
    width: 800px;
    height: 400px;
    background-color: #000;
}

span {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid black;
}

运行结果如下：

这与没设置 justify-content:flex-start 没有区别

修改 justiry-content 的值为 flex-end

flex-end

/* 设置项目从右到左排列 */
justify-content: flex-end;

注意：
这里仅仅是改变了项目的起始方向，并没有改变项目的排列顺序，而我们上面说的 flex-direction 的翻转会改变项目的排列顺序

将 justify-content 的值设置为 center，所有元素居中显示，两边编剧一致。
center居中

justify-content:center;

spance-around

justify-content:space-around;

问题：为什么明明是评分剩余空间，项目的中间距离，看起来是左侧两侧边距的2倍？

注意：

• 容器-所有项目宽度之和，就是主轴上剩余的空间，这里的平分是指项目之间的距离平分这些空间
• 如果设置项目的flex:1，而不是设置项目的固定宽度，那么无论 justify-content
  的值设置为什么，都没有效果，因为项目会自动占满整个容器宽度

space-between

justify-content:space-between;

2.2 y轴为主轴同上

y轴为主轴和轴为主轴类似。

3. flex-wrap

传统布局中，设置子盒子浮动后，如果1行占不下，会自动另起一行
但是在 flex 布局中，则不然。
发现，当1行站不下所有项目时，会自动缩小项目的宽度
如果不希望改变宽度，而是另起一行，只需要在容器中据加入如下设置即可

flex-wrap:wrap;

效果图如下：

默认的是 flex-wrap:nowrap; 缩小宽度，一行显示。

看上面的效果图，发现，两行之间的垂直间距很大，为什么呢？
扩展
如果 主轴是y轴，显示效果如下：

4. align-items

设置项目在侧轴上的排列方式
但是此属性适合项目为单行时

侧轴默认是Y轴，当然可以改变

• flex-start 默认值，从上到下
• flex-end 从下到上
• center 挤在一起居中
• stretch 拉伸

4.1 设置侧轴居中

在容器中加入align-items:center;
效果图如下：

4.2 设置主轴为y 轴

flex-direction:column;

效果图：

当然此属性的只也可以设置为其他几个

其他几个值都比较简单，稍微需要注意的是 stretch ，意思是拉伸，如果主轴是x轴，那么就会拉伸项目的高度与父元素一样高，但是项目不能设置固定高度，否则无效

5. align-content

设置侧轴上的子元素的排列方式

这与 align-items 相似，区别在于，此属性用来设置多行项目（也就是项目换行）时的排列方式，在单行项目下时没有效果的

• flex-start 默认值，在侧轴的头部开始排列
• flex-end 在侧轴的尾部开始排列
• center 在侧轴的中间显示
• space-around 子项在侧轴平分剩余空间
• space=between 子项在侧轴先分布在两头，再平分剩余空间
• stretch 设置子项元素高度平分父元素

**align-items 和 align-content 对比

• align-items 适用于单行情况下，只有上对齐，下对齐，居中和拉伸

• align-content 适用于多行，单行下无效，可以设置对上对齐、下对齐、居中、拉伸一级平分剩余空间等

6. flex-flow

flex-direction 和 flex-wrap 的复合属性

flex-flow: column nowrap;