草庐IT

弹性盒知识点

mr. trying123 2023-04-12 原文

一、弹性盒的概念

弹性盒是css3新增的一种布局模式

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

    设置弹性盒:给父元素设置

    display:flex;  设置为块级弹性盒  独立成行

    display:inline-flex;  设置行内快弹性盒

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

    父元素设置弹性盒之后,里面的弹性子元素-类似于行内块元素,如果不设置宽高,由内容撑开;即使是行内元素也可以设置宽高

    将容器设置为flex布局之后,子元素中的float、clear、vertical-align属性都会失效

    1.弹性容器:父盒子

    2.弹性子元素(项目):子元素

    3.主轴(x轴):默认主轴为水平方向x,起点在左端,终点在右端,水平向右

    4.侧轴(交叉轴  y轴):默认侧轴为垂直方向y,起点在上端,终点在下端,水平向下

注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外 一边就是侧轴

二、设置主轴方向:

   flex-direction: row;  默认值 主轴方向为水平,起点在左端

   flex-direction: row-reverse;  主轴方向为水平,起点在右端

   flex-direction: column;  默认值 主轴方向为垂直,起点在顶端

  flex-direction: column-reverse;  主轴方向为垂直,起点在下端

三、justify-content (主轴方向上的对齐方式)

1.默认值,主轴顶端(左端)对齐

      justify-content: flex-start;

      2. 末端(右端)对齐

      justify-content: flex-end;

      3. 居中对齐

      justify-content: center;

      4. 两端对齐,子元素和子元素之间有空白空间,项目之间的间隔都相等。

      justify-content: space-between;

      5. 四周对齐,子元素之前、之间、之后都留有空白空间,且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。

      justify-content: space-around;

      6. 平均对齐 弹性项目平均分布在该行上,相邻项目的间隔,项目与容器之间空间相等*/

      justify-content: space-evenly;

四、align-items(侧轴方向上的对齐方式)

     1.默认值,如果弹性子元素没有高度或高度为auto,将占满整个容器的高度

     align-items: stretch;

     2.子元素在侧轴顶端对齐

     align-items: flex-start;

    3.子元素在侧轴末端对齐

    align-items: flex-end;

    4.子元素在侧轴中间对齐

    align-items: center;

    5.子元素在第一行文字的基线对齐

align-items: baseline;

五、弹性盒实现水平居中对齐

1.设置弹性盒

      display: flex;

    2.主轴对齐方式  居中

      justify-content: center;

    3.侧轴对齐方式  居中

      align-items: center;

