基础知识

1、flex弹性盒子

容器

flex-direction 设置那边为主轴 默认为 row
flex-wrap 设置多个元素占满一行后是否换行 默认为 nowrap
flex-flow flex-dirtion + flex-wrap 默认为 row nowrap
justiy-content 设置主轴项目的位置
aligin-itenms 设置交叉轴项目的位置

项目

flex-grow 定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。
flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间 默认为 auto
flex flex-grow + flex-shrink + flex-basis 默认为 0 1 auto
aligin-self 允许单个项目有与其他项目不一样的对齐方式

html

    <div class="容器">
        <div class="项目"></div>
        <div class="项目"></div>
    </div>

2、grid网格

容器

grid-template-columns 定义每一列的列宽 还可以指定网格线的名字，为项目的grid-column-xx服务
grid-template-rows 定义每一行的行高 还可以指定网格线的名字，为项目的grid-row-xx服务
grid-column-gap 设置列与列的间隔（列间距）
grid-row-gap 属性设置行与行的间隔（行间距）
grid-gap === grid-row-gap + grid-column-gap
grid-template-areas 属性用于定义单元格名称，为项目的grid-area服务
grid-auto-flow 设置单元格是从左到右排列(row)，还是从上到下排列(column)， 默认位置为 row注意：column dense 表示尽量填满空格
justify-items 设置单元格内容的水平位置 默认值为 stretch;
align-items 设置单元格内容的垂直位置 默认值为 stretch;
place-items ===  align-items + justify-items
justify-content 设置整个内容区域（网格）在容器里面的水平位置（左中右），
align-content 设置整个内容区域（网格）在容器里面的垂直位置（上中下）。
place-content ===  align-content + justify-content

项目

grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线
grid-column: <start-line> / <end-line>
grid-row: <start-line> / <end-line>;
注意：span 2 表示占用两个网格
grid-area 属性指定项目放在哪一个区域。
justify-self 属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

html

    <div class="容器">
        <div class="项目"></div>
        <div class="项目"></div>
    </div>

常见的布局方式

上下左右居中布局

方法1 position

    .parent{
        position: relative;
        width: 100vw;
        height: 100vh;
    }
    .center {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        /* transform: translate(-50%, -50%); */
        background-color: red;
    }

    .parent{
        position: relative;
        width: 100vw;
        height: 100vh;
    }
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: red;
    }

方法2 display

    .parent{
        position: relative;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .center {
        background-color: red;
    }

方法3 grid

    .parent{
        position: relative;
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: 100px;
        grid-template-rows: 100px;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
    }
    .center {
        background-color: red;
    }

只能左右居中布局

.parent{
    position: relative;
    width: 100vw;
    height: 100vh;
}
.center {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background-color: red;
}

如何实现一个元素的宽是高的两倍

方法1 利用图片的自适应,找到一张图片的宽高比为 2：1，利用图片的自适应，图片会将容器自动撑开。

.img-wrapper { 
    width: 50vw;
 }
img {
    width: 100%;
    height: auto;
}
<div class="img-wrapper">
    <img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt=""> 
</div>

方法2 利用padding-bottom

.wrapper {
    position: relative;
    width: 300px;
}
.ratio {
    position: relative;
    width: 100%;
    padding-bottom: 50%;
}
.content {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: yellow;
    top: 0;
}

<div class="wrapper">
    <div class="ratio"></div>
    <div class="content"></div>
</div>

如何实现两列布局，左自适应，右固定

方法1 flex

.parent{
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
}

.left {
    flex: 1 0 auto;
    background-color: red;
}

.right {
    /* flex-shrink: 0;
    flex-basis: 100px; */
    flex: 0 0 100px;
    background-color: blue;
}
        
<div class="parent">
    <div class="left">左列自适应</div>
    <div class="right">右列固定</div>
</div>

方法2 float

.parent{
    position: relative;
    width: 100vw;
    height: 100vh;

}
.left {
    float: left;
    height: 100%;
    width: calc(100% - 200px);
    background-color: red;
}
.right {
    float: right;
    width: 200px;
    height: 100%;
    background-color: blue;
}

<div class="parent">
    <div class="left">左列自适应</div>
    <div class="right">右列固定</div>
</div>

方法3 grid

.parent{
    position: relative;
    display: grid;
    grid-template-columns: auto 100px;
    grid-template-rows: 100vh;
}
.left {
    background-color: red;
}
.right {
    background-color: blue;
}

<div class="parent">
    <div class="right">右列固定</div>
    <div class="left">左列自适应</div>
</div>