弹性盒子(flex)

最新推荐文章于 2023-06-01 08:05:18 发布
最新推荐文章于 2023-06-01 08:05:18 发布
阅读量1.1k 收藏 7
点赞数 1
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Han_Zhou_Z/article/details/120911370
版权

目录

一、常用的弹性盒子的属性

1、flex容器

2、flex项目

3、排列方向

4、flex容器的属性

5、 项目属性（itme）

6、圣杯布局

 7、CSS中的长度单位

二、HTML5中的多媒体标签的使用

1、视频文件的格式

2、视频标签的用法

3、音频格式文件

4、页面中嵌入多媒体文件的方式

5、滚动标签

一、常用的弹性盒子的属性

1、flex容器

采用flex布局的块级标签（div）

2、flex项目

采用flex布局的块级标签的子元素

3、排列方向

direction，flex容器的布局方向

4、flex容器的属性

（1）flex-direction：布局方向

         取值有：row：默认值，主轴水平方向（水平布局），起点在左端

                        row-reverse：主轴为水平方向（水平布局），起点在右端

                        column：主轴为垂直方向（垂直布局），起点在上沿

                        column-reverse：主轴为垂直方向（垂直布局），起点在下沿

<style>
    .c1{
        width: 800px;
        height: 200px;
        background-color: aquamarine;
        display: flex;
        flex-direction: row-reverse;
    }
    .c3{
        width: 200px;
        height: 200px;
        background-color: rgb(218, 170, 81);
    }
    .c4{
        width: 200px;
        height: 200px;
        background-color: rgb(240, 227, 157);
    }
</style>
<body>
    <div class="c1">
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
</body>
</html>

 

 

（2）flex-wrap：环绕效果

         取值有：nowrap：默认值，表示不换行

                       wrap:换行

                       wrap-reverse：换行，第一行在下一方

<style>
    .c1{
        width: 800px;
        height: 200px;
        background-color: aquamarine;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }
    .c3{
        width: 200px;
        height: 200px;
        background-color: rgb(218, 170, 81);
    }
    .c4{
        width: 200px;
        height: 200px;
        background-color: rgb(240, 227, 157);
    }
</style>
<body>
    <div class="c1">
        <div class="c3">1</div>
        <div class="c4">2</div>
        <div class="c3">3</div>
        <div class="c4">4</div>
        <div class="c4">5</div>
        <div class="c3">6</div>
        <div class="c4">7</div>
    </div>
</body>
</html>

 

 

（3）justify-content：对齐方式

         取值有：flex-start：默认值，左对齐

                       flex-end：右对齐

                       center：居中

                       space-between：两端对齐，项目之间的间隔相等

                       space-around：项目两侧的间距相同，项目之间的间距比两侧的间距大一倍

