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;

  • 相关阅读:
    PAT 甲级 1101 Quick Sort
    PAT 甲级 1038 Recover the Smallest Number
    #Leetcode# 112. Path Sum
    #Leetcode# 17. Letter Combinations of a Phone Number
    #Leetcode# 235. Lowest Common Ancestor of a Binary Search Tree
    C++结构体重构
    【NOIP2016提高A组模拟9.7】鼎纹
    快速幂总结
    【NOIP2013提高组】货车运输
    【NOIP2015提高组】运输计划
  • 原文地址:https://www.cnblogs.com/kangxinzhi/p/13252304.html
Copyright © 2011-2022 走看看