小程序的常用居中弹性布局样式整理.md

1.弹性布局实现元素垂直居中

示例图

里面5个功能入口元素平均分布在白色底的容器里，其中每个功能入口元素的图标和文案也是上下垂直居中的。

wxml代码：

 <view class='usecdsecond'>
        <view class="usecdlist">
            <image src="http://cos.qkmai.com/qkmbb/ytal/wodetb1.png" class='small_icon'></image>
            <text>地址库</text>
        </view>
        <view class="usecdlist">
            <image src="http://cos.qkmai.com/qkmbb/ytal/wodetb2.png" class='small_icon'></image>
            <text>优惠券</text>
        </view>
        <view class="usecdlist" style='position:;relative'>
            <image src="http://cos.qkmai.com/qkmbb/ytal/wodetb3.png" class='small_icon'></image>
            <text>咨询服务</text>
            <button openType="contact" plain='true' style='position:absolute;left:0;top:0;width:100%;height:100%;border:0;color:transparent;'>1</button>
        </view>
        <view class="usecdlist">
            <image src="http://cos.qkmai.com/qkmbb/ytal/wodetb4.png" class='small_icon'></image>
            <text>帮助中心</text>
        </view>
        <view class="usecdlist">
            <image src="http://cos.qkmai.com/qkmbb/ytal/wodetb5.png" class='small_icon'></image>
            <text>我的关注</text>
        </view>
    </view>

wxss代码：

.usecdsecond {
    display: flex;
    background: #fff;
    margin:24rpx 10rpx;
    padding: 24rpx 0;
    overflow: hidden;
    border-radius:15rpx;  
}
.usecdlist {
    width: 185rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

flex知识点详解：

• 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
• 容器设置flex后有6个属性：flex-direction（row | row-reverse | column | column-reverse;）、flex-wrap（nowrap | wrap | wrap-reverse;）、flex-flow、justify-content（flex-start | flex-end | center | space-between | space-around;）、align-items（flex-start | flex-end | center | baseline | stretch;）、align-content（ flex-start | flex-end | center | space-between | space-around | stretch;）
• 容器里项目有6个属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self