当前位置: 首页 > news >正文

弹性布局

弹性布局
一、基础概念

\1. 开启弹性布局的元素叫弹性容器,容器内直接子元素叫弹性项。

\2. 弹性布局分为两条轴:主轴、侧轴。

\3. 默认主轴水平向右,侧轴垂直向下;修改主轴方向会同步改变侧轴。

二、容器属性(写在父元素)

\1. display

flex:块级弹性容器,独占一行
inline-flex:行内弹性容器,同行显示
\2. flex-direction 控制主轴方向

水平正向、水平反向、垂直正向、垂直反向
\3. flex-wrap 控制子元素是否换行

不换行:空间不足自动压缩子元素宽度
正常换行:空间不够自动换到下一行
反向换行:换行后颠倒上下行顺序
\4. flex-flow
direction与wrap两个属性的合并简写

\5. justify-content 主轴对齐方式

靠起点对齐、靠终点对齐、居中对齐
两端对齐,中间均分空白
每个元素两侧空隙相等
所有空隙完全均等

http://www.jsqmd.com/news/1155780/

相关文章:

  • 表格布局 + JS鼠标切换选项卡
  • Three.js 雷达着色器教程
  • 【无人机三维路径规划】基于遗传算法GA结合粒子群算法PSO无人机复杂环境避障三维路径规划(含GA和PSO对比)研究附Matlab代码
  • Conda 环境管理:Python 3.10.12 项目部署的 5 个关键步骤与 3 个常见误区
  • 新能源爆发式增长,你的仪表真的扛得住吗?
  • Android 系统签名文件生成:3步从源码 security 目录到可用的 .jks
  • 原味黑猪肉烤肠靠谱款挑选:非遗工艺,真材实料 - 晚香时候
  • 2026劳力士回收靠谱平台测评|南京五家名表机构分级对比指南 - 每日生活报
  • 2026第一次卖黄金必看 南宁本地新手回收避坑与注意事项全梳理 - 禹竞奢收行
  • JetBrains 推面向团队的 AI 系统,统一开发流程并升级商业模型
  • 废气治理控制柜调试:现场模拟量乱跳的实操排查经验
  • Three.js 波涛海浪教程
  • 2026成都金牛闲置首饰估价技巧,证书齐全大幅提升回收价 - 逸程奢侈品回收中心
  • 2026 高口碑国产白光干涉仪盘点,中图仪器微纳检测方案值得参考 - 深度智识库
  • 三星二季度业绩暴增却股价重挫,AI存储芯片狂欢背后隐忧几何?
  • Claude Code 实战:AI 结对编程如何真正提效-0620
  • Linux 7.2内核slab延迟freelist构建:小对象高频分配性能提升70%
  • GitHub下载慢?这个免费插件让你速度飙升5倍!
  • 《坦克世界闪击战》二维码举报系统:数据驱动的游戏环境维护方案
  • 使用silk-v3-decoder解码微信QQ语音:原理、工具与实战指南
  • 3D硬金黄金回收避雷技巧,天津门店高损耗扣费套路深度拆解 - 奢侈品回收评测
  • 西安黄金回收谨防套路!正规回收注意事项+避坑指南,附靠谱店铺白名单 - 奢侈品回收测评
  • Textual:用Python构建终端与网页双模交互应用
  • DeepXDE 库 2.8 版本:3 步搭建 PINN 求解 2D 热传导方程
  • 两种盒模型计算方式
  • 3种混沌图像加密算法对比:Logistic vs Henon vs 递归置乱,抗攻击性与速度实测
  • 基于节点导纳矩阵的三相配电系统建模附Matlab代码
  • 工业负载控制方案:TPD2017FN与PIC18F86J15应用设计
  • Dify实战指南:从零构建企业级AI应用与智能体工作流
  • 从Excel维护到电价API调用:能源管理系统EMS的电价数据架构改造