flex弹性布局实现适配

在弹性布局中，实现适配的方法有多种。首先是使用align-items属性来设置子元素在交叉轴上的对齐方式。align-items属性可以取值为flex-start、flex-end、center、baseline和stretch，分别表示子元素在交叉轴上从起始位置对齐、从末尾位置对齐、居中对齐、基线对齐和拉伸对齐。

另外，可以使用flex属性来控制子元素在主轴上的伸缩性。flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。其中，flex-grow表示子元素在剩余空间上的放大比例，flex-shrink表示子元素在空间不足时的缩小比例，flex-basis表示子元素在未设置宽度时的基准宽度。通过调整这些属性的值，可以实现子元素的适配效果。

此外，还可以使用align-self属性来单独调整某个子元素在交叉轴上的对齐方式。align-self属性可以取值为auto、flex-start、flex-end、center、baseline和stretch，与align-items属性类似，但是它作用于单个子元素，可以覆盖align-items的设置。

最后，可以使用flex-flow属性来同时控制flex-direction和flex-wrap两个属性。flex-direction用于设置主轴的方向，可以取值为row、row-reverse、column和column-reverse，分别表示主轴从左往右、从右往左、从上往下和从下往上。flex-wrap用于设置子元素是否换行，可以取值为nowrap、wrap和wrap-reverse，分别表示不换行、换行和反向换行。通过调整这两个属性的值，可以实现适应不同屏幕尺寸的布局效果。

综上所述，通过调整align-items、flex属性、align-self和flex-flow等属性的值，可以实现flex弹性布局的适配效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>