前端——弹性盒子

简介: 前端——弹性盒子

性盒子

flex:none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间;flex可以使元素具有弹性,让元素可以随页面大小的改变而改变。


none: none关键字的计算值为: 0 0 auto 
<' flex-grow '>: 用来指定扩展比率,即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。
在「flex」属性中该值如果被省略则默认为「1」 
<' flex-shrink '>: 用来指定收缩比率,即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。
在收缩的时候收缩比率会以伸缩基准值加权
在「flex」属性中该值如果被省略则默认为「1」 
<' flex-basis '>: 用来指定伸缩基准值,即在根据伸缩比率计算出剩余空间的分布之前,「flex子项」长度的起始数值。
在「flex」属性中该值如果被省略则默认为「0%」
在「flex」属性中该值如果被指定为「auto」,则伸缩基准值的计算值是自身的 <' width '> 设置,如果自身的宽度没有定义,则长度取决于内容。 


flex可以使元素具有弹性,让元素可以随页面大小的改变而改变。

弹性盒子和浮动的应用相差不多,但是它不会改变原标签的属性只会在原标签的基础上叠加样式 。

并不是像display:inline/block一样实现了标签的“变性处理”,他仅仅是在原有基础上叠加了弹性盒子的属性,原有属性和显示方式不发生变化,变化的是一级子项。

应用弹性盒子:块级标签的排版方式,由竖着排将父框排满,变成横着排;默认高度由内容决定;默认高度把父框填满;默认一行排不下不换行;


<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>弹性盒子</title><style>body,
ul {
margin: 0;
padding: 0;
        }
ul {
width: 400px;
height: 100px;
line-height: 100px;
list-style: none;
border: 2pxsolidteal;
        }
li {
/* width: 100px;            height: 100px; */float: left;
        }
.flex {
display: flex;/* 设置弹性盒子 */        }
/* 针对整合书写的flex:flex-grow flex-shrink flex-basis 当子元素的总长超过父元素的总长是会使用flex-shrink以达到子元素不溢出的现象,反之子元素小于父元素总长度则会扩大以占满父元素;定义的flex-grow和flex-shrink只会有一个生效;其中flex-basis可直接定义子元素的长度 */ulli:nth-child(1) {
/* flex-grow: 1; 此处是单独调试属性*//* flex-shrink: 1; */flex: 11200px;
background-color: lightcoral;
        }
ulli:nth-child(2) {
/* flex-grow: 2; *//* flex-shrink: 2; */flex: 11200px;
background-color: lightgoldenrodyellow;
        }
ulli:nth-child(3) {
/* flex-grow: 3; *//* flex-shrink: 3; */flex: 11200px;
background-color: lightskyblue;
        }
</style></head><body><ulclass="flex"><li>我是1</li><li>我是2</li><li>我是3</li></ul></body></html>

image.png

目录
打赏
0
0
0
0
14
分享
相关文章
【小程序】&【web前端】必备-Flex布局详解(弹性盒子)
【小程序】&【web前端】必备-Flex布局详解(弹性盒子)
446 0
【前端】解决盒子被撑大问题 box-sizing
【前端】解决盒子被撑大问题 box-sizing
132 0
【前端】解决盒子被撑大问题 box-sizing
前端项目实战216-拖拽初始盒子设置函数
前端项目实战216-拖拽初始盒子设置函数
87 0
前端项目实战217-拖拽目标盒子设置函数
前端项目实战217-拖拽目标盒子设置函数
75 0
前端工作总结278-弹性布局 修改样式
前端工作总结278-弹性布局 修改样式
109 0
前端工作总结278-弹性布局 修改样式

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    25
  • 3
    详解智能编码在前端研发的创新应用
    16
  • 4
    巧用通义灵码,提升前端研发效率
    14
  • 5
    智能编码在前端研发的创新应用
    10
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    12
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    26
  • 8
    VSCode AI提效工具,通义灵码前端开发体验
    66
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    10
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    14
  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    29
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
    66
  • 3
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    7
  • 4
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    36
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    67
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    31
  • 7
    巧用通义灵码,提升前端研发效率
    97
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    149
  • 9
    详解智能编码在前端研发的创新应用
    107
  • 10
    智能编码在前端研发的创新应用
    85