自适应布局之初识flex

说起自适应、恐怕对于flex那是无人不知无人不晓了吧（如果你真的没听过....emmm 大哥我错了），下面将结合一些例子来简单描述下flex

初识flex

案例一

三行代码简单实现下子元素垂直、水平居中

 .father {
    // 三行水平垂直居中
    display: flex;
    align-items: center;
    justify-content: center;
     
    width: 300px;
    height: 300px;
    background-color: pink;     // pink老师，yyds！！！
 }

<div class="father">
    <span class=“son”>我是子元素</span>
</div>

案例二

上下固定高度，中间自适应

* {
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    background-color: pink;
}
// 三种写法在当前的情况下一样的效果，其实发生作用的是 flex-grow 属性
main {
    /* flex: 1; */
    /* flex: auto; */
    flex-grow: 1;
}
footer,
header {
    background-color: skyblue;
    height: 50px;
}

<body>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
</body>

案例三

左边侧边栏(包含滚动条)，右边上下固定高度，中间自适应

 * {
        margin: 0;
        padding: 0;
    }
    body {
        display: flex;
        flex-direction: column;
        width: 100vw;
        min-height: 100vh;
        background-color: pink;
    }
    // 三种写法在当前的情况下一样的效果，其实发生作用的是 flex-grow 属性
    main {
        /* flex: 1; */
        /* flex: auto; */
        flex-grow: 1;
    }
    footer,
    header {
        background-color: skyblue;
        height: 50px;
    }

    ----------------新增样式-----------------------
    aside {
        width: 100px;
        height: 100vh;
        background-color: greenyellow;
        flex: none;
        overflow-y: auto;
    }
    li {
        height: 200px;
    }
    .main-container {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
     ----------------------------------------------
    <body>
        <aside>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </aside>
        <div class="main-container">
            <header>header</header>
            <main>main</main>
            <footer>footer</footer>
        </div>
    </body>

定义

先说说flex定义、简单来说flex包含两部分，一部分是容器（父容器） 、另一部分是项目（子项） ，就像下面的结构一样，那明白了么？就是一个容器包含了几个子项目，这两部分可以通过flex的一些属性进行控制项目（子项）的位置、对齐方式、响应式的变化方式

<div class="father" style="display: flex">
    <span class=“son”>我是子元素</span>
    ......
    <span class=“son”>我是子元素</span>
</div>

有了如上的简单展示，那么开始学习一下flex的具体属性值，其实并不复杂，只要多用即可掌握，记住容器（父元素）6个属性、项目（子项）6个属性值，都是6个，66大顺，很好记对吧。

容器（父元素）

flex-direction （主轴方向）
flex-wrap （子元素超出是否换行）
flex-flow （上面两个属性的综合体，可以只写这个，代替上面两个，就像字体的font属性一样）
justify-content （定义子项在主轴上的对齐方式）
align-items （定义子项在交叉轴上的对齐方式）
align-content （定义多根轴线时的轴线对齐方式，只有一根轴线时，设置无效）

以上6个属性，一般常用的我加粗了，其他的少用

项目（子元素）

order （定义子元素的排序，数值越小越靠前）
flex-grow （定义子元素在容器还有剩余空间时的放大比例，默认为0，即不放大）
flex-shrink（与grow相反，定义子元素在容器没有剩余空间时的缩小比例，默认为1，即所有子元素缩小一样）
flex-basis （设置子项伸缩基准值）
flex （flex-grow、flex-shrink、flex-basis的缩写）
align-self （允许当前项设置 align-items 并覆盖父元素的设置）

本章小结

好嘞，这章节主要就是有个大概的印象，flex能做什么，flex大概有哪些属性，下一章节讲详细讲述 66大顺 的属性含义。如有不对之处欢迎评论区指正，谢谢~

自适应布局之初识flex（一）｜8月更文挑战

自适应布局之初识flex

初识flex

案例一

案例二

案例三

定义

容器（父元素）

项目（子元素）

本章小结