CSS中的flex布局

flex布局一种常用的布局方式；记住四个样式即可：

display:flex;
flex-direction: column;
justify-content：space-around 
align-items：flex-end

 

外层容器元素：.menu

子元素： .item（包含一个div和span）

html：

<view class="menu2">
    <view class="item">
      <image src="/static/image/Ah玥玥.jpg"></image>
      <text>玥玥</text>
    </view>
    <view class="item">
      <image src="/static/image/Ah玥玥.jpg"></image>
      <text>玥玥</text>
    </view>
    <view class="item">
      <image src="/static/image/Ah玥玥.jpg"></image>
      <text>玥玥</text>
    </view>
    <view class="item">
      <image src="/static/image/Ah玥玥.jpg"></image>
      <text>玥玥</text>
    </view>
  </view>

 

CSS:

.menu{
    // width: 750rpx;
    // height：1000px;
    display:flex;
    
    /*在水平或垂直方向排列*/
    /* row:主轴为水平，column：主轴为垂直方向 */
    flex-direction: column;
    
    /*排列方式：space-around 平均居中布局；center 整体居中布局；space-between 左右靠边，平均布局；flex-start 从左边开始布局*/
    justify-content：space-around 
    
    /*在副轴方向如何展示：space/center/space-between/flex-start/flex-end */
    align-items：flex-end  /*flex-end：垂直排列情况下，水平靠右展示*/
}
​
.menu .item{
    display:flex;
    flex-direction:column;  /*子元素内部标签垂直排列*/
    align-items:center  /*在主轴垂直排列下，副轴水平方向居中*/
}