移动web开发(3)之flex弹性布局

y191024

发布于 2022-09-20 19:48:17

8450

发布于 2022-09-20 19:48:17

文章被收录于专栏：睡不着所以学编程睡不着所以学编程

终于学到弹性盒子了呜呜呜,但是感觉内容也好多!!!

移动web开发之flex布局

建议:

如果是PC端页面布局,我们还是传统布局
如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局.

例子:

过去我们要在一个大盒子里面放三个这样的盒子,都是用的浮动,但是学习了弹性flex布局,我们可以更简单的做出来,为了凸显它的优势,用的还是行内元素span,只要用了flex,行内元素也可以直接设置大小.

只需要在父元素的样式中添加一行:

display:flex;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 80%;
            height: 400px;
            background-color: pink;
        }
        span {
            color: #fff;
            width: 300px;
            height: 300px;
            /* margin: 5px; */
            background-color: purple;
        }
</style>
</head>

<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

还可以实现很多其他的效果,比如

            justify-content: space-around;

就能让盒子以其他的方式排列.

布局原理

flex是flexible box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局.

当我们为父盒子设为flex布局以后,子元素的float/clear/vertical-align属性将失效.
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局.

采用flex布局的元素,称为flex容器(flex container),简称"容器",它的所有子元素自动成为容器成员,称为flex项目,简称"项目".

例子中的div就是容器,flex父容器.
例子中span就是子容器flex项目.
子容器可以横向排列也可以纵向排列.

总结flex布局原理:

就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式.

01

父项常见属性

flex-direction:设置主轴方向.
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素的排列方式(单行)
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap

太懒了我就不打字了,直接上图片吧.

注意:

默认的主轴是x轴,行,row,那么剩下的侧轴就必然是y轴啦
我们的元素是根据主轴排列的

根据我们以往的经验,当几个盒子浮动排列在一行时,盒子一行挤不下的时候会掉下去,但是flex布局就不一样了.

现在这是一个即将被塞满的大盒子,我们再往里面放一个盒子,看看会发生什么现象呢.

很明显,他给我们硬塞在一行上去了,原先的盒子的大小也被强行改变了.

于是就引出了下一个知识点.

那我们能不能垂直居中,又水平居中呢?

其实我们只要两步:让盒子在主轴上水平居中,又让盒子在侧轴垂直居中就可以实现啦.

做出来的效果:

但是也有主侧轴的问题,假如我设置的主轴是y轴,再让侧轴居中,出来的效果就是:

但是这个属性只适用于单行文本.

align-items和align-content的区别

align-items适用于单行情况下,只有上对齐,下对齐,居中和拉伸.
align-content适用于换行(多行)的情况下(单行时无效),可以设置上对齐,下对齐,居中,拉伸以及平均分配剩余空间等属性值.
总结就是单行找align-items,多行找align-content.

02

子项常见属性

flex子项目占的份数
align-self控制子项在自己侧轴的排列方式.
order属性定义子项的排列顺序(前后顺序)

flex属性定义子项目分配剩余空间,用flex来表示占多少份数.

.items {

flex:<number>;(默认为0)

}

圣杯布局:

圣杯布局就是三列模式,两边的盒子定宽,贴在两侧,中间自适应.

http://mpvideo.qpic.cn/0bf2gmaakaaakiahzysbybqvam6dauzqabia.f10003.mp4?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 80%;
            background-color: pink;
            height: 150px;
            margin: 0 auto;
        }

        .one {
            height: 150px;
            background-color: purple;
            width: 100px;
        }

        .two {
            background-color: chartreuse;
            height: 100px;
            flex: 1;
            margin-top: 25px;
        }

        .three {
            width: 100px;
            height: 150px;
            background-color: blue;
        }
</style>
</head>
<body>
    <section>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </section>
</body>
</html>

有了这个功能,还能实现很多的效果.

比如一个盒子让三个小盒子平分,以往我们就要使用百分比33.33%,非常麻烦的,现在就只要一行代码即可.

先不给子盒子设置宽度,让他们各占一份空白空间: