HTML基础第六课（冲浪笔记6）

最新推荐文章于 2024-06-02 15:15:42 发布
最新推荐文章于 2024-06-02 15:15:42 发布
阅读量382 收藏 3
点赞数 6
分类专栏： 前端开发 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51478745/article/details/125712554
版权

今天的主题只有一个，那就是Flex布局！！！

一、简单使用display: 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;
        }
        .box{
            width: 500px;
            height: 500px;
            border: 10px solid blue;
            margin: auto;
        }
        .item1,.item2,.item3{/* 同时设置多个标签相同属性 */
            height: 100px;
            width: 100px;
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: yellow;
        }
        .item3{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

 2、display: 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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            border: 10px solid blue;
            margin: auto;
        }
        .item1,.item2,.item3{/* 同时设置多个标签相同属性 */
            height: 100px;
            width: 100px;
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: yellow;
        }
        .item3{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

二、排列方向flex-direction

1、flex-direction: row; 默认从左到右

2、flex-direction: row-reverse; 从右到左

3、flex-direction: column; 从上到下

4、flex-direction: column-reverse; 从下到上

<!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: 500px;
            height: 500px;
            border: 10px solid blue;
            margin: auto;
            display: flex;
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            flex-direction: column-reverse;
        }
        .item1,.item2,.item3{/* 同时设置多个标签相同属性 */
            height: 100px;
            width: 100px;
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: yellow;
        }
        .item3{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

三、换行 flex-wrap

1、flex-wrap: nowrap; 当内容过多，会自动缩小内容，不会自动换行（默认不换行）

2、flex-wrap: wrap; 换行

3、flex-wrap: wrap-reverse; 反向换行

4、换行也放不下时就会溢出

<!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: 500px;
            height: 500px;
            border: 10px solid blue;
            margin: auto;
            display: flex;
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;
            /* flex-wrap: wrap-reverse; */
        }
        .item1,.item2,.item3{/* 同时设置多个标签相同属性 */
            height: 100px;
            width: 100px;
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: yellow;
        }
        .item3{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

四、 主轴

1、x轴justify-content

（1）justify-content: flex-start; 默认x轴起点为开头

（2）justify-content: flex-end; x轴结尾为开头

注意：区别于flex-direction: row-reverse; 的排列顺序（色块摆放顺序的不同）

<!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: 500px;
            height: 500px;
            border: 10px solid blue;
            margin: auto;
            display: flex;
            /* flex-direction: row-reverse; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-around; */
            /* justify-content: space-between; */
            justify-content: space-evenly;
        }
        .item1,.item2,.item3{/* 同时设置多个标签相同属性 */
            height: 100px;
            width: 100px;
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: yellow;
        }
        .item3{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

①justify-content: flex-end;

② flex-direction: row-reverse;

（3）justify-content: center; 居中

（4）justify-content: space-around; 中间缝隙是旁边缝隙的两倍

（5）justify-content: space-between; 旁边无缝隙【比较常用，有内部撑开的效果】

（6）justify-content: space-evenly; 中间旁边间隙一样

 2、交叉轴（y轴）align-items

（1）在没有将标签高度写定的情况下，可以用align-items: stretch;  填满y轴（y轴拉伸至铺满）

（2）align-items: flex-start; 交叉轴方向开头

（3）align-items: flex-end; 交叉轴方向结尾

（4）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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            border: 10px solid blue;
            margin: auto;
            display: flex;
            /* align-items: stretch; */
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            align-items: center;
        }
        .item1,.item2,.item3{/* 同时设置多个标签相同属性 */
            height: 100px;
            width: 100px;
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: yellow;
        }
        .item3{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

 3、多个主轴align-content

（1）align-content: flex-start; 默认位于容器开头

（2）align-content: flex-end; 位于容器结尾

（3）align-content: center; 位于容器中心

（4）align-content: space-between; 内容之间留空白，左右对齐，剩下的空间平分为缝隙

 

（5）align-content: space-around; 内容之前、之间、之后留空白，容器开始和结束的缝隙宽度是项目之间缝隙的两倍

<!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: 500px;
            height: 500px;
            border: 10px solid blue;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        .item1,.item2,.item3{/* 同时设置多个标签相同属性 */
            height: 100px;
            width: 100px;
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: yellow;
        }
        .item3{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

 五、项目

1、order属性：项目排列顺序，数值越小，排列越靠前，默认值为0

注意：这时候编写的位置是子级，自己的标签内

<!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: 500px;
            height: 500px;
            border: 10px solid blue;
            margin: auto;
            display: flex;
        }
        .item1,.item2,.item3{/* 同时设置多个标签相同属性 */
            height: 100px;
            width: 100px;
        }
        .item1{
            background-color: red;
            order: 3;
        }
        .item2{
            background-color: yellow;
            order: 1;
        }
        .item3{
            background-color: skyblue;
            order: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

2、flex-grow 放大比例（剩余空间按比例分配），默认值为0，不放大

<!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: 500px;
            height: 500px;
            border: 10px solid blue;
            margin: auto;
            display: flex;
        }
        .item1,.item2,.item3{/* 同时设置多个标签相同属性 */
            height: 100px;
            width: 100px;
        }
        .item1{
            background-color: red;
            order: 3;
            flex-grow: 2;
        }
        .item2{
            background-color: yellow;
            order: 1;
            flex-grow: 2;
        }
        .item3{
            background-color: skyblue;
            order: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

 

3、flex-shrink 缩小比例，默认为1，自动缩小

4、flex-basis 设置项目宽度，内容超出范围会自动变大

 5、align-self 允许单个项目与其他项目有不同的对齐方式

五秒法则
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript练手题
weixin_46834417的博客
06-03 585
Hello,大家好，我就是那个隔壁老王！ 今天我们来试练一下 请用JS代码完成下列需求：body里生成100个div，每个div宽60px，高60px，内容是1-100自身序号，颜色按红、黄、蓝、绿交替变色，10行10列排列。 咱们废话不多说，直接上代码~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
HTML基础
qq_42068654的博客
08-27 167
HTML 1.什么是HTML HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 2.HTML文件结构 是以 .html 或 .htm 结尾的文本文件 格式： 标签一般成对出...
html响应式弹性布局,CSS3 使用弹性布局order属性实现响应式圣杯布局
weixin_32620265的博客
06-17 309
CSS语言：CSSSCSS确定#main {display: flex;height: 300px;}#main > article {order: 2;min-width: 12em;flex: 1;}#main > nav {order: 1;width: 150px;}#main > aside {order: 3;width: 150px;}@media all and ...
浅谈HTML几种布局方式
同是天涯程序猿
06-27 9242
布局是前端比较基础但是也很重要的部分，过去传统的布局方案一般是通过基于盒子模型： 然后配合display、position或float等属性进行布局。这种布局方式使用和理解起来是相对简单，但是我认为布局更复杂的布局场景和维护起来会比较困难。 本文总结几种布局方式供参考：Flex 弹性布局、Grid网格布局和多列布局。没有适用所有场景的布局，只有合适的布局，在实际应用中多种布局方式灵活使用才能达到更好的效果。 1. Flex弹性布局 概念 Flex布局指弹性布局，是一种一维的布局方式，提供了对子元素的空间分
web一阶段 day19
gaoyuan0277的博客
08-04 166
弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端。...
蓝色海洋冲浪html5网站模板
04-08
蓝色海洋冲浪html5网站模板
冲浪笔记「Surf Notes」-crx插件
03-24
冲浪笔记允许你做笔记而不用离开你的浏览器！在任何网页（选项卡）记笔记，样式您的笔记与降价，... Surf Notes允许您在不离开浏览器的情况下做笔记！ 在任何网页（选项卡）上做笔记，用markdown设置笔记样式，以后...
surfing:在网上冲浪并记笔记
04-01
冲浪 该存储库记录了我在上网时学到的知识。
黑白配色海上冲浪极限运动类网站html模板
02-24
黑白配色海上冲浪极限运动类网站html模板
第六步、cart.html页面,order.html页面
qq_42611683的博客
07-17 1154
1、订单页面 cart.html编写 {% extends 'base_no_cart.html' %} {% load staticfiles %} {% block title %}天天生鲜-购物车{% endblock title %} {% block page_title %}购物车{% endblock page_title %} {% block body %} <div class="total_count">全部商品<em>{{ total_count }}&l
100个Div水平垂直均匀分布CSS
DyuanH的博客
08-04 2874
需求 容器宽度不固定，div宽度高度固定，间距固定并贴合容器的边。 重要一点，要跟设计稿的像素一样，不然计算好间距。 实现 简单3行代码 .container{ display: grid; //网格布局 gap: 18px; //元素之间间距18px grid-template-columns: repeat(auto-fill, 60px); //水平自动填充满元素，每个宽度为60px .son{ width:60px; height:60px; } } 优点 不用考虑最后一个
html 自动生成13个div,1-4 取模运算生成100个DIV.html
weixin_42516104的博客
06-04 701
Title* {margin: 0;padding: 0}.box {width: 520px;height: 520px;position: relative;float: left;}.box div {width: 50px;height: 50px;text-align: center;line-height: 50px;color: white;position: absolute;/*...
第二节 弹性盒子（ justify-content属性、align-items属性、flex-direction属性、flex-wrap属性）
热门推荐
Fiki515的博客
03-23 1万+
一、弹性盒子的定义 弹性盒子（ Flexible Box 或 flexbox）：CSS3的一种新布局模式。 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 二、 justify-content属性：决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端； row-reverse：主轴为水平方向，起点在右端； column：主轴为垂直方向，起点在上沿； column-reverse：主轴为垂直方向，起点在下沿。 <!D.
jq、js 动态循环100个div
林中明月间丶
05-17 3997
js： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div100</title> <style> div{ width: ...
前端html-docx实现html转word，并导出文件，文字+图片
qq_41737172的博客
05-30 209
前端html-docx实现html转word，并导出文件，文字+图片
html--全魔乱舞
stqer的博客
05-30 1271
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords
nginx 配置 gzip压缩及去除 html 缓存
chechenshi的博客
05-29 506
【代码】nginx 配置 gzip压缩及去除 html 缓存。
element-plus 自定义命名空间 el-config-provider namespace 不起作用，html 的class值改变了，但是样式不对
qq_34164814的博客
05-30 175
今天按照文档，对elemen plus + vite 的项目，进行qiankun嵌套，发现子应用的element和主应用的element plus样式冲突，所以决定用element plus 的自定义命名空间处理下。就是个大坑，结果就是，html变了，但是element css 的文件还是el-开头的，如果报错，math.div****之类的，那就是sass版本太低了，更新下，升级下就好了。第二步：修改 namespace的变量值，将下面的代码，添加到你的文件内部。使用方法，按照文档来。
HTML中Canvas关键知识点总结
最新发布
2301_79858914的博客
06-02 609
Canvas 提供了一套强大的 2D 绘图 API，适用于各种图形绘制、图像处理和动画制作。掌握 Canvas 的基础操作、路径绘制、变换操作、状态管理和性能优化等知识，可以帮助你创建复杂且高效的网页图形应用。通过以上详细的讲解，希望能让你对 Canvas 有更全面的理解，并能够应用这些知识点进行实际开发。
P1230 智力大冲浪
02-19
P1230 智力大冲浪是一道经典的编程题目，通常出现在算法竞赛或编程练习中。这道题目的主要目标是通过编程解决一个智力游戏的问题。 具体来说，P1230 智力大冲浪的题目描述如下：给定一个大小为N的整数序列，你需要...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

五秒法则

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值