flex 布局

概念

• main axis————主轴
• main size————主尺寸
• main start————主轴起点
• main end————主轴终点
• cross axis————侧抽
• cross size————侧抽尺寸
• cross start————侧抽起点
• cross end————侧抽终点
• flex item ————flex里面的一个项，所有flex里的子元素都叫item。
• flex container————容器，主要指flex父元素。

flex container的属性

启动flex布局第一步：
在父元素css添加 display:flex 开启flex模式

• flex-direction————方向(可忽略改用缩写flex-flow)
  • row————横向展示（默认,注意:当你调转行或列的方向后，flex-start和flex-end对应的方向也被调转了。）
  • row-reverse————反向横展示
  • column————纵向展示(注意当flex以列为方向时，justify-content控制纵向对齐，align-items控制横向对齐。)
  • column-reverse————反向纵展示
• flex-wrap————换行(可忽略改用缩写flex-flow)
  • nowrap————不换行（默认）
  • wrap————换行
  • wrap-reverse————反向换行
• flex-flow————方向和换行的简写
  • 如：flex-flow:column wrap
• justify-content————主轴方向的对齐方式
  • space-between————均匀排列，每个元素首个元素放置于起点，末尾元素放置于终点
  • space-around————均匀排列，每个元素周围分配相同的空间
  • space-evenly————均匀排列，每个元素之间的间隔相等
  • flex-start————从行首起始位置开始排列
  • flex-end————从行尾位置开始排列
  • center————居中排列
• align-items————侧抽对齐方式
  • flex-start————元素向侧轴起点对齐。
  • flex-end————元素向侧轴终点对齐。
  • center————元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
  • stretch————弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。（默认）
• align-content————多行/列内容对齐方式（用的较少）
  • flex-start————所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end————所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
  • center————所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
  • space-between————所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around————所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 -stretch————拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行

flex item的属性

• flex-grow————属性定义弹性盒子项（flex item）的拉伸因子
• flex-shrink————属性定义收缩的比例
• flex-basis————指定了 flex 元素在主轴方向上的初始大小。（一般不用）
• flex————flex-grow,flex-shrink,flex-basis上面三个的缩写
• order————顺序
• align-self————自身的对齐方式

flex布局最后一行左对齐

/* 方法一 列数固定 space-between */
.container{
  display:flex;
  flex-wrap: wrap;
  background:#999;
    .box{
      width:30%;
      height:100px;
      background:pink;
      margin-top:15px
    }
    .box:not(:nth-child(3n)){
      margin-right:calc(10% / 2)
    }
}


/*方法二 子项宽度不固定*/
.demo2{
  background: pink;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item{
    height: 100px;
    background: rebeccapurple;
    margin: 15px;
  }
  .item:last-child{
    margin-right: auto;
  }
}

flex属性

Grid 布局 (opens new window)