zoukankan      html  css  js  c++  java
  • Flexbox

    哈,这次是拓展并提升一下css方面的知识点。
    首先来,布局的传统解决方案,基于盒装模型,依赖 display 属性 + position属性 + float属性。
    它对于那些特殊布局非常不方便,比如,【垂直居中】就不容易实现。
    【方法:http://blog.csdn.net/wolinxuebin/article/details/7615098


    那么,就是有了Flex布局的引入(dang dang ~~dang,dang dang dang~~)


    一:Flex布局是什么?
    Flex是Flexible Box的缩写,任何一个容器都可以指定为Flex布局,能很好支持不同视口尺寸和设备
    二:内容?
    属性与值:

    • flex-direction      方向上     
    1. row | row-reverse | column | column-reverse;
    1. row(默认值):主轴为水平方向,起点在左端;
    1. row-reverse:主轴为水平方向,起点在右端;
    1. column:主轴为垂直方向,起点在上沿;
    1. column-reverse:主轴为垂直方向,起点在下沿。
    • flex-wrap          换行
    1. flex-wrap: nowrap | wrap | wrap-reverse;
    1. 不换行;
    1. 换行,第一行在上方;
    1. 换行,第一行下方。
    • flex-flow   概括了以上两点
    1.  flex-flow: flex-direction | flex-wrap;
    1.  flex-flow是flex-direction 和 flex-wrap的简写,默认值row 和 nowrap.
    • justify-content  从左往右
    1. justify-content: flex-start | flex-end | center | space-between | space-around;
    1. 左对齐;
    1. 右对齐;
    1. 居中;
    1. 两端对齐,元素之间的间隔都相等;
    1. 每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍。
    • align-items     有待琢磨
    1. align-items: flex-start | flex-end | center | baseline | stretch;
    • align-content     
    1. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    1. flex-start:与交叉轴的起点对齐。
    1. flex-end:与交叉轴的终点对齐。
    1. center:与交叉轴的中点对齐。
    1. space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    1. space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    1. stretch(默认值):轴线占满整个交叉轴。
    • order :自我认为是在对元素进行排序,数值小就越靠前


    eg:

     

    效果:4231
    其他知识点链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
    三:缺点
    兼容性坑爹...(移动端和PC端都很坑)

  • 相关阅读:
    ios 数据类型转换 UIImage转换为NSData NSData转换为NSString
    iOS UI 12 block传值
    iOS UI 11 单例
    iOS UI 08 uitableview 自定义cell
    iOS UI 07 uitableviewi3
    iOS UI 07 uitableviewi2
    iOS UI 07 uitableview
    iOS UI 05 传值
    iOS UI 04 轨道和动画
    iOS UI 03 事件和手势
  • 原文地址:https://www.cnblogs.com/zhouqiaoyun/p/7526937.html
Copyright © 2011-2022 走看看