第五课 定位与flex，grid。

一.Flex布局

html代码
     <div class="flex-containter">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
    </div>

1.Flex容器中的属性

css代码
        .flex-containter{
            /* 使用flex布局 */
            display: flex;
            height: 20em;
            border: 1px solid violet;
            /* 控制flex项目能否换行：warp能换行，nowarp不能换行 */
            flex-wrap:nowrap;
            /* 控制flex项目排列方式：row行排列，column列排列。 */
            flex-direction:row;
            /* flex-warp和flex-direction合并简写 */
            flex-flow:row nowrap ;
            /* place-content用于控制flex的剩余空间:end终止边，start开始边，center居中。在项目两边进行分配*/
            place-content: center; 
            /* 在剩余空间在每个项目之间进行分配 */
            place-content: space-between;
            /* 剩余空间围绕每个项目两边平均分配*/
            place-content: space-around;
            /* place-items交叉轴上的排列 */
            place-items: start;
            place-items: end;
            place-items: center;
        }
        .item{
            border: 1px solid green;
            width: 20em;
            background-color: lightblue;
        }
    </style>

2、Flex项目中的属性

CSS代码
.item{
            border: 1px solid green;
            width: 20em;
            background-color: lightblue;
            /* flex-grow是否放大；flex-shrink是否能缩小；flex-basis项目在主轴上的宽度，auto为自动; */
            /* 简写用flex：flex-grow flex-shrink flex-basis */
            /* flex:0 1 auto; flex项目不允许放大，只允许缩小，宽度自动适配 */
            /* flex项目放大缩小自动响应。同flex:1 1 auto */
            flex:auto;
            /* flex项目不能自动响应。同flex：0 0 auto */
            flex:none;
        }
        /* 改变flex项目的顺序，用order */
        .item:first-of-type {
            order: 3;
        }

二、grid布局

html代码
    </style>
    <div class="grid-containter">
        <div class="grid-item">item1</div>
        <div class="grid-item">item2</div>
        <div class="grid-item">item3</div>
        <div class="grid-item">item4</div>
        <div class="grid-item">item5</div>
        <div class="grid-item">item6</div>
        <div class="grid-item">item7</div>
        <div class="grid-item">item8</div>
        <div class="grid-item">item9</div>
    </div>

1、grid容器中的属性

css代码
 <style>
        .grid-containter{
            display: grid;
            width:40em;
            height: 40em;
            /* 把项目放入3行3列的网格中 */
            grid-template-columns: 10em 10em 10em;
            grid-template-rows: 10em 10em 10em;
            /* 第二种写法，把项目放入2行3列网格中 */
            grid-template-columns: repeat(3,20em);
            grid-template-rows: repeat(2,20em);
            /* 第三总写法，用新单位fr */
             grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            /* 剩余空间在项目中的分配 */
            place-content: center center;
              /* 控制项目内容在网格中的排列，用place-item  */
               place-items:start end;/*place-items:竖向 横向 ; */
            place-items: center; 
        } 
        .grid-item{
            background-color: violet;
            height:5em;
            width:5em;
              /* 控制项目内容在网格中的排列，用place-item  */
              /* place-items:start end;place-items:竖向 横向 ; */
            /* place-items: center; */
        }

.grid项目中的属性