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

css学习_css3伸缩布局 flex布局

1、flex布局

 

案例一:

 

案例二:

  保证不至于缩放得太小或太大

 

 案例三:flex的值不一定要写成几份,可以写成固定值

 

 

 

 案例四:

 

 

 竖着3等分(父容器按照高度3等分)

!!案例  -----用flex布局写携程网(发现携程网是伸缩布局:根据屏幕自适应)

 

 

 

  flex:  2  意义是啥 (剩余宽度里占比2等份)   

flex布局:1、父元素要定义为display:flex   ,

    2、直接子元素布局为flex: n   

    3、flex:n 的意思:先用父元素的宽度减去没有设置属性flex的子元素的宽度,把所有属性为flex子元素之和作为剩余宽度要分成的份数,最后属性为flex元素的宽度即为占比数。

    4、若父元素display:flex后  ,那其子元素设置的float都不起作用了,定位还是有用的,但是一般不会这样用   

2、justify-content(水平对齐)属性用法作用如下:

                       

 3、align-items垂直对齐:适用于单行!

 4、flex-wrap属性

 

5、align-content

  

6、order

每一份子项目默认值是0  

 

转载于:https://www.cnblogs.com/yangyutian/p/10699474.html

相关文章:

  • 处理响应
  • Java中的IO操作
  • 运维自动化系统部署
  • css_css 盒子水平居中 垂直居中
  • MySQL中的EXPLAIN
  • 蚂蚁金服 mPaaS 模块化开发与架构重构深度解析
  • 【译】Vue 的小奇技(第十三篇):在 Nuxt.js 中重定向 404 页面
  • Java 生成 PDF 文档
  • 市场分析——行业背景分析
  • 程序人生 | 35岁以上的 iOS 程序员都到哪里去了?
  • charls 抓包
  • [树状数组]JZOJ 4658 小Z调顺序
  • 1.1(设计模式)工厂模式
  • Redis 桌面管理工具 RedisDesktopManager 2019.0 发布
  • nginx统计日志中客户端ip访问次数
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • Essential Studio for ASP.NET Web Forms 2017 v2,新增自定义树形网格工具栏
  • gcc介绍及安装
  • gulp 教程
  • HTTP--网络协议分层,http历史(二)
  • Java 11 发布计划来了,已确定 3个 新特性!!
  • JS进阶 - JS 、JS-Web-API与DOM、BOM
  • Laravel深入学习6 - 应用体系结构:解耦事件处理器
  • Leetcode 27 Remove Element
  • Python3爬取英雄联盟英雄皮肤大图
  • SpringCloud(第 039 篇)链接Mysql数据库,通过JpaRepository编写数据库访问
  • 机器学习学习笔记一
  • 利用jquery编写加法运算验证码
  • 入手阿里云新服务器的部署NODE
  • 突破自己的技术思维
  • 自定义函数
  • [Shell 脚本] 备份网站文件至OSS服务(纯shell脚本无sdk) ...
  • kubernetes资源对象--ingress
  • 微龛半导体获数千万Pre-A轮融资,投资方为国中创投 ...
  • (ISPRS,2023)深度语义-视觉对齐用于zero-shot遥感图像场景分类
  • (Redis使用系列) Springboot 使用redis的List数据结构实现简单的排队功能场景 九
  • (安全基本功)磁盘MBR,分区表,活动分区,引导扇区。。。详解与区别
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (附源码)spring boot儿童教育管理系统 毕业设计 281442
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (附源码)springboot猪场管理系统 毕业设计 160901
  • (黑马C++)L06 重载与继承
  • (三) diretfbrc详解
  • (译) 函数式 JS #1:简介
  • (原)记一次CentOS7 磁盘空间大小异常的解决过程
  • .net core 调用c dll_用C++生成一个简单的DLL文件VS2008
  • .net mvc部分视图
  • .NET/C# 使用 #if 和 Conditional 特性来按条件编译代码的不同原理和适用场景
  • .net6+aspose.words导出word并转pdf
  • .NET单元测试
  • .NET是什么
  • /etc/sudoer文件配置简析
  • @取消转义
  • [AIGC] Java 和 Kotlin 的区别
  • [Angular] 笔记 9:list/detail 页面以及@Output