我的编程空间,编程开发者的网络收藏夹
学习永远不晚

如何使用CSS3中的FlexibleBoxes

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

如何使用CSS3中的FlexibleBoxes

这期内容当中小编将会给大家带来有关如何使用CSS3中的FlexibleBoxes,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

Flexible Box是什么?Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。
浏览器兼容性

作为非常现实的开发者,是否对一个新技术进行关注,首先要考虑它的浏览器兼容性如何。我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的。

如何使用CSS3中的FlexibleBoxes

可以看到,现代浏览器基本上都支持了,IE10开始也支持了(IE和Safari分别加-ms-和-webkit-前缀即可),移动端的支持情况也比较良好,唯一不支持的平台只有Opera了,咱不带他玩→_→

因此,奥巴马同志说:伸缩盒模型是好的,有前途的。(嗯嗯~)
伸缩盒基本概念

伸缩盒的最大特点或者说优点就在于它考虑到了现今高昂的房价和人民日益增长的住宅需求之间的矛盾,房屋面积是有限的,但是我们的伸缩盒能够最合理最高效地把房子分给大家。面积多了,就给大家伙多分点;面积小了,就让各位挤一挤少分点,总而言之不会让任何一个人露宿街头的(overflow)!

既然我们提到了房子和住户的关系,那么住户的排列自然需要沿一定的方向。对于块级元素来说,布局的延伸方向是自上而下的,也就是纵向。而对于行内元素来说,布局延伸方向是自左往右的,也就是横向。而伸缩盒呢,它的方向是可变的,既能纵向延伸,也能横向舒展,这取决于你的设置了。
伸缩盒模型基本术语

伸缩盒模型的思想和普通的块级元素和行内元素的布局思想有较大的不同,它引入了一些新的概念和术语,通过下面这张图来了解一下:
如何使用CSS3中的FlexibleBoxes

Flex container 伸缩盒容器
这就是用来分的房子,这是一间神奇的房子,要让它变得神奇,将display属性声明为flex或inline-flex即可~

Flex item 伸缩项
房子里的居民,他们都会占有自己应得的住房面积。

为了形象说明,我们用代码来解释。

XML/HTML Code复制内容到剪贴板

  1. <div class="container">  
      <div class="item item-1">item 1</div>  
      <div class="item item-2">item 2</div>  
      <div class="item item-3">item 3</div>  
    </div>

CSS设置为:

CSS Code复制内容到剪贴板

  1. .container {   
      display: flex;   
      width: 300px;   
      height: 100px;   
      ...   
    }

在这里display: inline-flex;好像也可以。
对于其中的伸缩项元素,我们需要给他们事先安排好住房面积比例,我们就用最简单最健康的1:1:1吧~我们将比例声明在flex属性里

CSS Code复制内容到剪贴板

  1. .item-1 {   
      flex: 1;   
      ...   
    }   
    .item-2 {   
      flex: 1;   
      ...   
    }   
    .item-3 {   
      flex: 1;   
      ...   
    }

如何使用CSS3中的FlexibleBoxes

我们的大房子被完美地平分成三个隔间了,三家平分房租!

如果有人想住大点的房子,我们直接改变flex的比例即可:

CSS Code复制内容到剪贴板

  1. .item-1 {   
      flex: 1;   
      ...   
    }   
    .item-2 {   
      flex: 1;   
      ...   
    }   
    .item-3 {   
      flex: 2;   
      ...   
    }

如何使用CSS3中的FlexibleBoxes

是不是很方便?

Axes 轴
我们可以看到,图中有两条轴,分别标注了主轴和次轴(垂直于主轴)。然而实际上哪一条是主轴并不确定,是由我们来规定的。
1. flex-direction 此属性规定哪条轴为主轴。
2. justify-content 此属性设置了伸缩项在主轴方向上的排列方式,这个稍后解释。
3. align-items 此属性和上面的justify-content相对,表示伸缩项在次轴上的排列方式。
4. align-self 此属性规定某一个特定的伸缩项元素在次轴上的布局方式,在某个元素上设置该属性会覆盖它的align-items属性。也就是这个属性会让某个元素更有个性,不走寻常路~

flex-direction
当我们不想沿着默认的方向分房子的时候,我们可以改变flex-direction属性的值来改变主轴和方向,该属性默认的取值为row;

CSS Code复制内容到剪贴板

  1. .

  2. container {   
      flex: row-reverse;   
      ...   
    }

顾名思义,这会让伸缩项的排列方向反过来:
如何使用CSS3中的FlexibleBoxes

当此属性设置为column时,主次轴就会对调,元素的排列方向也会随之改变:

CSS Code复制内容到剪贴板


  1. .container {   
      flex-direction: column;   
      ...   
    }

如何使用CSS3中的FlexibleBoxes

至于flex: column-reverse的含义就不用我多说了吧~

justify-contents
有的时候,大家挨着住,一点空隙都没有也会很难受,连个过道都没有,隐私也不能保证对吧。这个时候,我们可以改变分配政策了,不再按比例分配,而是定额分配,每个人的面积是确定的。多出的房屋面积改成公共区域。

