弹性盒子布局

Posted 2021-01-21 xts6

  最近在开发公司的平台系统，因为该项目主要是运行在移动端，所以采用了flex弹性布局。flex布局用起来很灵话，提高了开发效率。而且性能貌似比传统的浮动布局好。

 1. 首先声明父元素布局方式为弹性布局

　　display: -webkit-flex; /* Safari */
　　display:flex;

 2.然后设置横向主轴子元素排列方式 

     justify-content:flex-start | flex-end | center | space-between | space-around;

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.然后设置纵向交叉轴子元素的排列方式

 　align-items:flex-start | flex-end | center | baseline | stretch;

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

  4.在实际开发中遇到了许多问题，在这里主要列举两个：

         1.父元素下的两个子元素 ，1子元素靠左，2子元素占据剩余空间。2子元素的文字不固定的，可能很多可能不多，多的话我们就用可以用溢出隐藏解决。

         但是右侧过多即使溢出隐藏了，左侧的文字就会自动换行。

      

          解决方法为 左侧加 flex-shrink: 0;//空间不足时不会自动缩小

       

 

          2.父元素下的子元素，默认平均分配剩余空间，但是子元素无法确定数量 ，设置两端对齐的话，子元素不够的话默认就两侧分开显示，就不能对称

      

    　　而设置左对齐的话又不能平均分配剩余空间，真是个头疼的问题。

 　

     最后解决方法是在后面多加几个空元素，希望每行最大显示的数量减去2，为n-2个， 这样剩余空间就能合理分配了。也能保证在不能尺寸屏幕下面，子元素排列正常。