flex布局采用space-around这种方法，但是最后一行如何让他左对齐

Posted 2023-05-02

flex 配合百分比使用。
若 justify-content: space-around;，需要添加空白占位元素。
若 justify-content: flex-start;，不需添加额外元素。
item 内部 text-align: 一、justify-content对齐问题描述
在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。

但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。center; 实二、如果每一行列数是固定的
如果每一行列数是固定的，则下面两种方法可以实现最后一行左对齐。

方法一：模拟space-between和间隙
也就是我们不使用justify-content:space-between声明在模拟两端对齐效果。中间的gap间隙我们使用margin进行控制。现居中。 参考技术A flex 配合百分比使用。
若 justify-content: space-around;，需要添加空白占位元素。
若 justify-content: flex-start;，不需添加额外元素。
item 内部 text-align: center; 实现居中。 参考技术B 添加一个伪类就可以
.container:after
content: "";
flex: auto;

弹性布局

/* pages/flex/flex.wxss */
.outter{
  width: 100%;
  display: flex;
  /* justify-content: flex-start; 左对齐 */
  /* justify-content: flex-end; 右对齐 */
  /* justify-content: center; 居中对齐 */
  /* justify-content: space-around; 延主轴均匀分布 元素中间的距离是最前后或者最后一个元素到父元素的间距的两倍 */
  /* justify-content: space-between; 两端对齐 */
  /* justify-content: space-evenly; 延主轴均匀分布 */
  justify-content: center;
  /* align-items: flex-start; 起始端对齐 */
  /* align-items: flex-end; 尾端对齐 */
  /* align-items: center; 居中对齐 */
  /* align-items: stretch; 如果元素没有高度，那么将元素的高拉伸为100% */
  /* align-items: baseline; 按照文字高度对齐 */
  align-items: stretch;
  /* flex-direction: row; 主轴和侧轴的方向 主轴从左到右 侧轴上下 */
  /* flex-direction: row-reverse; 主轴从右到左 侧轴上下 */
  /* flex-direction: column  主轴上下 侧轴左右*/
  /* flex-direction: column-reverse 主轴下上 侧轴左右 */
  /* flex-wrap: wrap; 换行*/
  /* flex-wrap: nowrap 不换行*/
  /* flex-wrap: wrap-reverse 将上一面放到最下面 */
  /* align-content: stretch 默认将元素高度拉伸填满，如果多行那么就平均 */
  /* align-content: flex-start 换行之后元素的上边距为0 */
  /* align-content: flex-end 换行之后元素的下边距为 0  */
  /* align-content: center 垂直方向居中对齐 */
  /* align-content: space-between; 上下对齐 */
  /* align-content: space-around; 元素间距为元素和边界间距的两倍 */



  background-color: pink;
  height: 300px;
}
.inner{
  /* flex-basis: auto; 元素占据的面积 默认值自动 */
  /* flex-basis: 200px; 设置子元素占据的宽度和高度 */
  /* flex-grow: 1 设置元素是否增大 默认是0不增大 1是 如果都放大，那么元素将按照比例平均划分，如果不相等那么按照比例划分 越大的占据面积越大 */
  /* flex-shrink: 1 默认是1缩小 元素是否缩小 和flex-grow 相反 */
  width: 80px;
  height: 80px;
  background-color: #ccc;
  border: 1px solid red;
  box-sizing: border-box
}
.inner4{
  width: 80px;
  background-color: #ccc;
  border: 1px solid red;
  box-sizing: border-box
}