初识flex布局

超级超bug

已于 2022-10-07 21:52:48 修改

阅读量187

点赞数 3

文章标签：前端 html

于 2022-10-07 21:50:33 首次发布

本文链接：https://blog.csdn.net/wzfnba/article/details/127199467

版权

1.视口

在进入我们flex之前我们先来了解一下视口, 视口从字面意思来看即自己视线所看到的网页窗口大小.

1.1 视口分类

1 布局视口:刚开始写网页是给的网页宽度即你想给用户看到的网页大小

2 视觉视口,设备实际的宽度即用户设备所能看到的网页大小

3 理想视口:网页宽度=设备宽度. 设备的窗口宽度刚好能容下整个网页减少用户操作

那我们在进行移动端开发时就需要我们进行视口的适配.可通过meta name="viewport" 进行视口的调整

2 flex布局

flex 弹性布局之前我们调整盒子需要用浮动定位跟margin来调整盒子的位置, 但是通过弹性布局可实现快速布局

弹性布局由4部分组成:弹性容器弹性盒子主轴侧轴四部分组成

弹性容器:容器即存放盒子的区域实现弹性布局我们需要下方代码

display: flex;

通过上述代码我们将我们的父级变成弹性盒子相应的子级就是弹性盒子 ***此代码是添加给父元素***

主轴:默认为水平方向可通过以下来改变盒子在水平方向的布局

/* 从左到右,起点开始排列盒子 */

justify-content: flex-start;

/* 从右到左,终点开始排列盒子 */

justify-content: flex-end;

/* 盒子水平居中重点*/

justify-content: center;

/* 2边靠边,中间自适应重点*/

justify-content: space-between;

/* 盒子自适应,按照1边2的比列平均分 */

justify-content: space-around;

/* 盒子自适应,盒子中间的距离1:1平均分 */

justify-content: space-evenly;

侧轴:默认是垂直方向通过一下代码实现垂直方向布局

/* 从上往下排列盒子 */

align-items: flex-start;

/* 从下往上排列盒子 */

align-items: flex-end;

/* 垂直盒子居中重点 */

align-items: center;

/* 默认值拉伸*/

align-items: stretch;

3.伸缩比

父元素添加flex 成为弹性容器后我们可以给相应的子元素分派所占的比例,给相应的子元素添加flex:2; 2为这个子元素在父元素中所占的比例代码如下:

<!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 {
            width: 1010px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;
            /* 弹性容器 */
            display: flex;
        }

        /* 弹性盒子 */
        .box div {
            /* 伸缩比 */
            flex: 4;
            height: 100%;
            margin-right: 10px;
            background-color: aqua;
        }

        .box div:nth-child(2n) {
            flex: 2;
            background-color: yellowgreen;
        }

        /* 注意点: 
        1.设置伸缩比生效宽度不生效
        2.伸缩比给子元素设置
        3.伸缩比占的位置是父元素的位置
        */
    </style>
</head>

<body>
    <!-- 伸缩比:划分子盒子比列,占的父元素的大小 -->
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

最后实现:

4.圣杯布局

在flex布局中常用的即为圣杯布局.常见的网站我们会发现页面中部分盒子会根据页面大小自动实现缩放效果,以我们常用的京东为例

其中1 2我们给固定的宽高 , 剩下的部分我们可以全部给flex:1; 即剩下的部分全部给到搜索框, 其中1 2是固定的宽高缩放页面不会发生变化,但是中间搜索框会根据页面的大小自动进行伸缩.

相似代码可观看下方:

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 50px;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
            /* 盒子最小宽度不能小于500px */
            min-width: 500px;
        }

        /* 弹性容器 */
        .box .left,
        .box .right {
            width: 50px;
            height: 50px;
            background-color: aqua;
        }

        .box .center {
            /* 平分父盒子多余的宽度 */
            flex: 1;
            height: 50px;
            background-color: red;
        }
    </style>
    <!-- 圣杯布局:2边盒子要固定,中间盒子自适应 -->
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>