css——flex布局

flex布局

主要运用再移动端

PC端常用传统布局

自适应效果好

flex布局意为：弹性布局，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当我们为父盒子设置flex布局后，子元素的float，clear，vertical-align属性将失效，可以实现元素垂直居中

1、布局原理

2

 2.主轴方向：取决于flex-direction属性的设置

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

/* 默认的主轴是X轴 也就是行 row  这时y轴就是侧轴*/

      /* flex-direction: row; */

      /* 简单了解 翻转 */

      /* flex-direction: row-reverse; */

      /* 也可以把主轴设置为y轴，x轴就成了侧轴 */

flex-direction: column;

3、justify-content属性  justify-content: space-between;

      /* justify-content: 是设置主轴上子元素的排列方式; */

      /* 所以要先确定主轴  这里不设置flex-direction属性 主轴默认是x轴*/

      /* justify-content: flex-start;默认从从左到右 */

      /* 让子元素贴到右边，但是顺序不变 */

      /* justify-content: end; */

      /* 居中显示 */

      /* justify-content: center; */

      /* 平分剩余空间 */

      /* justify-content: space-around; */

      /* 最重要的是：先两边贴边，再分配剩余空间 */

      /* justify-content: space-between; */

4、flex-wrap

/* 默认是不换行的属性 */

      /* flex-wrap: nowrap; */

      /* 换行 */

      flex-wrap: wrap;

5、align-items设置侧轴的属性

/* 设置侧轴居中 */

      align-items: center;

      /*了解 沿着侧轴拉伸 ，但是盒子不要给高度*/

      align-items: stretch;

和  justify-content属性一起可以实现元素水平垂直都居中的效果

/* 默认的主轴是x轴row */

      justify-content: center;

      /* 设置侧轴居中 */

      align-items: center;

6、align-content设置侧轴子元素排列方式（多行)

这个属性只能用于子项出现换行的情况下，也就是必须要多行，单行是没有效果的。

7、 align-content和align-items的区别

8、flex-flow属性是flex-direction和flex-wrap属性的复合属性

        flex-direction: column;

        flex-wrap: wrap;

      /* 简写 */

      flex-flow: column wrap;

二、flex布局子项常见属性

 1、flex属性

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

例如：flex: 1;就是在剩余空间总占一份的意思，如果只有一个子元素加上这个属性就是它会占剩余全部的空间。有多个子元素的话就是平分剩余空间

当然，某个子元素要多占空间就增大数值就行了，flex: 2;就是占两份

2、align-self属性，控制自己在侧轴上的排列方式

3、order属性，控制排列顺序

使用order属性来控制排列的顺序，数值越小越靠前，默认为0

和z-index不同，z-index数值越大越靠近