• flex布局


    • 操作方便,布局极其简单,移动端使用比较广泛
    • pc端浏览器支持情况比较差
    • IE11或更低版本不支持flex或仅支持部分
    • 如果是pc端页面布局,还是采用传统方式
    • 如果是移动端或者是不考虑兼容的pc则采用flex

    当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。

    • 因为flex布局可以让子元素一行显示,不需要浮动,所以就不需要清除浮动
    • flex布局还可以设置盒子垂直居中,之前只能设置水平居中。
      总结就是通过给父盒子添加display:flex属性,来控制子盒子的位置和排列方式
    
    <!-- 3.父项常见属性* -->
    - flex-direction:设置主轴的方向 (direction:方向)
    - justify-content:设置主轴上的子元素排列方式 (justify: [ˈdʒʌstɪfaɪ] ,证明..有理。content:内容)
    - flex-wrap:设置子元素是否换行  
    - align-content:设置侧轴上的子元素的排列方式(多行)
    - align-items:设置侧轴上的子元素排列方式(单行)
    - flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
    
    
    <!-- 4.flex-direction设置主轴的方向 -->
    flex-direction: row;//默认从左到右
    flex-direction: row-reverse;  //从右到左
    flex-direction: column;  //从上到下
    flex-direction: column-reverse;  //从下到上
    
    
    <style>
        div {
            /* 给父级添加flex属性 */
            display: flex;
             800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 行 row  那么y轴就是侧轴喽 */
            /* 我们的元素是跟着主轴来排列的 */
            /* flex-direction: row; */
            /* 简单了解 翻转 */
            /* flex-direction: row-reverse; */
            /* 我们可以把我们的主轴设置为 y轴 那么 x 轴就成了侧轴 */
            flex-direction: column;
        }
        div span {
             150px;
            height: 100px;
            background-color: purple;
        }
    </style>
    </head>
    <body>
    <div>
        <span>1</span>
        <span>2</span>
    </div>
    </body>
    
    
    <!-- 5. justify-content 设置主轴上的子元素排列方式 -->
    - justify-content 属性定义了**项目在主轴上的对齐方式**(项目就是子元素)
    - 注意: 使用这个属性之前一定要确定好主轴是哪个
    
    
    justify-content: flex-start;   //默认值 从头部开始  如果主轴是x轴,则从左到右
    justify-content: flex-end;   //从尾部开始排列
    justify-content: center;  //在主轴居中对齐(如果主轴是x轴则 水平居中)
    justify-content: space-around;   //平分剩余空间
    justify-content: space-between;   //先两边贴边 再平分剩余空间(**重要**)
    
    
    实例:
            <style>
                div {
                    display: flex;
                     800px;
                    height: 300px;
                    background-color: pink;
                    /* 默认的主轴是 x 轴 row */
                    flex-direction: row;
                    /* justify-content: 是设置主轴上子元素的排列方式 */
                    /* 先两边贴边, 在分配剩余的空间 */
                    justify-content: space-between;  }
                div span {
                     150px;
                    height: 100px;
                    background-color: purple; }
            </style>
            </head>
            <body>
            <div>
                <span>1</span>
                <span>2</span>
                <span>3</span>
            </div>
            </body>
    
    
    <!-- 6. flex-wrap设置是否换行 -->
    - 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,flex布局中默认是不换行的。
    - nowrap 不换行  //写在父盒子里面
    - wrap 换行
    /* flex布局中,默认的子元素是不换行的, 如果装不开,会缩小子元素的宽度,放到父元素里面  */
                /* flex-wrap: nowrap; */
                flex-wrap: wrap;
    
    
    <!-- 7.align-items 设置侧轴上的子元素排列方式(单行 ) -->
    - 该属性是控制子项在侧轴(默认是y轴)上的排列方式  在**子项为单项(单行)的时候使用**
    - 该属性在控制盒子水平居中和垂直居中时使用
    默认x主轴时 -居中:justify-content: center; align-items: center;
    y主轴时 - 居中:flex-direction: column;justify-content: center; align-items: center;
    x主轴时-侧轴拉伸:justify-content: center; align-items: stretch ;/* 拉伸,但是子盒子不要给高度 */
    
    
    <!-- 8.align-content  设置侧轴上的子元素的排列方式(多行) -->
    设置子项在侧轴上的排列方式 并且只能用于**子项出现 换行 的情况(多行)**,在单行下是没有效果的。
    flex-wrap: wrap; align-content: flex-start;  //从上到下
    flex-wrap: wrap; align-content: center;  //在侧轴中间显示
    flex-wrap: wrap; align-content: space-between; 在侧轴先分布两头,再平均
    flex-wrap: wrap; align-content: space-around; 在侧轴平分
    
    
    总结:**单行找align-items  多行找 align-content**
    
    
    <!-- 9.flex布局子项常见属性 -->
    - flex子项目占的份数
    - align-self控制子项自己在侧轴的排列方式
    - order属性定义子项的排列顺序(前后顺序)
    
    
    <!-- 10.flex 属性 -->
    flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。
    分配剩余空间-例子:
            <style>
                section {
                      display: flex;
                       60%;
                      height: 150px;
                      background-color: pink;
                      margin: 0 auto;
                  }
                  section div:nth-child(1) {
                       100px;
                      flex:1;
                      height: 150px;
                      background-color: red;
                  }
                  section div:nth-child(2) {
                      flex: 1;
                      background-color: green;
                  }
                  section div:nth-child(3) {
                       100px;
                      height: 150px;
                      background-color: blue;
                  }
            </style>
            <body>
              <section>
                  <div></div>  <div></div> <div></div>
              </section>
            </body>
        占多少份代码:
        <style>
            p { display: flex;  60%;  height: 150px;
                background-color: pink;  margin: 100px auto;}
             p span {
                 flex: 1;
             }
             p span:nth-child(2) {
                 flex: 2;
                 background-color: purple;
             }
         </style>
         <body>
         <p>
             <span>1</span> <span>2</span> <span>3</span>  
         </p>
     </body>
    
    
     <!-- 11.align-self控制子项自己在侧轴上的排列方式 -->
     align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。
     默认值为 auto
     span:nth-child(2) {
        /* 设置自己在侧轴上的排列方式 */
        align-self: flex-end;
    }
    总结:align-items是控制素有的子项,而align-self是控制单个子项
        实例:
        <style>
                div {display: flex;  80%;  height: 300px;  background-color: pink; }
                    /* 让三个子盒子沿着侧轴底侧对齐 */
                    /* align-items: flex-end; */
                div span {  150px; height: 100px;margin-right: 5px; background-color: purple;  }
                div span:nth-child(3) {
                     /* 我们想只让3号盒子下来底侧 */
                    align-self: flex-end;
                }
            </style>
        </head>
        <body>
            <div>
                <span>1</span> <span>2</span><span>3</span>
            </div>
        </body>
    
    
     <!-- 12.order 属性定义项目的排列顺序 -->
     数值越小,排列越靠前,默认为0。
     .item { order: <number>;}
        实例:
        <style>
                div {display: flex; 80%; height: 300px; background-color: pink;  }
                div span { 150px; height: 100px;margin-right: 5px; background-color: purple;}  
                div span:nth-child(2) {
                    /* 默认是0   -1比0小所以在前面 */
                    order: -1;
                }
                div span:nth-child(3) {
                    align-self: flex-end;
                }
            </style>
        </head>
        <body>
            <div>
                <span>1</span><span>2</span><span>3</span>
            </div>
        </body>
       
    <!-- 13.背景渐变 -->
    background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
    background: -webkit-linear-gradient(left, red , blue);
    background: -webkit-linear-gradient(left top, red , blue);
    /* linear:线性,gradient: [ˈgreɪdiənt] 变化率,理解为渐变*/
    - 背景渐变必须添加浏览器私有前缀
    - 起始方向可以是: 方位名词  或者 度数 , 如果省略默认就是 top
    
    
        案例:
        <style>
                div {
                     600px;
                    height: 200px;
                    /* 背景渐变必须添加浏览器私有前缀 */
                    /* background: -webkit-linear-gradient(left, red, blue); */
                    /* background: -webkit-linear-gradient(red, blue); */
                    background: -webkit-linear-gradient(top left, red, blue);
                }
            </style>
        </head>
        <body>
            <div></div>
        </body>
    
  • 相关阅读:
    Notes of the scrum meeting(12.7)
    Notes of the scrum meeting(12.5)
    事后分析报告(M1阶段)
    锁屏软件发布说明
    Android 锁屏软件MemoryDebris测试报告
    锁屏软件功能介绍
    Notes of the scrum meeting(11/4)
    Notes of the scrum meeting(11/3)
    Notes of the scrum meeting(11/2)
    SCRUM 12.17
  • 原文地址:https://www.cnblogs.com/xm0328/p/13783005.html
Copyright © 2020-2023  润新知