flex布局学习记录

最新推荐文章于 2025-11-01 12:10:01 发布
原创 最新推荐文章于 2025-11-01 12:10:01 发布 · 157 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习 #css

本文介绍了CSS Flex布局的常见属性，包括父项属性如flex - direction设置主轴、justify - content设置主轴排列方式等，以及子项属性如flex定义子项目分配剩余空间、align - self控制子项侧轴排列等，帮助了解Flex布局的使用。

常见父项属性

在这里插入图片描述

flex-direction设置元素的主轴

在这里插入图片描述

justify-content设置元素在主轴上的排列方式

使用之前要确定主轴是哪一个
在这里插入图片描述

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

flex布局中，默认子元素不会换行，如果装不下，会缩小子元素的宽度，放到父元素里面
在这里插入图片描述
在这里插入图片描述

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

适合于子盒子是单行的时候使用
在这里插入图片描述
拉伸：子盒子不能设置高度 沿着侧轴拉伸
在这里插入图片描述

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

在这里插入图片描述

flex-flow复合属性

是flex-direction和flex-wrap的复合写法

常见子项属性

flex属性

定义子项目分配剩余空间，用flex来表示占多少份数
在这里插入图片描述

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

在这里插入图片描述

order属性定义项目的排列顺序

在这里插入图片描述

