zoukankan      html  css  js  c++  java
  • 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  /*在主轴垂直排列下,副轴水平方向居中*/
    }

     

  • 相关阅读:
    友好城市, 美团笔试题
    字符串计数, 美团笔试题
    公交车, 美团笔试题
    交错序列, 美团笔试题
    题目列表, 美团笔试题, 字符串数组比较
    图的遍历, 美团笔试题
    最长全1串, 美团笔试题
    外卖满减, 美团笔试题
    种花, 美团笔试题
    考试策略, 美团笔试题
  • 原文地址:https://www.cnblogs.com/Deaseyy/p/13341830.html
Copyright © 2011-2022 走看看