弹性容器是什么(弹性容器的所有子元素自动成为弹性元素)

本文目录：

• 1、CSS3 弹性布局
• 2、在css中如何声明弹性
• 3、div+css3弹性盒子(flex box)布局

CSS3 弹性布局

flex 是 flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列，自动计算布局内元素的尺寸，无论元素的尺寸是固定的还是动态的，控制元素在页面的布局方向。

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

弹性容器设置属性 display:flex;

一、容器属性

flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写形式。 默认值：flex-flow: row nowrap;

⑴ flex-direction 子元素排列方向

flex-direction: row; 从左到右

flex-direction: row-reverse; 从右到左

flex-direction: column; 从上到下

flex-direction: column-reverse; 从下到上

⑵ flex-wrap 子元素换行方式

flex-wrap: nowrap; 不换行

flex-wrap:wrap; 换行

flex-wrap: wrap-reverse; 反转 wrap 排列，行颠倒

2 justify-content 子元素沿主轴对齐方式

justify-content: flex-start;

justify-content: space-between;

3 align-items 子元素在交叉轴上对齐方式

align-items: center; 垂直方向居中

align-items:flex-start; 垂直方向的顶部/交叉轴的起点对齐

align-items: flex-end; 垂直方向的底部/交叉轴的终点对齐

align-items: baseline; 项目的第一行的文字的基线对齐

align-items: stretch; 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度

二、子元素属性（写在子元素下）

align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

align-items: center;

align-items: flex-start;

align-items: flex-end;

align-items: baseline;

align-items: stretch;

order 定义子元素的排列顺序。数值越小，排列越靠前，默认为order: 0;，可以为负值。

flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间。负值无效。

flex-grow: 0; 默认值，即如果存在剩余空间，也不放大。

flex-grow: 1; 如果存在剩余空间，放大 ，等分剩余空间。

flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。

flex-shrink: 1; 默认值，即如果空间不足，缩小。

flex-shrink: 0; 不缩小。

flex-basis 定义元素的默认基准值。

设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。

如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。

链接：

在css中如何声明弹性

CSS3 弹性框(Flexible Box或Flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当排布行为的布局方式。对很多应用程序来说，由于不使用浮动，且弹性容器的外边距也不会与其内容的外边距合并，弹性框模型比起方框模型要好一些。许多设计师会发现弹性框模型易于使用。弹性框中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序与它们在源代码中的顺序无关，定位子元素变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是特意限制于视觉呈现上的，语音顺序以及基于源代码顺序的导航均不受影响。

注意：虽然CSS 弹性框布局规范还处于最终征求意见稿 (Last Call Working Draft)阶段（参见最新编辑草案），并非所有浏览器都实现了弹性框的所有功能。但，这么说吧，现在全线产品对弹性框都有良好支持。最新的兼容性状况可以查看每个具体属性的兼容性表格获取。弹性框概念弹性布局在定义方面是指调整其内项目宽高从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内项目来填充可用空间，或将其收缩来避免溢出。弹性框布局算法是方向无关的，与此相对的，块级布局侧重于垂直方向、行内布局侧重于水平方向。虽然块级布局用于页面行之有效，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性框布局主要适用于应用程序的组件及小规模的布局，而（新兴的）网格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。弹性框相关词汇表关于弹性框的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个flex-direction属性为row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。弹性容器(Flex container)包含着弹性项目的父元素。通过设置display属性的值为flex或inline-flex来定义弹性容器。弹性项目(Flex item)弹性容器的每个子元素都成为弹性项目。弹性容器直接包含的文本将包覆成匿名弹性项目。轴(Axis)每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

flex-direction属性确立主轴。

justify-content属性定义了在当前行上弹性项目沿主轴如何排布。

align-items属性定义了在当前行上弹性项目沿侧轴默认如何排布。

align-self属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由align-items所确立的默认值。

方位(Direction)弹性容器的各个边（主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)）描述了弹性条目流的起点与终点。它们具体取决于弹性容器的主轴与侧轴以及由writing-mode确立的方向（从左到右、从右到左，等等）。

