CSS-flex布局笔记

最新推荐文章于 2026-06-23 23:18:49 发布
原创 最新推荐文章于 2026-06-23 23:18:49 发布 · 139 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #css3 #html

原理：通过在父项中调试flex属性，影响子项

flex-direction主轴坐标

 

justify-content主轴子元素的排列方式

 

flex-wrap设置子元素是否换行

nowrap 默认不换行，就挤了挤

wrap 换行

align-content设置侧轴的子元素的排列方式（多项）

align-items设置侧轴上子元素的排列方式（单行）

 

flex-flow同时设置flex-direction和justify-content

flex属性：用flex表示占用剩余空间的多少

align-self：控制子项自己在侧轴上的排列方式

Order：改排列顺序

啊，Antdesign yyds

TroTro_
关注
CSS flex布局学习笔记
TikGuy的博客
06-13 526
该笔记的一些文字描述仅仅只是我个人对于属性和参数的理解，会于书上描述的有所偏差，如果有错误的地方，请各位大佬批评指教。space-around：副轴把剩余空间平均分配给盒子。space-around：把剩余空间平均分配给盒子。space-between：副轴两边对齐。space-between ：两边对齐。flex-start：副轴起点对齐。flex-start：副轴起点对齐。flex-start：起点对齐。flex-end：副轴终点对齐。flex-end：副轴终点对齐。flex-end：终点对齐。
【笔记】【CSS】flex布局学习笔记
Code for fun !!! 【博客主要为本人服务】
04-01 269
该笔记为个人学习Flex布局时，学习【菜鸟编程Flex 布局语法教程】，进一步的简单整理的个人学习笔记。
CSS Flex布局简单入门笔记
zhk
12-25 827
CSS Flex布局简单入门笔记
CSS笔记——Flex、Grid布局、css响应式布局
bqiuer的博客
09-25 891
Flex 布局是 CSS3 引入的一种新的布局方式，用于创建灵活的、自适应的网页布局，其主要思想是将容器分为一个或多个弹性项目，并且可以通过设置弹性项目的属性来控制其在容器中的排列和分布。弹性盒子布局是一种灵活的布局模式，可以根据容器的大小和内容的大小来自适应地调整布局。使用 Flexbox 布局时，可以将网页中的元素按照一定的比例分配空间，从而实现响应式布局的效果。设置弹性项目的增长因子，用于决定弹性项目的放大比例，默认值为 0。设置弹性项目的收缩因子，用于决定弹性项目的缩小比例，默认值为 1。
css笔记 四.flex布局
qq_38052995的博客
09-15 547
文章目录说明设置在子元素上的属性1.flex-grow:number (放大)2.flex-shrink:number(缩小)3.flex-basis(基准值,权重比width,height等要高)4.flex(简写方式)5.order:number(排序)6.align-self(对齐方式)设置在父元素上的属性1.flex-direction(元素排列方式)2.flex-wrap(换行)3.fl...
【前端】CSS
Elena's Blog
06-23 206
作用特点标签选择器能选出所有相同标签不能差异化选择类选择器能选出一个或多个标签根据需求选择，最灵活，最常用id 选择器能选出一个标签同一个 id 在一个 HTML 中只能出现一次通配符选择器选择所有标签特殊情况下使用。
CSS 列表样式完全指南：从 list-style-type 到 list-style 简写
🧑‍💻 前端 · 写作中 📍 沉淀：HTML/CSS/JavaScript/Vue 📍 学习：React、微信小程序、Webpack、Vite 📍 目标：用输出倒逼输入，备战下次飞跃
06-20 327
本文系统讲解 CSS 列表样式：涵盖无序、有序、定义三种列表，详解 list-style-type、list-style-image、list-style-position三属性及 list-style简写。实战中最常用 list-style: none去除默认项目符号，配合 ::before或背景图实现自定义标记，是现代前端必会技能。
【CSS学习第七篇】
最新发布
2301_77399671的博客
06-23 228
CSS学习第七篇
前端入门精讲｜18个CSS高频进阶知识
2602_95057108的博客
06-21 257
承接上一篇CSS基础核心知识点，本篇继续深挖CSS进阶高频考点，涵盖布局适配、样式初始化、文本溢出、文档流、盒模型、属性继承、宽度适配等重难点内容。这些知识点是解决页面布局错乱、适配bug、样式兼容问题的核心，也是期末考试、前端入门面试的高频考题。全文搭配原理解析、区别对比、实战代码、踩坑总结，细节拉满，轻松拿下高分。在网页开发中，底部导航、版权信息、悬浮按钮等模块，需要永久固定在页面底部，不受页面滚动影响，最优解决方案为fixed固定定位组合样式。八、元素固定在网页底部的实现方案。
初级打字母练习游戏，让学习有点乐趣
shisongyuan的专栏
06-22 623
给自己家孩子编写的分享出来，希望你帮助给多孩子完成高考后，熟悉电脑。
05_CSS制作简易12306网页
人生得意须尽欢
06-23 241
本文介绍了12306网站导航栏和服务栏等的HTML/CSS实现方法。
Cesium CSS 元素教程
2201_75964656的博客
06-21 230
详解 Cesium.js CSS 元素：基于 WebGL 实现「CSS 元素」可视化效果，附完整可运行源码，涵盖 Cesium 等关键实现，附完整源码与在线 Demo，适合 Cesium 基础 学习与二次开发。
CSS overflow 属性完全指南：从溢出裁剪到 BFC 布局机制
🧑‍💻 前端 · 写作中 📍 沉淀：HTML/CSS/JavaScript/Vue 📍 学习：React、微信小程序、Webpack、Vite 📍 目标：用输出倒逼输入，备战下次飞跃
06-22 364
本文详解CSS overflow属性，对比visible、hidden、scroll、auto等值的差异，重点解析overflow:hidden触发BFC的机制，及其在清除浮动、阻止margin重叠等布局场景中的应用，助你掌握内容溢出与块级格式上下文的核心技巧。
CSS 边框（border）完全指南：三要素、四值规律与简写写法
🧑‍💻 前端 · 写作中 📍 沉淀：HTML/CSS/JavaScript/Vue 📍 学习：React、微信小程序、Webpack、Vite 📍 目标：用输出倒逼输入，备战下次飞跃
06-23 325
本文详解CSS边框核心用法：解析border-width/style/color三要素与“上右下左”四值规律，掌握border与border-xxx简写技巧，避开常见误区，助你高效控制盒子边框样式。
vue实现三角抽象思维计算矩形面积
cf8833的博客
06-20 312
这篇文章摘要： Vue组件实现了一个可交互的直角三角形与内嵌矩形绘图工具。用户可通过控件调整直角三角形的两条直角边长度(AB和AC)以及内嵌矩形的宽度和高度比例。组件实时计算并显示三角形面积、矩形面积及其占比、斜边长度等几何数据。绘图功能使用Canvas API实现，包含网格背景、三角形和矩形的绘制、顶点标注和尺寸标注。关键特性包括：响应式数据绑定、实时图形更新、面积计算和百分比显示。当矩形顶点F位于斜边BC上时，满足宽度比例+高度比例=1的关系。
使用HTML写一个悬浮摄像头，可拖拽、放大、缩小
weixin_52803316的博客
06-13 924
这段代码实现了一个可拖拽、可调整大小的悬浮摄像头窗口。主要功能包括：1) 通过浏览器API调用用户摄像头并显示实时画面；2) 窗口可自由拖动位置；3) 提供8个方向的调整手柄，支持窗口大小调整并设置最小尺寸限制（160×120px）；4) 采用固定定位，始终悬浮在其他页面内容之上。界面为黑色圆角矩形，带有阴影效果，光标会根据操作区域自动变化形状，提供直观的交互体验。
HTML 的 ＜b＞ 元素
IMPYLH的博客
06-23 346
b><b>元素是一个纯粹的表现层标签。用于视觉突出，而非语义强调。在<b>和<strong>之间犹豫时，优先考虑语义。对于复杂的样式需求，CSS 是更强大的工具。记住，好的 HTML 代码不仅看起来正确，其结构本身也应具有清晰的含义。合理使用 <b>，能让你的网页在保持美观的同时，也更加专业和规范。
Nginx-SSI：在返回静态 HTML 之前，先在服务端把 HTML 里的特定指令替换成动态内容
snow的博客
06-17 387
SSI 能实现"静态组件引入"，但没有交互、没有状态，本质是服务端的 include，不是真正的组件化。够用，但别指望它能替代任何现代框架。
HTML 的 ＜audio＞ 元素
IMPYLH的博客
06-23 252
虽然浏览器提供了默认控件，但很多时候我们需要自定义播放器界面以满足设计需求。
Flask 笔记六：模板继承，告别每个页面复制一遍 HTML
liuyicenysabel的博客
06-23 409
下一页</a><a href="{{ url_for('home.note_edit', note_id=note.id) }}">编辑
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值