3.移动端开发(弹性盒子flex)

最新推荐文章于 2023-07-17 22:34:40 发布

风无雨

最新推荐文章于 2023-07-17 22:34:40 发布

阅读量202

点赞数 2

分类专栏： # css 文章标签： html css 前端

本文链接：https://blog.csdn.net/wusandaofwy/article/details/125899083

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.设置视口

在进行移动端开发时使用meta标签设置视口宽度，制作适配不同设备宽度的网页;

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 视口,理想视口,网页宽度等于设备宽度
    解决浏览器移动端适配问题 -->

2.flex布局

2.1设置方式

父元素添加display: flex，子元素可以自动的挤压或拉伸

2.2作用

基于Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

Flex布局非常适合结构化布局

2.3组成部分
1.弹性容器
2.弹性盒子
3.主轴
4.侧轴/ 交叉轴

2.4主轴对齐方式

justify-content:对齐方式;

对齐方式有:

居中:center;

元素中间空白均匀分布:space-between;

盒子左右都有间距,盒子左右间距相同 ,两边间距为1,中间间距为2:sapce-around;

弹性盒子与容器之间间距相等,两边间距和盒子间间距相等: space-evenly;

<!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>
</head>
<style>
    .box {
        width: 1200px;
        height: 300px;
        margin: 100px auto;
        background-color: pink;
        /* 弹性容器 */
        display: flex;
        /* 主轴对齐方式 */
        /* 盒子主轴居中,弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 ,
        两边靠边,中间空白均分*/
        justify-content: space-between;
        /* 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧,
        盒子左右都有间距,盒子左右间距相同 ,两边间距为1,中间间距为2 */
        justify-content: space-around;
        /* 盒子主轴居中 */
        justify-content: center;
        /* 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 
        两边间距和盒子间间距相同*/
        justify-content: space-evenly;
    }

    .box>div {
        width: 250px;
        height: 200px;
        background-color: aqua;
    }

    .box>div:nth-child(2n+1) {
        background-color: green;

    }
</style>

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

</html>

2.5flex副轴对齐方式

align-items: center;副轴居中

<!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>
</head>
<style>
    .box {
        width: 1200px;
        height: 700px;
        margin: 100px auto;
        background-color: pink;
        /* 弹性容器 */
        display: flex;
        /* 侧轴对齐  子元素没设高的情况下默认和父元素高一致*/
        align-items: stretch;
        /* 从下边开始排列,终点开始排列 */
        align-items: flex-end;
        /* 侧轴居中  */
        align-items: center;
        
        justify-content: space-between;

    }

    .box>div {
        width: 250px;
        height: 200px;
        background-color: aquamarine;
        text-align: center;
        font-size: 80px;
        line-height: 200px;
    }

    .box>div:nth-child(2n+1) {
        background-color: aqua;

    }
</style>

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

</html>

2.6副轴子元素单独对齐

在子元素即弹性盒子中加align-self;对自身副轴对齐方式更改

align-self:flex-start;

起点开始依次排列;flex-start;默认

终点开始依次排列:flex-end;

沿侧轴居中排列:center;

默认值, 弹性盒子沿着主轴线被拉伸至铺满容器:stretch;

<!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: 600px;
            height: 600px;
            background-color: pink;
            display: flex;
            margin: 300px auto;
            justify-content: center;
        }

        .box>div {
            width: 200px;
            height: 200px;
            background-color: #000;
            /* border-radius: 50%; */
        }

        .box>div:nth-child(1) {
            align-self:flex-start;
            /* background-color: aqua ; */
            border-radius: 50%;

        }

        .box>div:nth-child(2) {
            align-self: center;
            background-color: aquamarine;
        }

        .box>div:nth-child(3) {
            align-self: flex-start;
            border-radius: 50%;

        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>

2.7伸缩比

使用flex属性修改弹性盒子伸缩比;

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{
            width: 1400px;
            height: 400px;
            background-color: pink;

            display: flex;
        }
        .box>div{
            /* 伸缩比,占的是父盒子的宽度,把他分成了等份
            flex:整数 */
            flex:1;
            background-color: aqua;

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

    </style>
</head>
<body>
    <div class="box">
        <div class="div">woshihezi</div>
        <div class="div">woshihezi</div>
        <div class="div">woshihezi</div>
        <div class="div">woshihezi</div>
        <div class="div">woshihezi</div>
    </div>
</body>
</html>

2.8圣杯布局

中间的盒子给一个伸缩比为1:flex:1;他会占用剩余父元素的宽;

<!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;
        }

        .search {
            width: 100%;
            height: 50px;
            display: flex;
            background-color: pink;
        }
        .search>div{
            text-align: center;
            line-height: 50px;
        }

        .left {
            height: 50px;
            width: 50px;
            align-items: flex-start;
            background-color: blue;
        }
        .center{
            flex:1;
            background-color: yellow;
        }

        .right {
            height: 50px;
            width: 50px;
            align-items: flex-end;
            background-color: blue;
        }
    </style>
</head>

<body>
    <!-- 圣杯布局:两边固定宽高,中间自适应 -->
    <div class="search">
        <div class="left">
            左边
        </div>
        <div class="center">中间</div>
        <div class="right">
            右边
        </div>
    </div>
</body>

</html>