flex布局学习

最新推荐文章于 2024-09-10 20:25:25 发布
最新推荐文章于 2024-09-10 20:25:25 发布
阅读量50 收藏
点赞数
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52428045/article/details/110846702
版权

flex布局

12.7
看完第一个视频，了解了flex container(盒子外壳)和flex items（盒子里的小块块）
发现自己好像有很多基础的标签还有一些基础知识不太记得住啊
先补补HTML和css的标签好了，块级元素和行内元素
12.8
flex的第二个视频，flex布局模型，
主轴main axis：main size（盒子的长），start、end
交叉轴cross axis:cross size(盒子的宽)，start、end
flex的第三个视频，flex的属性
在这里插入图片描述

在这里插入图片描述

御十三
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex 布局学习
M_ik_Z的博客
02-23 508
Flex 布局学习1.Flex 布局体验1.1 传统布局与 Flex 布局2.Flex 布局原理2.1 布局原理3.Flex 布局父项常见属性3.1 常见父项属性3.2 flex-direction 设置主轴方向3.3 justify-content 设置主轴上子元素排列方式3.4 flex-wrap 设置子元素是否换行3.5 align-items 设置侧轴上的子元素排列方式（单行）3.6 align-content 设置侧轴上的子元素的排列方式（多行）3.7 flex-flow4.Flex 布局子项常见
Flex布局学习
qq_43477721的博客
02-02 563
Flex布局 1. flex 布局的概念 flexible box: 弹性盒状布局 容器控制内部元素的布局定位 CSS3引入的新布局模型 伸缩元素，自由填充，自适应 2.flex布局的优势 可在不同方向排列元素 控制元素排列的方向 控制元素的对齐方式 控制元素之间的等距 控制单个元素放大与缩放比例，占比，对齐...
flex布局学习笔记
qq_54581101的博客
07-03 1940
（1）flex-shrink属性：flex-shrink属性默认值为1，当子元素宽度超过父元素时，会自动缩小子元素，否则不会自动缩小子元素，导致子元素超过父元素宽度。（4）使用nth-child()设置元素宽度：理论上将元素一设置为其他元素宽度的100倍，但是这里没有实现，因为要保证容器内元素可读，所以其他元素至少为最小宽度。（3）使用nth-child()设置某个元素的宽度：这里将第一个元素的宽度设置为50px+6/10*剩余空间的大小，剩余空间元素1分到6份，其他元素各分到1份。
Flex布局学习完成PC端
小琳爱分享的博客
07-26 535
Flex布局学习完成PC端
Flex布局学习笔记
qq_45254055的博客
05-27 419
认识Flex布局 flex布局（Flexible布局，弹性布局） 目前特别在移动端用的最多，PC端也越来越多 两个重要概念 开启flex布局的元素叫flex container flex container里面的子元素叫flex items 开启Flex布局 display属性设置为 flex（块级元素）或 inline-flex（行内元素） Flex布局模型 应用在Flex-container（容器）的属性 display 作用：指定flex属性 取值：flex | inline-flex f
flex布局方法学习
恒二哥的博客
11-02 602
① 给父容器添加display: flex/inline-flex 属性，使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；当父元素设置为 display: flex 之后，子元素的 float，clear，vertical-align 都会失效。② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；容器添加弹性布局后，显示为行级元素；： 需要添加弹性布局的父元素，被设置为 display:flex 属性的元素。容器添加弹性布局后，显示为块级元素；
Flex布局学习资料
11-10
《Flex弹性布局学习总结.docx》可能是作者对Flex布局学习过程的全面总结，包括基础概念、主要属性、使用场景和实际应用案例。文档可能涵盖了以下关键知识点： 1. **基础概念**：Flex容器（flex container）和Flex...
水牛01248：flex布局学习笔记
03-29
flex布局实现需要至少两层控件,外层叫做容器,内部的叫做项目(item).类似于Android里的ViewGroup和里面装的View。 容器分两个轴,水平的主轴（main axis）和竖直方向的交叉轴（cross axis）,就相当于盒子模型中的xy轴,...
Flex布局学习记录
weixin_57991809的博客
05-11 314
Flex布局 Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局display: flex注：设为Flex布局以后，子元素的float,clear,vertical-align属性将失效。 基本概念 采用flex布局的元素，称为flex容器，它的所有子元素自动称为容器成员，称为flex项目。 容器默认存在两根轴，水平轴（主轴main axis）和垂直轴（交叉轴cross axis）。主轴的开始位置(与边框的交叉点)叫做main
前端flex布局最全文档，工作学习中复习必备
夸克IT
10-18 748
常用布局第二篇 —— flex布局 回顾 在上一篇中我们结束了流式布局，流式布局中主要是说了理论的知识比较多，最主要的还是移动端中的二倍图效果是非常重要。还有对于视口的效果，末尾之后我们又说了背景缩放的问题background-size，和特殊的样式例如兼容-webkit-等效果。基础还是需要好好学习。 flex布局原理 flex 是 flexble Box 的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，值得一提的是在现在大部分的工作中用flex布局的占比是非
前端用html写excel文件直接打开
全易
09-10 189
html文件直接用excel打开
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 735
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML转义字符对照表
云博客_资源宝分享
09-10 421
HTML转义字符对照表
HTML/CSS/JS学习笔记 Day4（HTML--C3 表格）
最新发布
给bug两拳的博客
09-10 956
C3 表格：3.1 表格标签（语法 / 相关属性 / 表格结构）、3.2 列表标签（无序列表⭐ / 有序列表 / 自定义列表⭐）
深入解析`node-html-to-image`的`main.ts`源码：实现HTML到图片的转换
软考鸭
09-09 583
的主要功能是将HTML字符串或文件渲染为图片。它支持多种输出格式（如PNG、JPEG等），并提供了一系列配置选项，如图片质量、透明度等。该库利用Puppeteer（一个无头Chrome浏览器）来实现HTML的渲染和截图功能。Cluster：来自库，用于管理无头浏览器的并发执行。Screenshot：自定义的截图模型。：执行截图操作的函数。Options和：类型定义，用于确保传入参数的合法性。本文通过对的main.ts源码的深入解析，揭示了该库如何将HTML内容转换为图片的内部工作原理。
(代码可运行)Bootstrap框架的HTML示例
Keep trying, keep going
09-10 396
Bootstrap：一套流行的前端开发框架，基于HTML、CSS和JavaScript，适用于快速构建响应式Web应用。等类），可以快速构建一个美观且响应式的Web应用。请将这段代码复制到一个HTML文件中，并在浏览器中打开以查看效果。这个示例展示了一个简单的响应式布局，包括一个居中的标题和三个卡片组件。通过使用Bootstrap的栅格系统（以下是一个使用Bootstrap构建的。
【H2O2|全栈】更多关于HTML（1）HTML进阶（一）
过期的H2O2的博客
09-10 971
本系列博客是对入门专栏的HTML知识的补充，并伴随一些补充案例。这一期主要介绍位置在HTML文档头部里的内容。不是专业的科普博主，文笔不好，多多包涵（嘿嘿）。
HTML生日蛋糕
兔子王
09-07 1726
用HTML语言实现生日蛋糕效果的完整代码。
Flex布局教程：语法篇详解与实战应用
Flex布局教程深入解析 Flex布局，全称Flexible Box布局，是CSS3中一种强大的用于创建动态、灵活和响应式的网页布局技术。...通过学习这系列教程，开发者将能够掌握如何利用Flex布局来创建现代、适应性强的网页设计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值