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

神奇的FlexBox弹性布局

1、Flex Box弹性布局是什么?

何为弹性:就是能随着宽高变化实现排版自适应变化。

Flex是Flexible Box缩写,翻译为“弹性布局”,用来为盒装模型提供最大的灵活性。

弹性布局可以让我轻松实现如:左中右对齐,上中下对齐,均匀分布,浏览器自适应等功能。

弹性布局可以通过样式display:flex轻松实现

1.1、Flex-box感受案例

【弹性布局感受1】

效果:flex-box布局可以实现两个空间紧密相连。

.div2{

            display: flex;

            display: -mox-flex;

}

<div class="div3">

            <input type="email" class="myinput1" name="email" />

            <button type="submit">发送</button>

</div>

【弹性布局感受2】

效果:flex-box可以使一个空间沾满一整行。

.div3{

            display: flex;

            display: -mox-flex;

}

.myinput1{

            flex-grow: 1;

}

<div class="div3">

            <input type="email" class="myinput1" name="email" />

            <button type="submit">


http://www.kler.cn/a/599593.html

相关文章:

  • 【docker】安装SQLServer
  • 数学概念学习
  • 分布式中间件:基于 Redis 实现分布式锁
  • 51单片机程序变量作用域问题
  • NSSRound(持续更新)
  • 测试工程 常用Python库
  • 数据库的左连接,右连接,全外连接,自连接,内连接的区别
  • IS-IS原理与配置
  • 苹果iPhone 16e销量表现糟糕 难以拯救市场
  • 嵌入式八股RTOS与Linux---进程间的通信与同步篇
  • Select多路转接
  • 【机器学习】什么是线性回归?
  • Go常见问题与回答(下)
  • 【HTTP 传输过程中的 cookie】
  • 详细Linux中级知识(不断完善)
  • 高级java每日一道面试题-2025年3月09日-微服务篇[Eureka篇]-说一说Eureka自我保护模式
  • AI日报 - 2025年3月25日
  • 2018扬州大学876农业机械学概论填空名词解释简答
  • leetcode1109. 航班预订统计-medium
  • 批量配置Linux ~/.bash_profile