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  /*在主轴垂直排列下,副轴水平方向居中*/
}

 

 

CSS中的flex布局

上一篇:Docker: 上传镜像至docker仓库或者阿里云仓库


下一篇:sql语句