flex布局学习笔记（flex布局教程）
weixin_56334307的博客
06-24 289
align-self属性允许单个项⽬有与其他项⽬不⼀样的对齐⽅式，可覆盖align-items属性，默认值为auto，表⽰继承⽗元素的align-items属性，如果没有⽗元素，则等同于stretch。它的默认值为auto，即项⽬的本来⼤⼩。flex属性是flex-grow，flex-shrink 和flex-basis的简写，默认值为 0 1 auto。flex项⽬（⼦元素）有6个属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self。
Flex 布局学习笔记
吴小花的博客
03-04 250
学习网址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex弹性布局 1.任何一个容器都可以指定为 Flex 布局 Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为 ...
flex布局学习笔记
weixin_43749732的博客
12-13 617
flex布局又叫弹性布局，伸缩布局，通过给父容器设置dispaly：flex属性，子元素实现弹性布局。父容器实现弹性布局后，子元素的一些属性也会消失，如子元素的float,clear,vertical-align属性（学习前要了解，flex布局有主轴和副轴的概念，默认横向为主轴，纵向为副轴。以上就是本次学习过程中常用的flex布局属性，后续会补充。【黑马！真的很详细！】CSS3-flex布局(flex布局的单个知识点忘记也可以复习)_哔哩哔哩_bilibili。
Flex布局学习笔记
2401_88410373的博客
01-17 746
给父元素添加一个display属性，并且将取值设置成flex其父元素叫做伸缩容器，其本身叫做伸缩项目。
CSS flex布局学习笔记
TikGuy的博客
06-13 444
该笔记的一些文字描述仅仅只是我个人对于属性和参数的理解，会于书上描述的有所偏差，如果有错误的地方，请各位大佬批评指教。space-around：副轴把剩余空间平均分配给盒子。space-around：把剩余空间平均分配给盒子。space-between：副轴两边对齐。space-between ：两边对齐。flex-start：副轴起点对齐。flex-start：副轴起点对齐。flex-start：起点对齐。flex-end：副轴终点对齐。flex-end：副轴终点对齐。flex-end：终点对齐。
flex布局与grid布局学习笔记
2302_81119658的博客
01-17 689
条件满足一直用最大值，条件不满足用中间值，如果剩下的距离不足以显示距离的大小，则使用最小值。在属性中提供了fr关键字，若前一个值为1fr，后一个值为2fr，则后者为前者的两倍。grid-row-start横向网格线开始占位。grid-row-end横向网格线结束占位。grid-column-start纵向网格线开始占位。列间距属性：grid-column-gap:30px;行间距属性：grid-row-gap:20px;
Flex布局学习记录
weixin_57991809的博客
05-11 414
Flex布局 Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局display: flex注：设为Flex布局以后，子元素的float,clear,vertical-align属性将失效。 基本概念 采用flex布局的元素，称为flex容器，它的所有子元素自动称为容器成员，称为flex项目。 容器默认存在两根轴，水平轴（主轴main axis）和垂直轴（交叉轴cross axis）。主轴的开始位置(与边框的交叉点)叫做main
水牛01248：flex布局学习笔记
03-29
flex布局实现需要至少两层控件,外层叫做容器,内部的叫做项目(item).类似于Android里的ViewGroup和里面装的View。 容器分两个轴,水平的主轴（main axis）和竖直方向的交叉轴（cross axis）,就相当于盒子模型中的xy轴,...
Flex 3 布局容器学习笔记 整理
10-29
国庆期间，做了不少基于 flex 的开发工作，对 flex 的布局容器有了进一步深入的理解，也找到不少非常棒的文章，分享到这里方便一下大家。
flex布局教程的实例
11-20
综上所述，通过廖雪峰老师网站的学习笔记，我们可以看到Flex布局在实现各种布局时的灵活性和强大能力。通过少量的CSS代码，我们能够快速实现多种复杂的布局效果，这在传统的CSS布局方式中，可能需要更复杂的HTML结构...
前端flex布局学习笔记
.伊泽瑞尔
12-14 439
前端flex布局
FreeRTOS 学习：（五）FreeRTOS 移植，以 STM32F103ZET6 为例
qq_51409113的博客
10-31 1006
FreeRTOS 移植，以 STM32F103ZET6 为例
源码学习：MyBatis源码深度解析与实战
bjxagu的专栏
10-28 1366
MyBatis是一款优秀的持久层框架，通过XML或注解配置SQL映射，简化JDBC操作。其核心组件包括SqlSessionFactory、SqlSession、Executor等，采用分层架构设计。源码解析部分详细介绍了SqlSessionFactory创建、Mapper接口代理实现、SQL执行过程等核心机制。MyBatis运用多种设计模式（工厂、代理、建造者等），并支持一级和二级缓存。插件开发可拦截四大核心对象，与Spring集成通过SqlSessionFactoryBean等组件实现。最佳实践包括合理使
【深入学习Vue丨第一篇】Props 完全指南
weixin_59796310的博客
10-31 1019
【深入学习Vue丨第一篇】Props完全指南
【fixchart】【来学习基于Mermaid语法生成“流程图”】
weixin_38989540的博客
10-31 418
FixChart是基于Mermaid语法的文本图表工具，支持流程图、时序图等多种图表。摘要如下：1. 基本结构以"flowchart 方向"开头，支持TD/TB/LR等布局；2. 节点定义支持矩形/圆形/菱形等8种形状，可显式定义ID和文本；3. 连接线支持箭头/直线样式和文字标注；4. 提供子图分组功能；5. 支持CSS样式类和注释；6. 节点ID需避免特殊字符；7. 适用于描述系统流程、算法等场景，可在FixChart官网直接使用。该工具通过简单文本即可生成专业图表，适合开发文档编写
分享几个开源的系统，包括小程序、商城系统、二手交易等常见的系统、很容易进行二次开发 【可以参考学习】
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
10-30 958
本文分享了5个全栈开发项目实践经验，涵盖电商、书籍借阅、心理健康等领域。项目均采用SpringBoot+Vue技术栈实现前后端分离，包括美妆商城（含推荐算法）、通用商城系统、大学生心理管理系统和智能书籍借阅系统（含微信小程序）。每个项目提供完整源码、数据库脚本及演示视频，适合作为毕业设计参考或学习练手。特别强调全栈开发的优势：从需求到上线的完整掌控能力。所有项目均为原创开发，开箱即用，可作为展示实际开发能力的面试加分项。
英一2016年真题学习笔记
丰锋的博客
10-30 259
论文学习_Precise and Accurate Patch Presence Test for Binaries
最新发布
kitsch0x97的博客
11-01 669
打补丁是应对软件漏洞的主要手段，关键在于确保补丁能够及时部署到所有受影响的软件中，然而现实中这一过程往往存在滞后。因此，无论对防御方还是攻击方而言，准确检测软件版本中是否存在安全补丁都至关重要。受安全分析师通常仅检查局部代码区域这一行为的启发，我们提出了FIBER系统，其核心设计正是基于这一观察。FIBER首先对开源安全补丁进行细粒度分析与比对，进而生成能够忠实反映补丁所引入关键语法与语义变化的二进制签名，并利用这些签名在目标二进制文件中进行精准搜索。
移动端flex布局实战技巧与案例解析
资源摘要信息:"弹性布局-...总结来说，这个压缩包提供了一套完整的关于移动web端Flex布局的学习资料，包括理论讲解、实例演示和实践操作，对于想要在移动web开发中有效运用Flex布局的技术人员来说，是一份宝贵的资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值