理解Flexbox弹性盒子

最新推荐文章于 2025-01-31 22:07:09 发布

weixin_30244681

最新推荐文章于 2025-01-31 22:07:09 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cndotabestdota/p/7156027.html

本文详细介绍Flexbox布局的基础知识，包括如何使父元素成为Flex容器、Flex容器的各种属性及其作用、Flex项目的属性设置等内容，帮助读者深入理解并掌握Flexbox布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档

1：要开始使用Flexbox，必须先让父元素变成一个Flex容器。

你可以在父元素中显式的设置display:flex或者display:inline-flex。就这么的简单，这样你就可以开始使用Flexbox模块。

2.Flex容器属性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

flex-direction: row || column || row-reverse || column-reverse;

flex-wrap: wrap || nowrap || wrap-reverse;

flex-flow:flex-flow是flex-direction和flex-wrap两个属性的速记属性

你还记得使用border的速记写法？border: 1px solid red。这里的概念是相同的，多个值写在同一行，比如下面的示例：

ul {
    flex-flow: row wrap;
}

justify-content属性可以接受下面五个值之一：

ul {
    justify-content: flex-start || flex-end || center || space-between || space-around
}

align-items属性类似于justify-content属性。只有理解了justify-content属性，才能更好的理解这个属性。

align-items属性可以接受这些属性值：flex-start || flex-end || center || stretch || baseline。

ul {
    align-items: flex-start || flex-end || center || stretch || baseline
}

它主要用来控制Flex项目在Cross-Axis对齐方式。这也是align-items和justify-content两个属性之间的不同之处。

align-content

还记得前面讨论的wrap属性吗？我们在Flex容器中添加了更多的Flex项目。让Flex容器中的Flex项目多行排列。

align-content属性用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式，排列效果和align-items值一样，但除了baseline属性值。

像align-items属性一样，它的默认值是stretch。你现在应该熟悉这些值。那它又是如何影响Flex容器里的10个Flex项目多行排列方式。

3.Flex项目属性

order || flex-grow || flex-shrink || flex-basis

flex-basis

记得前面我说过，Flex项目是当我没有的。但我们也可以控制。

flex-basis属性可以指定Flex项目的初始大小。也就是flex-grow和flex-shrink属性调整它的大小以适应Flex容器之前。

前面介绍的是非常生要的，所以我们需要花一点时间来加强对他们的理解。

flex-basis默认的值是auto。flex-basis可以取任何用于width属性的任何值。比如 % || em || rem || px等。

注意：如果flex-basis属性的值是0时，也需要使用单位。即flex-basis: 0px不能写成flex-basis:0。

默认情况，Flex项目的初始宽度由flex-basis的默认值决定，即：flex-basis: auto。Flex项目宽度的计算是基于内容的多少来自动计算（很明显，加上了padding值）。

flex速记

flex是flex-grow、flex-shrink和flex-basis三个属性的速记（简写）。

注意它们之间的顺序。flex-grow第一，然后是flex-shrink，最后是flex-basis。缩写成GSB，可以帮助你更好的记忆。

如果flex属性值中少一个值，会发生什么呢？

如果你只设置了flex-grow和flex-shrink值，flex-basis可能是默认值0。这就是所谓的绝对flex项目。只有当你设置了flex-basis，你会得到一个相对flex项目。

flex: 0 1 auto

li {
    flex: 0 1 auto;
}

这相当于写了flex默认属性值以及所有的Flex项目都是默认行为。

flex: 0 0 auto

li {
    flex: 0 0 auto;
}

这个相当于flex: none。

还是老规矩：宽度是被自动计算，不过弹性项目不会伸展或者收缩（因为二者都被设置为零）。伸展和收缩开关都被关掉了。

它基本上是一个固定宽度的元素，其初始宽度是基于弹性项目中内容大小。

flex: 1 1 auto

这与 flex: auto 项目相同。

还是按我前面立的规矩。即，自动计算初始化宽度，但是如果有必要，会伸展或者收缩以适应整个可用宽度。

伸展和收缩开关打开了，宽度自动被计算。

flex: "positive number"

这里正数可以代表任何正数（没有引号）。这与 flex: “正数” 1 0 相同。

flex: 2 1 0 与写为 flex: 2 是一样的，2 表示任何正数。

li {
    flex: 2 1 0; / *与 flex: 2相同 */
}

与前面我立的规矩一样，即，将弹性项目的初始宽度设置为零（嗯？没有宽度？），伸展项目以填满可用空间，并且最后只要有可能就收缩项目。

弹性项目没有宽度，那么宽度该如何计算呢？

这个时候 flex-grow 值就起作用了，它决定弹性项目变宽的程度。由它来负责没有宽度的问题。

当有多个弹性项目，并且其初始宽度 flex-basis 被设置为基于零的任何值时，比如 0px，使用这种 flex 简写更实用。

实际发生的是，弹性项目的宽度被根据 flex-grow 值的比例来计算。

记住设置 flex-grow : 1，会让弹性项目填满可用空间。伸展开关打开了。

这里有两个弹性项目。一个的 flex-grow 属性值是 1，另一个是 2，那么会出现啥情况呢？

两个项目上的伸展开关都打开了。不过，伸展度是不同的，1 和 2。

二者都会填满可用空间，不过是按比例的。

它是这样工作的：前一个占 1/3 的可用空间，后一个占 2/3 的可用空间。

绝对和相对Flex项目

一个相对Flex项目内的间距是根据它的内容大小来计算的。而在绝对Flex项目中，只根据 flex 属性来计算，而不是内容。

绝对Flex项目的宽度只基于 flex 属性，而相对Flex项目的宽度基于内容大小。

align-self

align-self 属性更进一步让我们更好地控制弹性项目。

你已经看到 align-items 属性是如何有助于整体对齐弹性容器内的所有弹性项目了。

如果想改变一个弹性项目沿着侧轴的位置，而不影响相邻的弹性项目，该怎么办呢？

这是 align-self 属性大展拳脚的地方了。

该属性的取值可以是这些值之一：auto || flex-start || flex-end || center || baseline || stretch。

Auto-margin 对齐

当在Flex项目上使用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有剩余空间。

解决嵌套中的flex容器的占用空间比例问题

一定有办法让所有这些放在一行，每个段落占据该行相等空间。用Flexbox来搞定！这里的概念与很多栅格系统中用的一样。

li {
  display: flex; /*段落现在显示在一行上*/
  padding: 0 20px; /*留点呼吸空间*/
  min-height: 50px;
}

li p {
  flex: 0 0 25%; /*这是甜面酱*/
}

看到段落会发生什么了吗？

flex: 0 0 25%;

“不要伸展或者收缩，不过每个段落应该占据 25% 的可用空间” 。段落所占空间是相等的。

转载于:https://www.cnblogs.com/cndotabestdota/p/7156027.html