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

第二章：CSS基础进阶-part3：弹性例子布局

news 2025/7/22 5:49:38

文章目录

  • Flex盒模型
  • 二、常见属性
    • 2.1 flex属性
    • 2.2 justify-content
    • 2.3 flex-wrap
    • 2.4 flex-flow
    • 2.5 align-items
    • 2.6 父容器-align-content

Flex盒模型

1、普通盒模型
在这里插入图片描述
2、弹性盒布局
使用弹性盒布局能让容器的宽度跟随浏览器窗口的变化而变换
在这里插入图片描述

二、常见属性

在这里插入图片描述

2.1 flex属性

在这里插入图片描述

2.2 justify-content

在这里插入图片描述

2.3 flex-wrap

在这里插入图片描述

2.4 flex-flow

这是一个简写flex-direction和flex-wrap属性。共同定义了flex容器的主轴和交叉轴。默认是row nowrap。
在这里插入图片描述

2.5 align-items

在这里插入图片描述

2.6 父容器-align-content

在这里插入图片描述

http://www.lryc.cn/news/119613.html

相关文章：

  • 函数与方法有区别？
  • VMware vCenter忘记密码操作，和Linus原理一致
  • Bert详细学习及代码实现详解
  • Vue [Day7] 综合案例
  • 基于R做宏基因组的进化树ClusterTree分析
  • 栈和队列修炼指南(基本操作+OJ练习)
  • 伪类和伪元素有何区别？
  • 自动测试框架airtest应用一：将XX读书书籍保存为PDF
  • ValueError：The following settings are not supported :{‘username‘: ‘neo4j“}
  • 360安全卫士右下角广告弹窗太多怎么彻底关闭？
  • 链表有无环以及确定入环口详解
  • chrome插件开发实例08- 使用Vue.js开发chrome插件
  • PCL 计算外接圆的半径
  • Matlab实现神经网络SOM算法（附上完整仿真源码）
  • 【遍历】非递归法 二叉树的前中后序遍历
  • Python将tiff转换成png
  • 【大数据】-- 部署 Flink kubernetes operator
  • 能够完成两个数的算术运算的单地址指令,地址码指明一个操作数，另一个操作数来自( )方式
  • 数据库数据恢复-Oracle数据库数据恢复案例
  • 对于msvcr120.dll丢失的问题，分享几种解决方法
  • 网络安全进阶学习第十三课——SQL注入Bypass姿势
  • vue3 provide inject实现强制刷新
  • Neo4j笔记-数据迁移（导出/导入）
  • 请求转发和请求重定向
  • TOMCAT的多实例部署和动静分离
  • 阿里微服务seata组件tc告诉rm进行提交的时候，rm提交失败了seata怎么办呢？
  • 已解决 RuntimeError: There is no current event loop in thread ‘Thread-1‘.
  • Android的学习系列之Android Studio Setup安装
  • Python测试框架pytest：常用参数、查找子集、参数化、跳过
  • Android 13 Hotseat定制化修改