<style>
    .c1{
        width: 800px;
        height: 200px;
        background-color: aquamarine;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    .c3{
        width: 200px;
        height: 200px;
        background-color: rgb(218, 170, 81);
    }
    .c4{
        width: 200px;
        height: 200px;
        background-color: rgb(240, 227, 157);
    }
</style>
<body>
    <div class="c1">
        <div class="c3">1</div>
        <div class="c4">2</div>
        <div class="c3">3</div>
    </div>
</body>
</html>

 

 

（4）align-items：属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

          取值有：stretch：默认值。元素被拉伸以适应容器

                         center：元素位于容器的中心

                         flex-start：元素位于容器的开头

                         flex-end：元素位于容器的结尾

<style>
    .c1{
        width: 800px;
        height: 800px;
        background-color: aquamarine;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;
    }
    .c3{
        width: 200px;
        height: 200px;
        background-color: rgb(218, 170, 81);
    }
    .c4{
        width: 200px;
        height: 200px;
        background-color: rgb(240, 227, 157);
    }
</style>
<body>
    <div class="c1">
        <div class="c3">1</div>
        <div class="c4">2</div>
        <div class="c3">3</div>
    </div>
</body>
</html>

 

5、 项目属性（itme）

（1）order：项目的排列顺序，数字越小排列越靠前

（2）flex-grow：设置项目放大比例

（3）flex-shrink：设置项目的缩小比例

相较于原尺寸进行缩放

6、圣杯布局

经典的网页布局

<style>
    .body{
        display: flex;
        flex: 1;
        /* flex-direction: column;*/
    } 
    header,footer{
        flex: 1;
        background-color: darkgrey;
        text-align: center;
        line-height: 11vh;
    }
    .center{
        flex: 1;
        background-color: bisque;
        text-align: center;
        line-height: 75vh;
    }
    .nav,.ads{
        flex: 0 0 12em;
        height: 75vh;
    }
    .nav{
        order: -1;
        background-color: burlywood;
        text-align: center;
        line-height: 75vh;
    }
    .ads{
        background-color:ghostwhite;
        text-align: center;
        line-height: 75vh;
    }
</style>
<body>
    <header>#header</header>
    <div class="body">
        <div class="center">#center</div>
        <div class="nav">#side</div>
        <div class="ads">#right</div>
    </div>
    <footer>#footer</footer>
</body>
</html>

 7、CSS中的长度单位

in：英寸

cm：厘米

mm：毫米

px：像素点，相对长度单位，相对于计算机屏幕分辨率

em：相对长度单位，相对于当前对象内文本的字体尺寸，浏览器默认的相对字体高度为16em

         12px=0.75em    10px=0.625em

pt：磅（1pt=1/72in）

（1）vw、vh、vmin、vmax：是视窗（viewport）单位，是相对单位，由视窗大小决定。1个单位类似于1%

        a、vw：视窗宽度的百分比（1vm=视窗宽度的1%）

        b、vh：视窗高度的百分比

        c、vmin：表示vm、vh中的较小的一个值

        d、vmax：表示vm、vh中的较大的一个值

（2）vw、vh和%的区别

        a、%是相对于父元素的大小而设定的比例，vw、wh是由视窗的大小来决定

        b、vw、vh可以直接获取视窗的宽度和高度，%在设置时要根据body的高度的情况，往往无法正确的获取实际宽度或高度

（3）vmin、vmax的用处：

在开发移动页面时，使用vw、wh来设置字体的大小，在竖屏、横屏状态下显示的字体大小不一样，由于vmin、vmax是当前较小或较大的，用来设置字体可以保证在竖屏、横屏状态下字体大小一样

二、HTML5中的多媒体标签的使用

1、视频文件的格式

（1）.MP4：mpeg-4

（2）webM

（3）ogg

2、视频标签的用法

<video src="视频文件全名" controls="controls"/>

 属性包含

autoplay是否自动播放
loop循环播放
preload表示视频文件和页面同时加载，与autoplay属性是互斥的
poster在视频文件缓冲时显示的图像

3、音频格式文件

（1）MP3

（2）wav

（3）ogg

<audio src="音频文件全名" controls></audio>

4、页面中嵌入多媒体文件的方式

（1）来自本地的多媒体文件

（2）来自网络上的多媒体文件

5、滚动标签

（1）文字滚动：

<marquee direction="滚动方向" behavior="滚动方式" scrollmount="滚动速度">文字</marquee>

direction属性的取值：

left默认值，向左滚动
right向右滚动
up向上滚动
down向下滚动

behavior属性的取值：

scroll默认值，循环滚动
slide只滚动一次，不重复滚动
width、heigth设置滚动范围

（2）图片的滚动

<marquee direction="滚动方向" behavior="滚动方式" scrollmount="滚动速度">
       <img src=""/>
</marquee>

Han_Zhou_Z
关注
flex 字体自动放大缩小例子
12-03
flex 字体自动放大缩小例子，flex 字体自动放大缩小例子，flex 字体自动放大缩小例子
flex布局
weixin_44852765的博客
04-08 416
-flex-direction：设置主轴的方向 row (默认值)从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上 - justify-content：设置主轴上的子元素排列方式 flex-start 从头部开始 flex-end 从尾部开始 center 居中显示 space-around 平分剩余空间 space-...
【大屏可视化】flex布局下的自适应字体调整
艺术就是爆炸!
05-16 1233
flex布局
flex伸缩布局
grow_的博客
05-16 1048
1.父项属性 display:flex; //flexb布局 flex-direction:row;//设置主轴的方向 2.justify-content 设置主轴上子元素的排列 flex-start //开头 flex-end //结尾 center//居中 space-around //平均分配 space-between //两端贴，中间平均分配 3.flex-wrap 强制换行 默认情况下，使用flex后，元素总是在一行显示，当元素的大小超出范围后，会缩小其他的子元素 flex-
flex中设置字体样式
weixin_34309543的博客
04-18 468
下面就把flex设置字体的方法大体列举几种，以供参考。 　　1.　　　　　　 引用外部字体库的方法： 双击代码全选 1 2 3 4 5 6 7 @font-face 　 {　 　 　　　　font-family:FZHY;//这个名字可以随便设置 　　　　src...
FlexBox-01 布局模型
woaini705的专栏
03-13 644
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束
css3弹性盒子flex实现三栏布局的实现
01-22
弹性盒子本身就是并排的，我们设置宽度即可。 用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex...
CSS弹性盒子.docx
02-29
首先，要创建一个弹性盒子，需要设置容器的`display`属性为`flex`或`inline-flex`。这将使得容器成为弹性容器，其内部的子元素称为弹性子元素。弹性盒子默认情况下会将子元素在一行内按顺序排列。 `flex-direction`...
JS Web Flex弹性盒子模型代码实例
10-15
JavaScript Web中的Flex弹性盒子模型（Flexbox）是一种强大的布局模式，它使得在不同屏幕尺寸和设备上创建响应式和灵活的网页布局变得简单。在Web开发中，Flexbox解决了传统CSS布局方式（如浮动和定位）无法完美解决...
flex多行布局弹性盒子
03-05
以上就是关于“flex多行布局弹性盒子”的核心知识点，它提供了强大的灵活性和控制力，让开发者能够创建出适应各种场景的网页布局。通过深入理解和熟练运用这些属性，可以极大地提升网页设计的效率和用户体验。
flex弹性盒子布局实例
11-08
3. 弹性项目（Flex Items）：flex容器的子元素，沿主轴排列。 二、Flexbox关键属性 1. `flex-direction`：定义主轴的方向，可设置为`row`（默认，从左到右）、`row-reverse`（从右到左）、`column`（从上到下）或`...
web学习：CSS实现Flex布局和Float布局并且框架和字体实现自适应
qq_43717065的博客
07-26 460
要求： CSS实现Flex布局和Float布局并且框架和字体实现自适应，以及实现鼠标悬停效果 知识要点： Flex布局： HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flex+响应式</title> <link rel="stylesheet" type="text/css" href="CSS
文本超过两行后，自动缩小字号
tianming2018的博客
06-01 1065
文本超过两行后，自动缩小字号
基础巩固 - flex宽度为内容宽度
hhzzcc_的博客
07-04 7706
当设置标签display:flex则默认标签具有display:block的特性，宽度会根据父元素而撑满，如下 <divclass="box-parent"> <div class="box">box</div></div> .box-parent{ width: 300px;} .box {display:flex; background: #fff;} 上面代码中box设置flex布局，宽度默认和父元素一样为300px...
Flex/AS 文字自适应大小
寂寞城管的专栏
12-17 837
<br />转自 http://hi.baidu.com/ouyang80/blog/item/777309fd7178661309244da8.html<br /> <br />这是我从一个老外程序里调出来的， 但是有一个缺陷， 当文字个数小于 2 个时， 字体太大， 反而不能自适应了， 请各位看官支招<br /><br /><br /><?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adob
Flex弹性容器
SAH10的博客
06-24 412
Flex弹性容器
Web前端开发之CSS学习笔记9—弹性盒布局
qq_45709187的博客
06-04 1320
目录弹性盒子布局1.生成弹性盒子（1）display:flex弹性盒布局（2）display:inline-flex内联块级弹性盒布局2.flex-wrap换行（1）flex-wrap:wrap换行（2） flex-wrap:wrap-reverse换行并反向排序3.flex-direction元素排列方向（1）flex-direction: column垂直排序（2）flex-direction:column-reverse垂直反向排序（3）flex-direction: column导航栏横纵变换4.f
css盒子模型_两小时学会CSS-弹性盒子模型
weixin_39921504的博客
11-20 136
弹性盒子模型布局的传统解决方案，基于盒状模型，依赖display 属性+ position 属性+ float属性。它对于那些特殊布局非常不方便 垂直居中等。 Flex 简便 、完整 、响应式 实现各种页面布局。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。...
简述弹性盒子 flex 布局及 rem 布局？
最新发布
12-08
弹性盒子（Flexbox）布局是一种用于页面布局的新模式，它可以使容器中的子元素能够以弹性的方式进行布局和对齐。Flexbox 布局的主要思想是让容器有能力改变子元素的宽度、高度和顺序，以最佳方式填充可用空间。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值