HTML5 弹性盒模型

最新推荐文章于 2023-08-24 18:13:47 发布
最新推荐文章于 2023-08-24 18:13:47 发布
阅读量324 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cc200171/article/details/124460109
版权

弹性盒模型 Flexbox 移动端布局 响应式设计 CSS布局
关键词由CSDN通过智能技术生成

弹性盒模型

目的：

1、提供一种更加有效的方式来布置、对齐和分布在容器中间的各项内容，即使他们的大小 是未知的变化的

2、让容器有能力改变项目的宽和高，以填满可用空间

属性：

1.display:flex/display:inline-flex 适用于父类元素，声明要使用弹性盒模型

2.flex-direction 排列顺序 （写在父级css中，但是作用于父级）

值：row 横向 row-reverse 反横向 column 纵向 column-reverse 反纵向

3.flex-wrap 是否换行 （写在父级，作用于子级）

值：nowrap 不换行 wrap 换行 wrap-reverse 反转wrap排列

4.justify-content 检索弹性盒子在x轴方向上的对齐方式 （写在父级，作用于子级）

  值：flex-start 左对齐   flex-end 右对齐    center 居中   

         space-between 两端对齐居中     space-around等间分布

5.align-items 检索盒子在Y轴上的对齐方式    （写在父级，作用于子级）

   值：flex-start 置顶    flex-end 置底      center 垂直居中

           baseline 与基线对齐       strech 置顶+置底，高度受min-width与max-width制约

6.align-content 检索换行时对齐方式      （写在父级，作用于子级）

   值：flex-start 置顶     flex-end 置底      center 居中

          space-between 上下置顶+置底，中间居中      space-around 纵向平分空间，各行居中显示

7.order 排列顺序     （写在子级，值越小，排位越靠前）

8.flex-grow ：n   写在子级，按比例分配剩余空间

案例：去哪网

