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

     

  • 相关阅读:
    [cf582E]Boolean Function
    [atAGC029F]Construction of a tree
    [atAGC020E]Encoding Subsets
    [gym102769L]Lost Temple
    [atAGC034E]Complete Compress
    [cf566E]Restoring Map
    [atAGC023F]01 on Tree
    [gym102822I]Invaluable Assets
    [gym102900H]Rice Arrangement
    [Offer收割]编程练习赛32
  • 原文地址:https://www.cnblogs.com/Deaseyy/p/13341830.html
Copyright © 2011-2022 走看看