• 伸缩布局flex


    一、伸缩布局的起源

      1、之前我们想要适应不同的浏览器,一般采用的是设置宽度、高度为父级元素的百分比,但是有时候百分比的计算是相当复杂的,加上有时候还有规定的宽度要设置,所以,伸缩布局的出现是我们所急需的。

      例:将一个section三等分,其中放入3个div

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>伸缩布局</title>
        <style>
            /* 原始的模式 */
            /* section{
             1000px;
            height: 200px;
        }
        div{
            float:left;
            33.33%;
            height:20px;
            background-color: red;;
        }
        div:nth-child(2){
            background-color: blue;
        }
        div:last-child{
            background-color:green;
        } */
            /* 采用伸缩布局 */
            section {
                display: flex;
                width: 1000px;
            }
    
            div {
                flex: 1;
                height: 20px;
                background-color: red;
            }
    
            div:nth-child(2) {
                background-color: blue;
            }
    
            div:last-child {
                background-color: green;
            }
        </style>
    </head>
    
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    
    </html>

    二、伸缩布局的使用

      1、可以添加具体宽度

    div:nth-child(2) {
                 20px;
                background-color: blue;
            }

      2、可以设置最小宽度,这样当屏幕缩小到小于最小宽度时,就会出现滚动条

      min-500px;

      3、伸缩布局的排列方式:主轴、方向

      flex-direction: row;
                /* 默认的:横向排列 */
                flex-direction: column;
                /* 纵向排列 */
                flex-direction: row-reverse;
                /* 横向逆序 */
                flex-direction: column-reverse;
                /* 纵向逆序 */

      4、主轴的对齐方式

      

     /* justify-content一行的情况 */
                /* 从左到右,默认的顺序 */
                /* justify-content: flex-start; */
                /* 从右到左的,逆序 */
                /* justify-content: flex-end; */
                /* 子元素在父元素的中间显示 */
                /* justify-content: center; */
                /* 均分,贴边 */
                /* justify-content: space-around; */
                /* 均分,不贴边 */
                /* justify-content: space-between; */
    /* 纵向逆序 */
    /* align-content 多行的情况()
    值同,默认是strentch
    必须在父元素例配置{display:flex;flex-direction:row;flex-wrap:wrap;}
    */
     

      5、order:控制子元素的裴烈顺序:默认是0,越小的值越排在前面,可以是负数

      6、flex-wrap是否换行:no;默认收缩显示wrap;换行wrap-reverse;以相反的顺序换行

      7、aligin-items侧主轴的对齐方式:stretch;子元素高度拉伸(默认)center;居中felx-start;在开头;flex-end;在底边

      8、flex-flow:排列方向 是否换行的综合接卸形式

  • 相关阅读:
    [Swift实际操作]七、常见概念-(5)使用NSString对字符串进行各种操作
    [Swift]LeetCode326. 3的幂 | Power of Three
    [Swift]LeetCode303. 区域和检索
    [Swift]LeetCode292. Nim游戏 | Nim Game
    [Swift]LeetCode290. 单词模式 | Word Pattern
    SpringMVC框架中的异常解析器-ExceptionHandler和HandlerExceptionResolver
    一个Web报表项目的性能分析和优化实践(七):性能监测工具JavaMelody
    一个Web报表项目的性能分析和优化实践(七):性能监测工具JavaMelody
    百度Echarts-免费的商业产品图表库
    百度Echarts-免费的商业产品图表库
  • 原文地址:https://www.cnblogs.com/dhrwawa/p/10545283.html
Copyright © 2020-2023  润新知