zoukankan      html  css  js  c++  java
  • 浅谈flex布局

    说到flex布局,这是我们必须要学习的,因为这个会给我们很大的帮助,很多的时候不必要再用浮动布局了。

    下面就来简单的说说吧---------------------------------

    首先这个分两个属性,一个是容器的属性,另一个是容器子集的属性。

    在容器上我们常用的有

    justify-content(属性定义了项目在主轴上的对齐方式。): flex-start (子集居左)| flex-end(居右) | center (居中)| space-between (两端对齐,项目之间的间隔都相等。)| space-around(每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍。);
    }
    align-items(属性定义项目在交叉轴上如何对齐): flex-start (起点对齐)| flex-end(终点对齐) | center(中点对齐) | baseline(项目的第一行文字的基线对齐) | stretch(默认值);
    }
     flex-flow(属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap):这个需要flex-direction和flex-warp的属性值的组合,这个要自己慢慢的组合就行了,需要什么功能就给其什么样的值。

    在子集上比较常用的有

    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。为2时,比1就要大一倍以此类推。

    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。注意空间的大小。

     
  • 相关阅读:
    IOS开发-OC学习-MD5加密
    数据可视化-使用EXCEL和PS制作一个复杂饼图
    IOS开发-OC学习-Foundation框架练习
    IOS开发-ObjC-NSDictionary
    IOS开发-ObjC-NSArray
    IOS开发-ObjC-NSString
    Java for LeetCode 213 House Robber II
    Java for LeetCode 212 Word Search II
    Java for LeetCode 211 Add and Search Word
    Java for LeetCode 210 Course Schedule II
  • 原文地址:https://www.cnblogs.com/dy105525/p/7712087.html
Copyright © 2011-2022 走看看