flex布局

<!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>flex布局-垂直竖直居和设置在子项目中的属性</title>
    <style>
/* flex布局和inline-flex的区别:前者容器升级为块级盒子,后者容器升级为行内盒子,对外部其他元素来说就是是否独占一行的区别。
    元素采用flex布局后,子元素的float,clear,vertivcal-align属性都将失效*/
/* 容器属性 6 */
/* 1、flex-direction的作用:规定(主轴)为哪个方向,默认是水平方向 */

/* 2、flex-wrap的作用:溢出是否换行(子项目总宽度 > 容器宽度) */

/* 3、flex-flow的作用:flex-direction 和flex-wrap 的简写,默认为 row nowrap */

/* 4、justify-content的作用:指定(主轴)水平方向的对齐方式, */

/* 5、align-items的作用:指定(交叉轴)水平方向的对齐方式,也可以说成指定(主轴)的垂直方向的对齐方式 */

/* 6、align-content的作用:一个容器内多根主轴存在才生效,作用跟align-items一样 */


/* 子项目属性 6 */
/* 1、 flex-basis的作用:是设置初始的宽度的,默认为auto,优先级比width高,如果同时和width设置了具体的数值,以flex-basis为准。 
       如果存在min-width 或 max-width,flex-basis的宽度活动范围在两者之间才能生效,小于最小(min-width),只取(min-width),大于最大(max-width),只取(max-width),而在其访问内可以随意设置大小*/

/* 2、 flex-grow的作用:容器总空间 > 子项目总空间的时候生效,说人话就是容器宽度方向还有剩余空间的时候生效。不过生效的前提是子项目也设置了这个属性,否则也没用。(flex-grow: 0)
       计算规则是 子项目总的flex-grow相加 =剩余容器的空间,得到一个flex-grow的量,再乘以每个项目自己所拥有的量,就是分配到的宽度,和原始宽度(相加)起来就是变化后的总宽度
       例如 5x + 1x = 600px,x=100px  200+500=700px;  200+100 = 300px; */

/* 3、 flex-shrink的作用: 和flex-grow类似,只不过一个放大,一个缩小,容器总空间 < 子项目总空间的时候生效,说人话就是容器宽度方向已经容纳不下所有子项目了。这个属性在满足该条件后自动生效(flex-shrink:1)
       计算规则是: 子项目的flex-shrink相加 = 不足容器的空间,得到一个flex-shrink的量,再乘以每个项目所拥有的flex-shrink的量,就是分配到的宽度,和原始宽度(相减)就是变化后的总宽度*/

/* 4、 order的作用:order值越小越靠前 */

/* 5、 align-self的作用,设置单个项目垂直方向的位置,与align-item的区别是多个和一个的区别,而且align-self是设置在自身项目上的,align-item是设置在容器上面的*/

/* 6、 flex的作用   flex = flex.grow + flex.shirnk + flex.basis  默认为(0,1,auto)*/


        .wrapper{
            display: flex;    
            flex-wrap: nowrap;     
            width: 1000px;
            height: 500px;
            background-color: grey;
            justify-content: center;
            align-items: center;
            align-content: space-around;
        }
        .item{
            height: 200px;  
            flex-basis: 200px;
        }
        .item1{
            background-color: green;
            flex-grow: 5;
            flex-shrink: 5;
            order: 2;
        }
        .item2{
            background-color: orange;
            flex-grow: 1;
            flex-shrink: 1;;
            align-self: flex-start;
            order: 1;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <!-- <div class="item item1">3</div>
        <div class="item item2">4</div> -->
    </div>
</body>
</html>


评论 抢沙发

表情
首页上一页12下一页尾页