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;

  • 相关阅读:
    深入理解Nginx及使用Nginx实现负载均衡
    Linux内存管理之伙伴系统之伙伴系统概述
    TCP 协议如何解决粘包、半包问题
    Linux CPU亲缘性详解
    单实例
    关联容器和无序关联容器的区别
    基于范围的for循环
    vector讲一个容器的内容拷贝到另一个容器,容器的区间删除
    win32窗口添加按钮及按钮消息相应,动态显示时间
    判断是不是纯数字字符串
  • 原文地址:https://www.cnblogs.com/kangxinzhi/p/13252304.html
Copyright © 2011-2022 走看看