弹性盒模型和案例布局

最新推荐文章于 2024-02-27 16:51:47 发布
最新推荐文章于 2024-02-27 16:51:47 发布
阅读量661 收藏 8
点赞数 1
分类专栏： HTML 文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42681295/article/details/106575279
版权

怪异盒模型：

box-sizing：

属性值：

  • content-box；（标准盒模型）
  • border-box；（怪异盒模型）

怪异盒模型特点：
padding和border不会对盒子大小产生影响
所添加padding和border在宽高内部。

弹性盒模型：布局方法

作用：弹性盒控制子元素(不包括孙子辈元素)的布局方法。
特点：

  • a: 弹性盒默认情况下，子元素沿着“主轴”排列，默认情况下X轴为主轴
  • b: 弹性盒的子元素称作“ 灵活元素 ”，所有的子元素都能设置宽高（注：内联元素也可以）
  • c: 如果一个子元素在弹性盒子里面左右上下居中，只需要给子元素添加margin:auto;（注意子元素为单个才可以，如果多个子元素的话不行）

1: 触发弹性盒( 添加在父元素上面 )
display:flex;

2: 改变主轴的方向( 添加在父元素上面 )
flex-direction:
属性值：

  • row X轴为主轴
  • column Y轴为主轴
  • row-reverse X轴为主轴并反向排列
  • column-reverse Y轴为主轴并反向排列

3: 主轴的对齐方式( 添加在父元素上面 )
justify-content:
属性值：

  • flex-start 弹性盒开始位置对齐
  • flex-end 弹性盒结束位置对齐
  • center 居中对齐
  • space-between 两端对齐
  • space-around 自动对齐，多余的空间分平分到元素的两侧
  • space-evenly:自动对齐，多余的空间平均分配到元素的两侧，元素与元素之间的距离不会去叠加
    在这里插入图片描述
    在这里插入图片描述

4: 侧轴对齐方式（ 添加在父元素上面 ）
align-items:
属性值：

  • flex-start 侧轴开始的位置
  • flex-end 侧轴结束的位置
  • center 侧轴中间
  • baseline 和 flex-start 等效
  • stretch（默认值） 拉伸

5: 是否让子元素超出的时候换行（弹性盒子元素默认不会换行（在主轴挤压））

flex-wrap:
属性值：

  • nowrap 不换行挤压
  • wrap 换行
  • wrap-reverse 反向换行

6: 控制行与行之间的间距（ 添加在父元素上面 ）（注：必须多行才可以有效果）
align-content：
属性值：

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

7: flex-flow: （ 添加在父元素上面 ）
flex-direction 和 flex-wrap的简写;

其中：
flex-direction ： 改变主轴的方向
flex-wrap ：是否让子元素超出的时候换行

eg： flex-flow:column wrap Y轴排列并且换行;

添加在子元素上面的属性：

8: 控制某一个子元素在侧轴的对齐方式
align-self:
属性值：

  • auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”
  • stretch 元素被拉伸以适应容器。
  • center 元素位于容器的中心。
  • flex-start 元素位于容器的开头。
  • flex-end 元素位于容器的结尾。

注意：auto属性，如果父元素有 align-items，那么auto的值就为 父元素align-items的属性值，如果父元素没有 align-items 属性 auto的值就为 stretch

9: 控制子元素的先后排列顺序
order：
属性值是一个数字，数字越大越往后排列，能接收负数。
默认为：0
比如 order：1；

10：剩余空间的分配：
复合属性，设置或检索弹性盒模型对象的子元素如何分配空间，分配空间是分配主轴上的空间；
flex:1; ( 把剩余空间全部分配给当前元素 ) 或者（平均分配）

flex-shrink:0; 子元素不在主轴挤压

