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

    6.30 移动端 
    本次案例布局用到了 flex+rem+flexible.js+LESS
    normalize.css 初始化样式
    轮播图用swiper插件
    7.1

    显示不开就换行:
    display: flex;
    flex-wrap: wrap;

    纵轴排列:
    flex-direction: column;

    水平居中:
    align-items: center;

    选择前面三个-n+3 选择前三个:
    &:nth-child(-n+3){
    padding-bottom:1.653333rem ;
    }

    7.2

    两端对齐:
    display:flex;
    justify-content: space-between;

    转行内块:
    display:inline-block;

    行内块和文字对齐添加代码:
    vertical-align: middle;// 添加这个代码,可以让后面的文字垂直居中

    自调用函数,立即执行函数,沙箱函数;作用:局部变量,避免全局污染
    (function(){})();

    7.5
    flex属性总结

    父元素叫容器 子元素叫项目
    父元素属性:
    display:flex;
    //1.设置主轴方向
    flex-direction:row;
    flex-direction:row-reverse;
    flex-direction:column;
    flex-direction:column-reverse;
    //2.设置主轴上子元素的排列方式
    justify-content:flex-start;
    justify-content:flex-end;
    justify-content:center;
    justify-content:space-between;
    justify-content:space-around;
    //3.子元素是否换行
    flex-wrap:nowrap;
    flex-wrap:wrap;
    //4.设置单行子元素的侧轴排列方式
    align-items:flex-start;
    align-items:center;
    align-items:flex-end;
    align-items:stretch;
    //5.设置多行子元素的侧轴排列方式
    align-content:flex-start;
    align-content:center;
    align-content:flex-end;
    align-content:space-between;
    align-content:space-around;
    align-content:stretch;

    flex下的子元素属性
    //1.份数,子项目分配剩余空间,用flex表述占多少份(可用作圣杯布局);
    flex:1;
    //控制子项自己在侧轴的排列方式
    align-self:flex-start;
    align-self:flex-end;
    align-self:center;
    //控制子项的排列顺序,默认0,越小越靠前啊
    order:0;

  • 相关阅读:
    EditPlus使用技巧
    PL/SQL Dev的问题
    解决httpModules 未能从程序集 XX 加载类型 XXX 的错误
    IE浏览器无法显示背景,字体显示很大问题的解决办法[转]
    如何在Outlook2003中加入农历节气
    再谈Oracle在Windows下的权限问题
    Vista下安装布署注册的问题解决
    [转]关于管理的经典故事(员工激励)
    开始应用AJAX
    Aptana IDE 中文乱码的问题解决
  • 原文地址:https://www.cnblogs.com/kangxinzhi/p/13252304.html
Copyright © 2011-2022 走看看