有关弹性盒知识点的更多相关文章

  1. ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby,这是我的第一门编程语言。我对语法感到满意,并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法,在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明),但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法?

  2. ruby - Ruby基础知识 - 2

    Asitcurrentlystands,thisquestionisnotagoodfitforourQ&Aformat.Weexpectanswerstobesupportedbyfacts,references,orexpertise,butthisquestionwilllikelysolicitdebate,arguments,polling,orextendeddiscussion.Ifyoufeelthatthisquestioncanbeimprovedandpossiblyreopened,visitthehelpcenter提供指导。已关闭8年。什么是学习ruby语言

  3. ruby - 我应该具备哪些 Ruby 知识? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭9年前。我刚刚发现了whatc#knowledgeshouldIhave?问题和想知道的相同,但对于Ruby。我认为Ruby是我最喜欢的编程语言,除了学习基础知识外,至少我从众多RubyonRails项目和一些Ruby脚本中学到的东西,我还尝试通过阅读像Gluttonous这样的博客来学习。,O'ReillyRuby,OlaBini,和PolishingRuby.

  4. Unity基础知识之顶点吸附、创建组合体 - 2

    Unity基础知识之顶点吸附、创建组合体一、顶点吸附顶点吸附:选择物体后按住键盘上的V键,鼠标定点定位,再拖拽到目标物体对齐即可。注:操作成功后先松V键。1、两个平面Plane的顶点吸附2、两个物体cube的顶点吸附二、创建组合体(子弹)组合体子弹由2个capsule(胶囊)、1个cylinder(圆柱体)组成,如图先创建这3个对象。再将其中一个capsule按照一定比例缩小,将三个对象按照一定位置放置好。创建一个GameObject,将三个对象放在该GameObject里,这样就是父子结构。为创建的组合体即子弹可以添加材质Material:在assets目录下新建Material,选择颜色后

  5. 【操作系统】十分钟了解关于TCP/IP网络的基础知识(二)ARP、路由器、DHCP、DNS以及TCP/IP - 2

    承接上篇文章(十分钟了解关于TCP/IP网络的基础知识)五.ARP(地址解析协议)        虽说使用IP地址确实方便了我们使用者记忆以及整理归类、寻找信息的发送目的地,但是最终接收数据的地方,还是MAC地址,于是乎,为了实现有IP地址到MAC地址的转换,引入了名为ARP(AddressResolutionProtocol)又称之为地址解析协议。      ARP通过广播(Broadcast,这是个专业名词,后面还会继续提起)的方式对LAN中所有的计算机提问:“哎,谁IP地址是10.165.7.116(上篇文章中的例子)呀?你MAC地址多少啊,快过来登记一下!”,如果有哪台计算机回复了MA

  6. javascript - 我应该如何开始学习 JavaScript、jQuery 等?我的编程知识为零 - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的,因为它们往往会吸引自以为是的答案和垃圾邮件。相反,describetheproblem以及迄今为止为解决该问题所做的工作。关闭8年前。Improvethisquestion我是设计出身。我的编程知识是零。在学习了XHTML和CSS之后,我想学习并掌握JavaScript、jQuery等。我应该如何开始?这将是我第一次尝试编程。我可以使用和编辑现成可用的jQuery/JavaScript脚本,但我不能自己制

  7. 《统计学》第八版贾俊平第六章统计量及抽样分布知识点总结及课后习题答案 - 2

    一、知识框架二、练习题调节一个装瓶机使其对每个瓶子的灌装量均值为μ盎司,通过观察这台装瓶机对每个瓶子的灌装量服从标准差σ=1.0盎司的正态分布。随机抽取这台机器灌装的9个瓶子组成一个样本,并测定每个瓶子的灌装量。试确定样本均值偏离总体均值不超过0.3盎司的概率。解:设每个瓶子的灌装量为X,X为样本均值,样本容量为n。由于总体X服从正态分布,样本均值X也服从正态分布,且均值相同,标准差为所以三、简述题1什么是统计量?为什么要引进统计量?统计量中为什么不含任何未知参数?答:(1)统计量的定义:设X1,X2,…,Xn是从总体X中抽取的容量为n的一个样本,如果由此样本构造一个函数T(X1,X2,…,X

  8. Unity游戏开发前置知识 - 2

    本文适合有一定C#基础的初学者。设计模式含义:帮助我们降低对象之间的耦合度常用的方法称为设计模式。使用设计模式是为了可重用代码,让代码更容易被其他人所理解,保证代码可靠性,使代码编制真正工程化,这是软件工程的基石。分类:创建型模式:工厂方法模式、抽象工厂模式、单例模式、建造者模式、组合模式、原型模式。结构型模式:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。行为型模式:策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。单例模式含义:一个类只有一个实例,只在内部实例一次,外部无法实例化,全局

  9. 高等数学重积分知识点笔记小结 - 2

    一:二重积分1:二重积分的概念与性质:(1)首先知道什么叫曲顶柱体。(这里不多讲,不会百度)。(2)定义:设f(x,y)是有界闭区域D上的有界函数,将闭区域D任意分成n个小闭区域oi,在每个小区域上取一点f(ai,bi),做乘积f(ai,bi)oi,并作和。如果当各个闭区域的直径中的最大值max趋近于0时,这和的极限总存在,且与闭区域D的分法及点f(ai,bi)无关,那么称此极限为函数f(x,y)在闭区域D上的二重积分。 (3)二重积分的六条重要性质:性质一:设a和b为常数,则*******性质二:如果闭区间D被有限条曲线分为有限个部分闭区间,那么在D上的二重积分等于在各部分闭区间上的二重积分

  10. flex布局(弹性盒子一) - 2

    目录一、弹性盒子的开启二、弹性盒子的不同样式1.flex-direction:子项目的排列方向2.flex-wrap:子项目多行3.flex-flow是flex-direction和flex-wrap的一起指定(简写)一、弹性盒子的开启设置内容区的样式:.container{display:flex;}内容区:12这样弹性盒子就开启了二、弹性盒子的不同样式1.flex-direction:子项目的排列方向a. row正常(默认值)设置内容区的样式.container{display:flex;flex-direction:row;width:500px;height:500px;border:

随机推荐