flex的三兄弟:

  • flex-grow
    一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
  • flex-shrink
    一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
  • flex-basis
    项目的长度
    flex-grow 说明：
 <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul,
        li {
            list-style: none;
        }
        ul {
            width: 500px;
            height: 400px;
            border: 2px solid green;
            display: flex;
        }

        /* 
            flex 值之和 为 4，把父元素空间份为 4份
            第一个li占据 2份
            第二个和第三个各占据2fen
         */
        /* 设置子元素占据父元素的比份 */
        /* ul li:nth-child(1) {
            flex: 2;
        }

        ul li:nth-child(2) {
            flex: 1;
        }

        ul li:nth-child(3) {
            flex: 1;
        } */
        ul li {
            /* 父元素剩余空间还有 200px */
            width: 100px;
            background: pink;
        }

        ul li:nth-child(1) {
            /* flex-grow 把父元素的剩余空间平分 4份， */
            /* 占据剩余空间的 1份 */
            flex-grow: 1;
        }

        ul li:nth-child(2) {
            /* 占据剩余空间的 3份 */
            flex-grow: 3;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

在这里插入图片描述
flex-basis 和flex- shrink 说明：

 <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul,
        li {
            list-style: none;
        }

        ul {
            display: flex;
            width: 400px;
            height: 100px;
            border: 1px solid red;
            overflow: auto;
        }

        ul li {
            /* flex-basis 相当于给元素设置width ，当设置ul flex-basis之后，那么width的值没有效果 */
            flex-basis: 100px;
            width: 200px;/* 此处的width 没效果 */
            height: 100px;
            background: yellow;
            /* 设置子元素不被压缩 */
            flex-shrink: 0;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

在这里插入图片描述
如果不设置flex-shrink ：0的话、效果如下：

在这里插入图片描述

案例：骰子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        section{
            width:100%;
            height:100%;
            /* 触发弹性盒子 */
            display:flex;
            /* 主轴对齐方式 */
            justify-content:space-around;
            /* 侧轴居中 */
            align-items:center;
            /* 换行 */
            flex-wrap:wrap;
        }
        div{
            width: 100px;
            height: 100px;
            background: #e7e7e7;
            padding: 4px;
            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
            border-radius: 10px;
        }
        span{
            display:block;
            width: 24px;
            height: 24px;
            background: #333;
            box-shadow: inset 0 3px #111, inset 0 -3px #555;
            border-radius: 12px;
            margin: 4px;
        }
        p{
            background:red;
        }
        /* 第一个div */
            /* div:nth-child(1){
                display:flex;
            }
            div:nth-child(1) span{
                margin:auto;
            } */
        div:nth-child(1){
            display:flex;
            /* 主轴居中 */
            justify-content:center;
            /* 侧轴居中 */
            align-items:center;
        }

        /* 第二个div */
        div:nth-child(2){
            display:flex;
            /* 主轴两端对齐 */
            justify-content:space-between;
        }
        div:nth-child(2) span:nth-child(2){
            align-self:flex-end;
        }

        /* 第三个 */
        div:nth-child(3){
            display:flex;
            /* Y轴为主轴 */
            flex-direction:column;
            /* 主轴对齐 */
            justify-content:space-between;
        }
        div:nth-child(3) span:nth-child(2){
            align-self:center;
        }
        div:nth-child(3) span:nth-child(3){
            align-self:flex-end;
        }

        /* 第四个 */
        div:nth-child(4){
            display:flex;
            /* 主轴对齐方式 */
            justify-content:space-between;
        }
        div:nth-child(4) p{
            display:flex;
            /* 改变主轴方向 */
            flex-direction:column;
            /* 主轴两端对齐 */
            justify-content:space-between
        }

        /* 第五个 */
        div:nth-child(5){
            display:flex;
            justify-content:space-between;
        }
        div:nth-child(5) p{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        div:nth-child(5) p:nth-child(2){
            justify-content:center;
        }
    </style>
</head>
<body>
    <section>
        <div>
            <span></span>
        </div>
        <div>
            <span></span><span></span>
        </div>
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div>
            <p>
                <span></span><span></span><span></span>
            </p>
            <p>
                <span></span><span></span><span></span>
            </p>
        </div>
        <div>
            <p>
                <span></span><span></span>
            </p>
            <p><span></span></p>
            <p>
                <span></span><span></span>
            </p>
        </div>
        <div></div>
    </section>
</body>
</html>

效果图：
在这里插入图片描述

案例布局

案例：怪异盒——定位实现固定两栏布局

 <style>
        *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        header,footer{
            width:100%;
            height:40px;
            background:red;
            text-align:center;
            line-height:40px;
            color:#fff;
            /* 定位 */
            position:fixed;
        }
        header{
            top:0;
        }
        footer{
            bottom:0;
        }
        section{
            width:100%;
            height:100%;
            background:#ccc;
            padding:40px 0;
            box-sizing:border-box;
        }
        article{
            width:100%;
            height:100%;
            background:pink;
        }
    </style>
</head>
<body>
    <header>header</header>
    <section>
        <article></article>
    </section>
    <footer>footer</footer>
</body>

效果图：
在这里插入图片描述

案例：弹性盒——上下固定中间自适应布局&&圣杯布局

 <style>
        *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        div{
            width:100%;
            height:100%;
            background:#ccc;
            /* 触发弹性盒子 */
            display:flex;
            /* Y轴为主轴 */
            flex-direction:column;
        }
        header,footer{
            width:100%;
            height:88px;
            background:blue;
        }
        section{
            flex:1;
            background:orange;
            /* 触发弹性盒子 */
            display:flex;
        }
        nav{
            width:150px;
            height:100%;
            background:pink;
        }
        aside{
            width:150px;
            height:100%;
            background:purple;
            
        }
        main{
            flex:1;
            background:yellow;
        }
    </style>
</head>
<body>
    <div>
        <header>header</header>
        <section>
            <nav></nav>
            <main></main>
            <aside></aside>
        </section>
        <footer>footer</footer>
    </div>
</body>

效果图：
在这里插入图片描述

牛先森家的牛奶
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS—弹性盒子布局（一看就懂）
张浔CSDN
10-31 2521
文章目录（PS：觉得不错请点赞收藏支持一下）一、布局之间的关系二、`flex` 布局2.1 `flex` 布局是什么2.2 基本概念2.3 容器的属性2.3.1 `flex-direction`属性2.3.2 `flex-wrap`属性2.3.3 `flex-flow` 属性2.3.4 `justify-content` 属性2.3.5 `align-items`属性2.3.6 `align-content` 属性2.4 项目的属性2.4.1 `order` 属性2.4.2 `flex-grow`属性2.4
弹性盒模型_百度周边.rar
09-01
弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同...引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
超详细的flex弹性布局+实例分析
xw1193195009的博客
04-11 9532
1.基本概念 什么是flex？ flex全称是FlexibleBox，即弹性盒子，用来进行弹性布局，弹性布局也是目前前端应用最广的布局之一。 flex布局的优点，为什么要用flex布局？ 1.可以为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 2.更加符合响应式设计的特点，方便页面在不同设备上的布局显示。 主要概念介绍 main axis：主轴，如果内部元素是横向排列的，那么此时x轴是主轴，如果内部元素是纵向排列的，则主轴为y轴。 cross axis：交叉轴，与主轴垂直的轴
弹性盒子布局实例详解：从水平布局到垂直布局
最新发布
weixin_43578304的博客
02-27 1422
在CSS中，弹性盒子布局（Flexbox）提供了一种在容器内高效、灵活地对齐和分布空间的方式。无论是水平布局还是垂直布局，Flexbox都能轻松应对。下面我们将通过几个实例来详细讲解如何在水平和垂直方向上应用Flexbox布局。
CSS day12 移动端布局练习
qq_34620296的博客
09-13 721
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
runsong911的博客
05-14 2681
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
css3弹性盒模型（Flexbox）详细介绍
09-25
CSS3的弹性盒模型，又称为Flexbox，是一种强大的布局工具，它允许开发者轻松地创建响应式和动态的布局，特别是在处理复杂的垂直和水平对齐问题时。Flexbox的主要目标是提供一种更灵活的方式来控制元素在容器内的排列...
移动端页面（弹性盒模型布局）
08-23
在移动端页面设计中，弹性盒模型布局（Flexbox Layout）是一种强大的工具，它极大地简化了复杂的多列布局问题。此布局模式允许元素在容器中灵活地调整大小和位置，无论屏幕尺寸如何变化，都能保持良好的视觉效果。在...
弹性盒案例支付宝首页源码
08-05
弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应...引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
flex弹性盒子布局实例
11-08
Flexbox，全称为Flexible Box，是CSS3引入的一种布局模型，专为解决复杂的网页布局问题而设计，尤其在处理响应式设计和动态内容时表现出强大的灵活性。本实例将深入探讨Flexbox布局的基本概念、属性以及如何在实际...
CSS Flex 弹性盒布局详解
weixin_44196299的博客
08-05 1109
弹性盒布局又称“flex”布局，是在CSS3中的一种新布局方式，可以简洁、方便、响应式地实现各种页面布局，因此自一提出受到了极大地追捧，目前也得到了各大主流浏览器的支持，因此迅速替代了之前的“display+float+position”的布局形式。 一、弹性盒布局简介 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display ...
弹性盒子布局
weixin_33739627的博客
09-26 134
2019独角兽企业重金招聘Python工程师标准>>> ...
css3-flex块级元素弹性布局
muzidigbig的博客
06-06 5581
Flexbox 是 flexible box 的简称（意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大...
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 11万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
flex布局（弹性盒子二）
m0_72959685的博客
08-24 1387
意思是设置了属性值为space-start后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，且每个子元素盒子与父元素之间都有一定的空隙。意思是设置属性值为space-around后，三个盒子分别排列在父元素盒子的左 右 中间，且两边盒子与父元素两边有较大空隙。意思是设置了属性值为space-start后，子元素盒子在父元素最中间左上，左中、左下，中上、中中、中下......排列，意思是设置属性值为 flex-end后，盒子从右向左排列在父元素盒子中，开始位置在最右最上边。
Flex弹性盒子布局
AHua~
05-18 135
参数总表
上下左右居中（flex和绝对定位）
曾小超的博客
02-29 3075
就几行代码搞定上下左右居中，而且现在弹性盒子也兼容几乎所有的浏览器。 100vw：是指手机的宽度分成100份，适配移动端；100vh同理。 justify-content：center；主轴居中对齐； align-items：center；交叉轴单行居中对齐； Flex布局不懂的，移步-->https://blog.csdn.net/weixin_42995083/article/...
flexbox 弹性盒布局和布局原理
言川的博客
05-03 2万+
flexbox 弹性盒布局和布局原理 最近开始做H5，发现flexbox用的超级广泛，找到了这么一篇文章，https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错，加上自己的一些测试和理解，就有了这一篇笔记。 新版的flexbox规范分两部分：一部分是container，一部分是 items。 flexbox是一整
html-css布局之弹性盒子布局
scootdao的博客
10-21 9747
学习资料：菜鸟教程； 简单介绍一下弹性盒子布局：父级盒子可以有多个子盒子，弹性盒子只定义了子元素如何布局，不影响盒子内外的渲染；在父级定义该父级为弹性盒子，父级内的子级盒子全在一行显示，影响只是布局，见代码： *{ margin: 0; padding: 0; } .big{ display: flex; } .big>di
弹性盒模型 实现自适应布局
04-20
对于问题“弹性盒模型实现自适应布局”，我可以回答。弹性盒模型是一种布局模式, 可以帮助我们创建灵活的布局，它主要用于解决传统布局存在的尺寸限制、排列限制等问题。通过设置弹性容器属性，我们可以轻松地实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值