<!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>去哪网</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        .pc{
            display: none;
        }
        @media screen and (min-width: 760px){
            .pc{
                display: block;
                font-size: 40px;
                text-align: center;
            }
            .qn{
                display: none;
            }
        }
        body{
            padding-bottom: 53px;
        }
        .tabbar{
            height: 52px;
            width: 100%;
            border-top: 1px solid lightgray;
            background-color: #fff;
            position: fixed;
            bottom: 0;
            /* 弹性布局 */
            display: flex;
            /* 等间分布 */
            justify-content: space-around;
        }
        .tabbar a{
            display: block;
            width: 20%;
            height: 52px;
            /* background-color: gold; */
            text-align: center;
        }
        .tabbar a img{
            width: 20px;
            height: 20px;
        }
        .tabbar a p{
            font-size: 12px;
            height: 20px;
            line-height: 20px;
        }
        header{
            display: flex;
            flex-wrap: wrap;
        }
        header .item{
            width: 20%;
            text-align: center;
            margin-top: 10px;
        }
        header .item img{
            width: 30%;
        }
        main{
            overflow: hidden;
        }
        main .visit{
            height: 60px;
            line-height: 60px;
            font-size: 35px;
            font-weight: 900;
            margin-left: 40px;
            margin-top: 30px;
            /* background-color: gold; */
        }
        main .cube{
            height: 80px;
            /* background-color: pink; */
        }
        main .cube p{
            float: left;
            height: 60px;
            line-height: 60px;
            width: 200px;
            text-align: center;
            border: 1px solid #ebebeb;
            margin-top: 10px;
            margin-left: 30px;
            border-radius: 10px;
            font-size: 22px;
            color: #666;
        }
        main .cube p:nth-of-type(1){
            background-color: #00c0c8;
            color: #fff;
        }
        main .pics{
            display: flex;
            flex-wrap: wrap;
            /* height: 680px; */
        }
        main .pics .pic{
            width: 42%;
            /* height: 300px; */
            /* background-color: green; */
            /* background-image: url(../img/去哪网/pic/2.jpg); */
            background-size: contain;
            background-position: top center;
            background-repeat: no-repeat;
            overflow: hidden;
            /* border-radius: 10px; */
            margin-left: 5%;
            /* margin-top: 10px; */
        }
        main .pics .pic p:nth-of-type(1){
            color: #fff;
            height: 40px;
            line-height: 40px;
            font-size: 26px;
            font-weight: 540;
            margin-top: 93px;
            width: 80%;
            margin-left: 10%;
            text-align: center;
            background-color: rgba(0,0,0,.7);
        }
        main .pics .pic p:nth-of-type(2){
            color: gold;
            height: 36px;
            line-height: 36px;
            font-size: 24px;
            font-weight: 540;
            width: 80%;
            margin-left: 10%;
            text-align: center;
            background-color: rgba(0,0,0,.7);
        }
        main .pics .pic p:nth-of-type(3){
            height: 40px;
            line-height: 40px;
            font-size: 25px;
            margin-left: 10px;
            margin-top: 5px;
        }
        main .pics .pic p:nth-of-type(4){
            color: #ff7415;
            height: 60px;
            line-height: 60px;
            font-size: 36px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <p class="pc">请使用移动端打开</p>
    <div class="qn">

        <!-- 底部导航栏 -->
        <div class="tabbar">
            <a href="#">
                <img src="../img/去哪网/tab/quna.png" alt="">
                <p>首页</p>
            </a>
            <a href="#">
                <img src="../img/去哪网/tab/quna.png" alt="">
                <p>首页</p>
            </a>
            <a href="#">
                <img src="../img/去哪网/tab/quna.png" alt="">
                <p>首页</p>
            </a>
            <a href="#">
                <img src="../img/去哪网/tab/quna.png" alt="">
                <p>首页</p>
            </a>
        </div>

        <!-- 头部 -->
        <header>
            <div class="item">
                <img style="width: 50%;" src="../img/去哪网/icon/1.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img style="width: 50%;" src="../img/去哪网/icon/2.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img style="width: 50%;" src="../img/去哪网/icon/3.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img style="width: 50%;" src="../img/去哪网/icon/4.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img style="width: 50%;" src="../img/去哪网/icon/5.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/6.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/7.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/8.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/9.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/10.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/11.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/12.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/13.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/14.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/15.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/16.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/17.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/18.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/19.png" alt="">
                <p>酒店</p>
            </div>
            <div class="item">
                <img src="../img/去哪网/icon/20.png" alt="">
                <p>酒店</p>
            </div>
        </header>

        <main>
            <p class="visit">特惠度假</p>
            <div class="cube">
                <p>当季热门度假</p>
                <p>今日特惠度假</p>
            </div>
            <div class="pics" >
                <div style="background-image: url(../img/去哪网/pic/2.jpg);" class="pic">
                    <p>石家庄-稻城亚丁</p>
                    <p>5天跟团游</p>  
                    <p>含往返飞机票+4晚住宿</p>
                    <p>￥ 8924</p>
                </div>
                <div style="background-image: url(../img/去哪网/pic/1.jpg);" class="pic">
                    <p>石家庄-丽江</p>
                    <p>5天跟团游</p>  
                    <p>含往返飞机票+4晚住宿</p>
                    <p>￥ 4638</p>
                </div> 
                <div style="background-image: url(../img/去哪网/pic/3.jpg);" class="pic">
                    <p>石家庄-三亚</p>
                    <p>5天跟团游</p>  
                    <p>含往返飞机票+4晚住宿</p>
                    <p>￥ 2904</p>
                </div> 
                <div style="background-image: url(../img/去哪网/pic/4.jpg);" class="pic">
                    <p>石家庄-三沙</p>
                    <p>5天跟团游</p>  
                    <p>含往返飞机票+4晚住宿</p>
                    <p>￥ 17158</p>
                </div>   
            </div>
        </main>
    </div>
</body>
</html>

 

 

 

章鱼Cc_yoo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5+CSS3---弹性盒子模型
qq_45802159的博客
11-23 811
Flex 布局 Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box { display: flex; } 行内元素也可以使用 Flex 布局。 .box { display: inline-flex; } 注意，设为 Flex 布局以后，子元素的float、...
弹性盒模型
yoghurt&girl的博客
06-16 616
弹性盒子是CSS3的一种新的布局格式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。1、弹性容器2、弹性元素把父元素设置为弹性容器之后，那么他的直接子元素（注意只有子元素）就会自动变成弹性元素。弹性元素可以同时是弹性容器也是弹性元素。3、弹性盒子属性值inline-flex会让后面的内容与之在一行显示，但flex是独占一行1、flex-grow指定弹性元素的伸展的系数（写在子元素里面的）当父元素有多余的空间时，子元素如何伸展父元素和按照比例进行分配（默认
html5 弹性盒子
misma123的博客
02-26 271
弹性盒子
html5弹性盒子模型,推荐10款弹性盒子源码（收藏）
weixin_39955421的博客
06-10 336
为父容器添加display：flex/inline-flex 父容器可以使用的属性有：1.flex-direction：决定主轴的方向有四个属性值：row(默认值)：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。2.flex-wrap：如果一条轴线排不下，如何换行。...
h5css3弹性盒子
X W F
02-24 274
弹性盒子： 老：display：box； 新：display：flex； 方向：flex-direction： 横向正方向 row/横向反方向 row-reverse/纵向正方向 column/纵向反方向 column-reverse； 横向对齐方式:justify-content 左对齐：flex-start / 右对齐：flex-end / 居中对齐：center ...
HTML5 09_弹性盒子
iamts的博客
07-13 891
HTML5学习的第9个部分：弹性盒子
css3弹性盒模型（Flexbox）详细介绍
09-25
CSS3的弹性盒模型，又称为Flexbox，是一种强大的布局工具，它允许开发者轻松地创建响应式和动态的布局，特别是在处理复杂的垂直和水平对齐问题时。Flexbox的主要目标是提供一种更灵活的方式来控制元素在容器内的排列...
CSS3弹性盒模型开发笔记（三）
12-03
**CSS3弹性盒模型**，也称为Flexbox，是一种现代的布局模式，它允许开发者更加灵活地处理元素的排列和对齐方式，特别是在响应式设计中。本文将深入讲解两个关键属性：`box-pack` 和 `box-align`，以及它们在处理弹性...
14-弹性盒导航.html
09-04
1)弹性盒也叫伸缩布局盒模型 它是**<span>css3**引入的一种新的布局模式——**<span>flexbox**布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更...
css3弹性盒模型实例介绍
12-10
Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。使用该模型，...
移动端页面（弹性盒模型布局）
08-23
弹性盒模型布局的仿某宝个人中心页面，涉及rem，在线小图标的使用
H5C3 04-弹性盒子
最新发布
dcwal的博客
08-24 43
2. 容器的属性。
【web前端HTML5+CSS3】09CSS--layout（布局）之 flex （弹性盒）
weixin_58214412的博客
02-27 688
目录 1.弹性盒子简介 2.京东导航条练习 3.弹性容器上的样式 4.弹性元素上的样式 5.淘宝导航练习 6.像素 7.移动端像素 8.完美视口 9.vw单位 10.vw适配 11.移动端页面练习 12.媒体查询简介 13.响应式布局 14.美图手机练习
H5全栈实习day02：浮动、盒子模型、定位、弹性盒子
每天八杯水的博客
09-15 522
H5全栈实习day02：浮动、盒子模型、定位、弹性盒子
html弹性盒模型,CSS3 Flexbox属性与弹性盒模型
weixin_42551227的博客
06-07 184
简介CSS3新增的Flexible Box Layout(弹性盒模型布局方式)是CSS3规范中提出的一种新的布局方案。该布局方案提供了一种更加高效简单的方式来处理容器中的元素布局、对齐、空间分配等操作，即使容器中的元素尺寸未知(或者尺寸大小是动态的)也能工作得很好。目前CSS3提出的此种布局方式也被各大主流浏览器所支持，可以预见Flexbox Layout在未来将会被广泛使用。本文将详细的介绍该布...
用弹性盒子写可动态添加的导航栏
qq_37635519的博客
05-16 1169
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="styleshee...
4.H5C3 弹性盒子模型详细讲解
qq_69946766的博客
08-24 127
本篇文章详细讲解了flex布局属性和使用方法
CSS3弹性盒子
weixin_45681557的博客
10-03 102
columns,多列布局 复合属性，count列数，width宽度，保证宽度的情况实现列数，用一个。 字体列宽 -gap列宽 rule，缝隙线，不占内容，属性可拆分 span，标题跨一列或所有 1/all 盒模型 box-sizing:box-border ,box-content display:flex,弹性盒子，容器 子元素flex-g，项目，x默认主轴排列，y侧轴/交叉轴 等比缩放grow...
弹性盒子及导航栏小规模布局常用属性
weixin_58280614的博客
04-28 401
弹性盒子 一.弹性盒子的作用 弹性盒子让父级有能力改变子级的对齐，分布，以填满可用空间。 特点： 1.父级使用弹性盒子后，子级元素的布局将与自身方向属性无关。 2.适合小规模布局。 display：flex 写在父级，声明使用弹性盒子。 二、常用属性 1、flex-direction flex-direction:row flex-direction:row 使子级盒子横向排列 使子级盒子纵向排列 2、 flex-wrap 该属性会检索子级是否超出父级，如果超出则根据值
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值