站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

什么是css3弹性盒子

时间:2021-12-27 [网络编程]作者:fabuyuan 浏览:7 次

css3中,弹性盒子是一种布局方式,为了让页面适应不同的屏幕大小以及设备类型,进而提供一种更加有效的方式来分配空间;可以利用display属性来定义弹性盒子,语法为“display:flex”或者“display:inline-flex”。

什么是css3弹性盒子  2

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

什么是css3弹性盒子

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示,从左到右:

示例如下:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

输出结果:
什么是css3弹性盒子  2

(学习视频分享:css视频教程

以上就是什么是css3弹性盒子的详细内容,更多请关注站长家园其它相关文章!

本文标签:  css

转载请注明来源:什么是css3弹性盒子

本文永久链接地址:https://www.adminjie.com/post/6845.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 为了提高电感性负载电路的功率因数通常采用的方法有什么

      为了提高电感性负载电路的功率因数通常采用的方法有什么

      提高电感性负载电路功率因数的方法有:在电感性负载两端并联合适大小的电容。因为电感上电压超前,电容上电压滞后;对于某频率的交流电,大小匹配的电感电容并联电路可等效...

    • iphonex和xr尺寸一样大吗

      iphonex和xr尺寸一样大吗

      iphonex和xr尺寸是不一样大,因为iphonex的屏幕尺寸为5.8英寸,而iphonexr的屏幕尺寸则为6.1英寸。本文操作环境:iOS12.3....

    • oracle中as的用法是什么

      oracle中as的用法是什么

      在oracle中,as的作用主要是为表中的字段添加别名,在命名别名时加双引号可以区分大小写,如果定义的别名为多个字符,则必须添加双引号,语法为“selectv...

    • oracle怎样删除索引

      oracle怎样删除索引

      在oracle中,可以利用“dropindex”语句删除索引,该语句的作用就是删除指定的索引,语法为“dropindex索引名;”。本教程操作环境:Win...

    • oracle中is和as的区别是什么

      oracle中is和as的区别是什么

      区别:1、as可以在视图VIEW中使用,而is不可以再视图VIEW中使用;2、as不可以在游标CURSOR中使用,而is可以再游标CURSOR中使用。本教程操作...

    热门文章