flex应用以及flex应用出现对齐问题解析

1基础

/* flex */
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* flex-direction */

.flex-direction-column {
  flex-direction: column;
}

/* justify-content */

.justify-content-start {
  justify-content: flex-start
}

.justify-content-end {
  justify-content: flex-end
}

.justify-content-center {
  justify-content: center
}

.justify-content-space-between {
  justify-content: space-between
}

.justify-content-space-around {
  justify-content: space-around
}

/* flex-1 */

.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/* align-items */

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

/* flex-wrap */

.flex-wrap-nowrap {
  flex-wrap: nowrap
}

.flex-wrap-wrap {
  flex-wrap: wrap
}

1.1 如何让最后一项右边对齐margin-left: auto; 垂直方向对齐方式 不同

style="align-self:flex-start"

1.2 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题

方案1：父级添加after伪类法，解决最后一排数量不够两端分布的情况
 <!--加上after伪类，解决最后一排数量不够两端分布的情况-->
 <!--父类-->
  .tem-flex:after{
    content: '';
    width: 30%;
    border:1px solid transparent;
  }
  <!--子类-->
  .tem-list{
    width:30%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
  }
--------------------------------------------
方案2：补位添加节点法，这种方案适用于多种排列方式。

<div class="tem-flex">
  <div class="tem-list" v-for="item in len">列表</div>
  <div class="list" v-for="item in (row-len%row)" v-if="len%row > 0"></div>
</div>

data(){
	return {
		len : 14,
		row: 4
	}
}

.tem-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;
}
.list{
  content: '';
  width: 20%;
  border:1px solid transparent;
  padding: 5px;
  overflow: hidden;
}
.tem-list{
  width:20%;
  border:1px solid #ff6600;
  margin-bottom: 10px;
  padding: 10px 5px;
  display: flex;
  justify-content: center;
}

1.4 flex布局设置width无效

子元素 flex: 0 0 50px;