CSS Code复制内容到剪贴板

  1. .item {   
      width: 80px;   
      ...   
    }   
    ...


设定了width属性后也要记得去掉flex属性的声明哦,不然flex属性的效果仍然会把width覆盖掉~
同时,如果width属性也不设定的话,元素宽度会表现为内容的宽度,which means 当伸缩项内部无内容时,将不会进行渲染,其表现就和display: none;一样。
这时,在容器上声明justify-content属性就可以安排伸缩项的位置了:

CSS Code复制内容到剪贴板

  1. .content {   
      justify-content: flex-start | flex-end | center | space-between | space-around;   
    }

如何使用CSS3中的FlexibleBoxes

align-items
这项属性会改变次轴上元素排列的方式,对于本例来说原来次轴方向上元素的高度是表现为height: 100%;的,设定了align-items属性后,其高度表现就会发生改变了。

CSS Code复制内容到剪贴板

  1. .content {   
      align-items: flex-start | flex-end | center | baselinebaseline | stretch;   
    }

说到这里了,伸缩项具体的表现其实可以想象出来了,想象不出来的就自己动手试一试吧~

order
在伸缩项上声明此属性,可以无视HTML结构的顺序而按照order从小到大的顺序沿flex-direction方向排列。比如:

CSS Code复制内容到剪贴板

  1. .item-1 {   
      order: 3;   
      ...   
    }   
    .item-2 {   
      order: 1;   
      ...   
    }   
    .item-3 {   
      order: 2;   
      ...   
    }

如何使用CSS3中的FlexibleBoxes

flex-wrap
此属性的默认值为nowrap,也就是忽略伸缩项的宽度,管你要多少住房面积,通通按照flex属性说好的分配,不许换行。

CSS Code复制内容到剪贴板

  1. .container {   
      flex-wrap: nowrap | wrap | wrap-reverse   
    }   
      
    .item {   
      width: 150px;   
    }

如何使用CSS3中的FlexibleBoxes

flex-grow,flex-shrink 和 flex-basis
上文提到的flex属性实际上是这三个属性的简写形式。这三个属性有相似性,都是表示项与项之间分配空间的相对比例关系,不同之处在于:
1. flex-grow属性:属性值为该伸缩项所占空间相对于其他伸缩项(声明了flex相关属性的项)的比值。
2. flex-shrink属性:该伸缩项相对于其他伸缩项缩小的比值,也就是说当flex-shrink: 3;时,该项所占空间为其他项的1/3。
3. flex-basis属性:属性值为该项所占空间占容器空间的百分比。

注意:对于flex-basis属性,当所有项的属性值相加<=100%时,会严格按照百分比值来渲染。当属性值相加>100%时,元素并不会溢出,而是表现为两两之间所占空间大小遵循相互的百分比比值。也就是说当存在三个伸缩项且flex-basis值都为50%时,表现行为与三个项均为flex: 1;一样。

Flexible Boxes布局模式在响应式开发中尤其好用,对不同的终端,设置元素之间的空间分配关系将会变成一件非常简单的事。

上述就是小编为大家分享的如何使用CSS3中的FlexibleBoxes了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

如何使用CSS3中的FlexibleBoxes

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

css3中矩阵如何使用

这篇文章主要介绍了css3中矩阵如何使用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css3 矩阵变化. 应用格式为:transform: matrix(a,b,c,d,e
2023-06-08

如何在CSS3中使用@media属性

本篇文章给大家分享的是有关如何在CSS3中使用@media属性,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。//语法:@media mediatype and | not |
2023-06-08

如何在CSS3中使用all属性

本篇文章给大家分享的是有关如何在CSS3中使用all属性,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。一、兼容性如下图:二、all是干嘛用的all属性实际上是所有CSS属性的缩
2023-06-08

如何在CSS3中使用content属性

这篇文章给大家介绍如何在CSS3中使用content属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。插入纯文字content:"插入的文章",或者content:none不插入内容html:XML/HTML Code
2023-06-09

如何在css3中使用animation属性

这篇文章给大家介绍如何在css3中使用animation属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。animation-name 动画名称,可以有多个值,用逗号隔开,表示绑定了多个动画animation-name
2023-06-08

perspective属性如何在CSS3中使用

perspective属性如何在CSS3中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。CSS3的transform可以做2D的操作,当然也有3D。但需要再一个拥有pers
2023-06-08

box-shadow属性如何在CSS3中使用

本篇文章给大家分享的是有关box-shadow属性如何在CSS3中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。CSS Code复制内容到剪贴板E {box-shadow:
2023-06-09

如何在CSS3中使用linear-gradient属性

本篇文章为大家展示了如何在CSS3中使用linear-gradient属性,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一、线性渐变在 Mozilla 下的应用语法:-moz-linear-grad
2023-06-08

如何使用css3做0.5px的细线

这篇文章给大家分享的是有关如何使用css3做0.5px的细线的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Webapp中的CSS3实现 0.5px的细线感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所
2023-06-08

jquery和css3中的选择器nth-child如何使用

这篇文章主要介绍“jquery和css3中的选择器nth-child如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery和css3中的选择器nth-child如何使用”文章能帮助大家解
2023-07-05

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录