弹性增长-flex-direction

时间：2023-03-31 12:58:33 CSS

flexofcssflex是CSS的一个特性，通过flex可以灵活地布局某个区域内的多个元素，特别适用于移动端布局。与flex相关的CSS属性不只一个，而且其中一些非常复杂。那么，让我们一一进行。1:display:flex要使用flex属性，你必须先在你希望其子元素布局的容器上使用这个属性。2:弹性增长:1|2|...Numberflex-grow只接受数值，不接受负数。用在要布局的元素上，表示子元素分配到的空间，准确的说是比例。我们来看一段代码。//html1

//css.container{display:flex;}.item{flex-grow:2;背景：黄色；边框：1px实心；}.short{flex-grow:1;background:pink;}效果：在上面的例子中，我们一共有4个div，其中3个的flex-grow为1，1个的flex-grow为2。其实就是我们整个的宽度container平均分为5个部分，第三个div占2/5，其他三个占1/5.3：flex-directionflex-direction看名字就知道，它跟在方向相关的属性上。它用在容器上以确定其子元素的排列方向。它接受4个值：1:row2:row-reverse3:column4:column-reverse在第一个例子中，我们没有添加flex-direction属性，因为它的默认值为'row'。接下来，我们将对容器使用这四个值，以便直观地感受差异：1：row.container{display：flex;flex-direction:row;}结果：子元素按照它们在HTML2中出现的顺序水平排列：row-reverse。里面出现的顺序是颠倒的，3个横向排列：column.container{display:flex;弹性方向：列；height:200px;}作用：子元素按照HTML中出现的顺序垂直排列，根据flex-grow的值将容器的高度除以4：column-reverse.container{display:flex;弹性方向：列反转；height:200px;}作用：子元素按照在HTML中出现的先后顺序进行倒序排列，根据flex-grow的值划分容器的高度下面我们来讨论一些极端情况：1：flex容器设置固定高度，flexcontainer{flex-direction:column;}flexitems设置高度。这种情况的表现是，物品会垂直排列。当所有item的高度之和小于容器的高度时，item的高度就是设置的高度，该高就高；但是，如果经过数值计算，所有item的高度之和超过了container的高度，此时container的高度会被item除以，由item在竖直方向填充；item之间的高度比例与自己设置的高度比例一致，就像使用flex-grow的一样效果是一样的2：flexcontainer设置固定高度，flexcontainer{flex-direction:column;}flexitems此时不设置高度，item会根据内容自己拉伸，该多高就多高be3:flexcontainer不设置高度，flexcontainer{flex-direction:column;}flexitems设置一个px高度或者不设置heightitem会垂直排列，高度由自身内容决定，高度为container是item高度之和4：设置一个flexcontainer固定高度，flexcontainer{flex-direction:column;}flexitem{flex-grow:1|2|n};项目垂直排列，所有项目平均共享容器的高度

上一篇：前端面试日更多解答2020-03-17

下一篇：网格布局快速入门

弹性增长-flex-direction相关文章