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{

            displayflex;    

            flex-wrapnowrap;     

            width1000px;

            height500px;

            background-colorgrey;

            justify-contentcenter;

            align-itemscenter;

            align-contentspace-around;

        }

        .item{

            height200px;  

            flex-basis200px;

        }

        .item1{

            background-colorgreen;

            flex-grow5;

            flex-shrink5;

            order2;

        }

        .item2{

            background-colororange;

            flex-grow1;

            flex-shrink1;;

            align-selfflex-start;

            order1;

        }

    </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下一页尾页