order属性将元素与序号组关联起来，并决定哪些元素先出现。

flex-flow属性是flex-direction和flex-wrap属性的简写，决定弹性项目如何排布。

行(Line)根据flex-wrap属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。尺寸(Dimension)根据弹性容器的主轴与侧轴，弹性项目的宽和高相应称为主轴尺寸(main size)与侧轴尺寸(cross size)。

min-height与min-width属性初始值为 0。

flex属性是flex-grow、flex-shrink和flex-basis属性的简写，确立弹性项目的伸缩性。

指派弹性框为要使用此样式的元素指派 CSS，需按以下方式设置display属性：

display:flex或者

display:inline-flex这样做将元素定义为弹性容器，其子元素则成为弹性项目。值flex使弹性容器成为块级元素。值inline-flex使弹性容器成为单个不可分的行内级元素。

注意：厂商前缀标记应当附加给 display 属性值，而不是加给 display 属性本身。例如：display : -webkit-flex。弹性项目须知弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，只包含空白的弹性项目不会被渲染，就如同对其指派display: none。对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。相邻的弹性元素其外边距不会互相合并。使用auto外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的Aligning with ‘auto’ margins。为了确保弹性项目有合理的默认最小尺寸，使用min-width:auto与min-height:auto。对于弹性项目，属性值auto使项目的最小宽/高在计算中不会小于其内容的实际宽/高，这样可以保证项目渲染得足够大以容纳其内容。更多细节请参考min-width与min-height。不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对需要居中的弹性项目应用自动外边距来替代align-属性的使用。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用自动外边距来替代justify-属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过，如果尝试在多行的弹性框中用基于外边距的居中方法来替代justify-content，很不幸，必须对每一行的第一个和最后一个弹性项目应用外边距。除非能够事先预测每一行都结束于哪个元素，否则无法放心地在主轴方向上用基于外边距的居中方法来替代justify-content属性。重新提一下，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。order属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。弹性框相关属性不影响弹性框的属性由于弹性框使用了不同的布局算法，某些属性用在弹性容器上没有意义：

多栏布局模块的column-*属性对弹性项目无效。

float与clear对弹性项目无效。使用float将使元素的display属性计为block。

vertical-align对弹性项目的对齐无效。

示例基本的弹性布局示例这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。

htmllang=’en’headstyle.flex{/* 基本样式 */width:350px;height:200px;border:1px solid555;font:14px Arial;/* 建立弹性框 */display:-webkit-flex;-webkit-flex-direction:row;display:flex;flex-direction:row;}.flex div{-webkit-flex:11auto;flex:11auto;width:30px;/* 让过渡表现良好。（从/到’width:auto’的过渡 至少在 Gecko 和 Webkit 上是有 bug 的。 更多信息参见 ） */-webkit-transition:width0.7s ease-out;transition:width0.7s ease-out;}/* colors */.flex div:nth-child(1){background:009246;}.flex div:nth-child(2){background:F1F2F1;}.flex div:nth-child(3){background:CE2B37;}.flex div:hover{width:200px;}styleheadbodypFlexbox nuovopdivclass=’flex’divunodivdivduedivdivtredivdivbodyhtml

div+css3弹性盒子(flex box)布局

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

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

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

首先要明白几个概念：

主轴 ：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴 ：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向 ：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

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

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

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

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

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

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

决定项目的方向。

注意： 如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

属性值

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

可以取三个值：

（1） nowrap (默认)：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

数值越小，排列越靠前，默认为0。

integer：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

integer：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认为1，即如果空间不足，该项目将缩小。负值对该属性无效

integer：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

如果设置为0不进行收缩，值越大收缩越多。

本文来源：https://www.yuntue.com/post/89981.html | 云服务器网，转载请注明出处！