CSS伸缩盒布局实例分析

这篇文章主要介绍“CSS伸缩盒布局实例分析”，在日常操作中，相信很多人在CSS伸缩盒布局实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS伸缩盒布局实例分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！伸缩容器： 一个元素设置 CSS 属性 display:flex 或者 display:inline-flex ，该元免费云主机、域名素就变为伸缩容器。伸缩项目： 伸缩容器的子元素就是伸缩项目。伸缩项目的特点：伸缩项目会在伸缩容器默认中水平排列。伸缩项目可以设置宽高、内外边距且不存在外边距塌陷， 不会脱离文档流，具有伸缩性。一个元素可以同时是伸缩项目和伸缩容器。主轴： 伸缩项目沿着主轴排列， 默认的主轴方向是从左到右。侧轴： 与主轴垂直的轴叫侧轴，侧轴方向随主轴方向变化。给伸缩容器给 CSS 属性 flex-direction 可以设置主轴方向，值如下：给伸缩容器 CSS 属性 flex-wrap 可以设置伸缩项目在主轴方向上的换行方式，属性的值如下：flex-flow 是 flex-directrion 和 flex-wrap 的复合属性，可以同时设置主轴方向和换行方式。flex-flow 可以设置 1 个值也可以设置 2 个值（两个值之间没有顺序要求）。给伸缩容器设置 justify-content 属性，可以设置伸缩项目在主轴上的对齐方式，属性的值如下：给伸缩容器设置 align-items 属性进行设置，属性值如下：给伸缩容易设置 align-content 属性进行设置，属性值如下：总结：align-content 实际上设置的是多条主轴之间如何对齐。align-items 属性不论一条主轴线还是多条主轴线都会起作用；但是 align-content 只对多条主轴线情况下起作用。flex-basis 指定长度可以设置该伸缩项目在主轴上的长度。如果不设置 flex-basis，伸缩项目在主轴上的长度取决于所设置的 width 或者 height。指定数字表示扩展的比率，该属性的默认值是 0。伸缩项目发生扩展的前提： 伸缩容器在主轴方向向上有富余的长度。伸缩项目进行扩展的时候只考虑伸缩项目的扩展比率。指定数字表示收缩的比率，该属性的默认值是 1。伸缩项目发生收缩的前提： 伸缩容器在主轴方向上长度不足。伸缩项目进行收缩既要考虑收缩比率，也要考虑收缩项目原来在主轴上的长度。同时设置扩展比率、收缩比率、主轴基准长度，设置规则如下：使用 order 属性设置伸缩项目的排序，值是数字，数字越小排序越靠前，可以是负值。默认值是 0。给伸缩项目设置属性 align-self 可以单独设置该伸缩项目在侧轴上的对齐方式，属性的值与 align-items 一致。CSS3 弹性盒（Flexible Box 或 flexbox ），是一种当页面需要适应不同的屏幕大 小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素 进行排列、对齐和分配空白空间。容器 使用弹性盒布局的父元素 display:flex;本质：给父盒子添加flex属性，来控制子盒子的位置和排列方式。主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-direction属性。　　侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。Flex父容器属性要改变元素的模式为伸缩容器，需要使用display属性。flex:设置为块级伸缩容器。inline-flex:设置为内联级伸缩容器。输出结果：块级伸缩容器与内联级伸缩容器类似，默认都是从左往右排列，唯一不同的是块级伸缩容器独占一行，而内联级伸缩容器随着内容改变。　　Flex容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。浮动无法影响伸缩容器，而且伸缩容器的margin与其内容的margin不会重叠。如果内联伸缩容器设置了浮动，元素将会以块级伸缩容器显示。到此，关于“CSS伸缩盒布局实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: vue中mounted和created有哪些区别

本篇内容介绍了“vue中mounted和created有哪些区别”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！区别：1、created在模板渲染成html前调用…