zoukankan      html  css  js  c++  java
  • 伸缩布局

    <style>
    *{
    padding: 0;
    margin: 0;
    }
    .box{
    900px;
    height: 600px;
    border: 1px solid red;
    box-sizing: border-box;
    margin:0 auto;
    /*设置父容器为盒子:会使每一个子元素自动变成伸缩项
    当子元素的宽度和大于父容器宽度的时候,子元素会自动平均收缩*/
    display: flex;

    /*设置子元素的主轴方向上的排列方式*/
    justify-content: space-around;

    /*flex-flow:是flex-wrap和flex-direction的综合
    flex-wrap:控制子元素是否换行显示,默认不换行
    nowrap:不换行--则收缩
    wrap:换行
    wrap-reverse:翻转,原来是从上到下,翻转后就是从下到上来排列*/
    /*flex-wrap: wrap;*/
    /*flex-direction:设置子元素的排列方向:就是用来主轴方向,默认主轴方向是row(水平方向)
    row:水平排列方向,从左到右
    row-reverse:水平排列方向,从右到左
    column:垂直排列方向,从上到下
    column-reverse:垂直排列方向,从下到上*/
    /*flex-direction: column-reverse;*/
    flex-flow: row wrap;


    /*align-items:设置子元素(伸缩项)在侧轴方向上的对齐方式
    center:设置在侧轴方向上居中对齐
    flex-start:设置在侧轴方向上顶对齐
    flex:end:设置在侧轴方向上底对齐
    stretch:拉伸:让子元素在侧轴方向上进行拉伸,填充满整个侧轴方向>> 默认值
    baseline:文本基线*/
    align-items: center;

    }
    .first{
    200px;
    height: 200px;
    background-color: red;
    /*flex是用来设置当前伸缩子项占据剩余空间的比例值*/
    flex: 1;
    }
    .second{
    200px;
    height: 200px;
    background-color: green;
    flex: 3;
    }
    .third{
    200px;
    height: 200px;
    background-color: blue;
    }
    .fourth{
    200px;
    height: 200px;
    background-color: pink;
    }
    .fifth{
    200px;
    height: 200px;
    background-color: purple;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    <div class="fourth">4</div>
    <div class="fifth">5</div>
    </div>
  • 相关阅读:
    C字符串处理函数
    C语言字符串函数大全
    那些闪亮的日子
    牛客网在线编程:幸运数
    牛客网在线编程:水仙花数
    [LeetCode]617.Merge Two Binary Trees
    [LeetCode]657.Judge Route Circle
    [LeetCode]141. Linked List Cycle
    五大算法:分治,贪心,动态规划,回溯,分支界定
    [LeetCode]387.First Unique Character in a String
  • 原文地址:https://www.cnblogs.com/lujieting/p/10230725.html
Copyright © 2011-2022 走看看