zoukankan      html  css  js  c++  java
  • css学习_css3伸缩布局 flex布局

    1、flex布局

    案例一:

     

    案例二:

      保证不至于缩放得太小或太大

     

     案例三:flex的值不一定要写成几份,可以写成固定值

     案例四:

     

     竖着3等分(父容器按照高度3等分)

    !!案例  -----用flex布局写携程网(发现携程网是伸缩布局:根据屏幕自适应)

     

     

      flex:  2  意义是啥 (剩余宽度里占比2等份)   

    flex布局:1、父元素要定义为display:flex   ,

        2、直接子元素布局为flex: n   

        3、flex:n 的意思:先用父元素的宽度减去没有设置属性flex的子元素的宽度,把所有属性为flex子元素之和作为剩余宽度要分成的份数,最后属性为flex元素的宽度即为占比数。

        4、若父元素display:flex后  ,那其子元素设置的float都不起作用了,定位还是有用的,但是一般不会这样用   

    2、justify-content(水平对齐)属性用法作用如下:

                           

     3、align-items垂直对齐:适用于单行!

     4、flex-wrap属性

     

    5、align-content

      

    6、order

    每一份子项目默认值是0  

  • 相关阅读:
    异或和之和
    Wannafly挑战赛19C:多彩的树
    HDU 6035 树形dp
    利用C++套接字发送邮件
    洛谷P3368树状模板(区间更新+单点查询+差分)
    CCF 201903-1 小中大
    关于树状数组
    CODEVS 4189 (前缀是否出现)
    关于字典树
    hdu 1022 Train Problem
  • 原文地址:https://www.cnblogs.com/yangyutian/p/10699474.html
Copyright © 2011-2022 走看看