flexBasis指定了flex元素在主轴方向上的初始大小吗

软件 2024-11-16

flex布局全解析

很长一段时间, 我知道有 flex 这个布局方式, 但是始终没有去学它. 3点原因:
最近由于开发需要, 学习了下WeUI的实现 , 发现里面大量使用了 flex 布局, 于是决定学习一下.
Flexbox Layout , 官方名为 CSS Flexible Box Layout Module , 意为"弹性布局", 是CSS3中引入的一种更加灵活高效的布局/对齐/排序方式(还有一种更适合大型布局的网格布局 CSS Grid Layout Module ). flex 是 flexible 的缩写.
任何一个容器都可以指定为flex布局。
行内元素也可以使用flex布局。
采用flex布局的元素被称为 flex容器 (flex container) , 它的子元素即为 flex元素 (flex item) .
flex容器中包含两个相互垂直的轴, 即主轴 (main axis) 和副轴 (cross axis) .
flex元素沿主轴从主轴起点 (main start) 到主轴终点 (main end) 依次排布.
如果flex容器包含多行flex元素, 则 flex行 (flex lines) 沿副轴从副轴起点 (cross start) 到副轴终点 (cross end) 依次排布.
单个flex元素占据的主轴空间叫做主轴长度 (main size) , 占据的副轴空间叫做副轴长度 (cross size) .
Getting Dicey With Flexbox 中提到:
前一段时间同事做过 video 相关的开发, 踩到各种坑, 因此我知道 video 的支持不那么好, 特别是在Android上. 让我惊奇的是 flex 竟然比 video 的支持更好?
从 CanIUse 的数据来看, flex 的支持度是: 82.65% (支持) + 14.17% (部分支持) = 96.81% , 而 video 的支持度是: 92.48% . 浏览器对 flex 的支持好像并没有特别好...
但是有微信的WeUI使用了 flex 布局, 我觉得在移动端 flex 应该还是支持度比较高的.
所以, 如果你是做移动端开发的, 可以优先考虑 flex .
下面就开始介绍与 flex 布局相关的属性. 以作用对象分为两组, 第一组作用于flex容器, 第二组作用于flex元素.
注意: 以下属性值都可以有 initial (该属性的默认值)和 inherit (继承自父元素), 本处省略.
这类属性有6种, 分别为:
注意:
注意: row 和 row-reverse 受到了 direction 属性(默认值为 ltr , 可改为 rtl )的影响.
注意: 此属性只在flex容器中有多行 flex元素时才有作用.
这类属性有6种, 分别为:
注意: flex元素的 float , clear 和 vertical-align 会失效.
当flex元素有父元素时, 它的 align-self: auto 即为父元素的 align-items 属性; 否则(无父元素时), 相当于 stretch .
当有剩余空间时, flex元素会根据 flex-grow 按比例分配剩余空间.
默认值 0 代表, 即使有剩余空间, 该flex元素也不放大.
当flex容器空间不足时, flex元素会根据 flex-shrink 按比例缩小.
flex-shrink 为 0 则表示, 即使flex容器空间不足, 该flex元素也不缩小.
flex-basis 定义了分配剩余空间之前flex元素的初始大小, 可为长度值(如 20% , 5rem 等)或 auto 等关键词.
flex-basis: auto 表示, 以 flex元素的主轴长度为 flex-basis . 若flex元素的主轴长度也是 auto , 则以flex元素内容(即所有子元素)的大小为 flex-basis .
除了 auto 还有 content , max-content , min-content 和 fit-content 关键词, 但是现在浏览器对它们的支持太少, 可以忽略.
(敲黑板) 同学们注意, 这里是重点!
这里的可选值我参照了 W3C flexbox 的写法. 其中:
举例来说, a | [ b || c ] 包含的可能情况有 a , b , c , b c , c b .
现在回过头来再看 none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] 就清晰多了.
注意, none 是一个特殊值, 相当于 0 0 auto .
另外, 如果 flex 中不指定:
注意: flex 的初始值是 0 1 auto , 即由每个 flex 因子本身的默认值组成(比方说 flex-grow 的默认值就是 0 ).
但是 , 如果利用 flex 设置了至少一个 flex 因子, 那么没被设置的那些 flex 因子的默认值(按grow, shrink, basis的顺序)分别是 1 1 0 .
我来举几个栗子.
W3C建议使用简写形式 flex , 因为它可以方便地应对下面4种常见情况 .
自此, 我们已经知道了 flex-grow , flex-shrink 和 flex-basis 的作用. 根据这三个值, 计算flex元素的大小只需三步:
第一步: 计算元素的 flex-basis , 有两种情况: 1. 具体的长度值, 或, 2. auto (即flex元素的大小). (这里忽略了 content 等目前支持还不完善的关键词).
第二步: 计算剩余空间, 即剩余空间 = flex容器的内部空间 - flex元素flex-basis值的总和 .
第三步: 按照 flex 因子(放大时为 flex-grow ; 缩小时为 flex-shrink )分配剩余空间到每个元素. flex元素的最终大小 = flex-basis - flex-factor * 剩余空间 .
举个栗子.
假设flex容器的内部空间为 200px , flex元素的大小的总和是 160px . 看起来, 还有 200 - 160 = 40px 的剩余空间, 应该放大flex元素, 是不是? 不一定! 要看它们的 flex-basis 总和.
假设它们的 flex-basis 总和是 300px , 那么剩余空间应该是 300 - 200 = -100px . 此时剩余空间是负数 , 应该以 flex-shrink 对每个flex元素在 flex-basis 的基础上进行缩小 .
下例中, 所有flex元素本身的大小为 80px , 元素中为 flex 值.
200px
0 1 auto
0 3 auto
0 1 150px
0 3 150px
125px
75px
你可以看到, 第一行的flex元素因为设置了 flex-basis:auto , 所以它们的 flex-basis 就相当于元素大小, 即 80px , 即 flex-basis 总和为 160px , 不足容器的 200px 空间, 此时应该放大元素. 但又由于元素的 flex-grow 为 0 , 所以每个元素分配到 0 * 40 = 0px 的剩余空间, 即不放大.
第二行的flex元素设置了 flex-basis:150px , 所以它们的 flex-basis 总和为 300px , 超过了容器的 200px 空间, 故按照 flex-shrink (比例为 1:3 )进行缩小. 由于剩余空间为 -100px , 所以第一个元素应缩小 25px 变成 125px , 第二个元素应缩小 75px 变成 75px .
绝对flex: 从0开始分配空间.
第一行中 flex-basis 为 0 , 表示每个flex元素的初始大小都视为 0 . 此时, 剩余空间就是"flex容器的大小".
相对flex: 从flex元素大小开始分配空间.
第二行中 flex-basis 为 auto , 表示每个flex元素的初始大小都是它本身的大小. 此时, 剩余空间就是"flex容器的大小 - flex元素大小的总和".
呃... flex的东西还是挺多的, 特别是 flex 因子相关的部分, 得花点儿时间理解.
但是, 我相信学flex是值得的, 谁用谁知道!

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的宽度会自动缩小，直到占满容器。
链接：
https://juejin.cn/post/7038088241437736991

web前端--网页布局（盒子模式、弹性盒子、网格）

布局的传统解决方案，基于[盒状模型]，于那些特殊布局非常不方便。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
2009年诞生的这个属性可以说是不亚于 css界一场蒸汽机诞生一样的工业革命，它的诞生标志着马车一样的 float被彻底抛进历史的垃圾堆。
通过display：flex 将对象设置为弹性盒子，以下属性必须熟记于心。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
容器属性：
flex-direction（决定主轴的方向）
flex-wrap（决定是否换行）
flex-flow（ || ;）
justify-content（主轴方向对齐方式）
align-items（交叉轴方向对齐方式）
align-content（多轴情况下沿交叉轴对齐方式）
项目属性：
order：数值越小，排列越靠前，默认为0。
flex-grow:项目的放大比例，默认为0
flex-shrink:项目的缩小比例，默认为1
flex-basis:项目占据主轴的大小
flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self：单个项目有与其他项目不一样的对齐方式
flex-box无疑是布局上面的神器
网格布局同样是布局方面的神器，目前不太常用。
display:grid; 设置网格
必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-columns 和 grid-template-rows 设置列和行的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中
网格属性：
display：grid| subgrid
grid-template-columns：设置列
grid-template-rows：设置行
grid-template-areas：设置区域
grid-template：none | subgrid | / ;前面三个属性合体
grid-column-gap：设置列间距
grid-row-gap：设置行间距
grid-gap：

flex布局

注：实际使用中一般不说左右上下，而是以start、end的位置来定义和描述排列展示方向
无flex的img标签：
设置img(行内元素)为flex布局:
若设置为nowarp(flex-warp的默认值)，由于默认值flax-basis为auto，因此会对元素进行缩放操作，即缩放至适应盒子的尺寸。
而若某个元素无法缩放(例如设置了宽度)则会将溢出。
如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。
basis定义了该元素的布局空白（available space）的基准值。若设定为auto，则会检测该元素(一个felx-item)的宽度并作为basis的值，若未设定宽度，则使用内部元素(如文字、图片等)的宽度作为basis的值。
确定各个basis后，则会得出空白部分的大小，如上图中总宽度为500px，各个basis均为100px，则空白大小为200px。而对这200px的使用，会通过flex-grow定义。
flex-grow定义了元素的放大(沿主轴方向增长尺寸)情况。flex为0则不进行拉伸，flex为其余正整数，则会通过计算权重将空白部分摊分给各个元素，如第一个元素为2，其余为1，则会将200*2/4=100px摊分给a，50px摊分给b，50px摊分给c，试的三个字母各自进行拉伸(只是所处盒子的大小进行拉伸，字母本身不会拉伸变形)。
flex-shrink则定义了元素的缩放情况。那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。在计算flex元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上flex-shrink属性可能会和flex-grow属性表现的不一致。
flex的对齐主要是指在cross轴上的对齐方式(主轴或者说main轴可以通过定义宽度、flex-grow flex-shrink flex-basis等进行自定义对齐)。
这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。
你也可以设置align-items的值为flex-start，使flex元素按flex容器的顶部对齐, flex-end 使它们按flex容器的下部对齐, 或者center使它们居中对齐.
justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。")属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start，元素从容器的起始线排列。但是你也可以把值设置为flex-end，从终止线开始排列，或者center，在中间排列.
你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。
在实例中尝试下列justify-content属性的值：

flex弹性布局

弹性布局可以响应式的实现各种页面布局，所有浏览器都支持。
让所有的li在ul当中垂直居中，实现如下：
效果如下：
接下来再细聊每个属性的特性。
任何一个容器都能使用flex布局，这里有一个flex-container的概念。ul即为flex-container，li是容器内的所有单元吧，官方叫项目，flex item。
借官方几句话：容器默认存在两根轴，水平主轴main axis和垂直交叉轴cross axis，主轴开始位置与边框交叉点叫main start,结束位置main end,交叉轴开始位置cross start,结束为止cross end,项目默认按照主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
一、flex-container有6个属性
1、flex-direction: row | row-reverse | column | column-reverse;
按顺序展示效果
2、flex-wrap: nowrap | wrap | wrap-reverse;
更改ul宽度为460px后，li宽100px，当ul宽度减小小于li总宽度时，设置flex-wrap: nowrap，不换行，项目依然排在一条轴线上，但是宽度缩小。
3、flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: row nowrap = = flex-direction: row;flex-wrap: nowrap;
4、justify-content: flex-start | flex-end | center | space-between | space-around; 定义了项目在主轴上的对齐方式，以上所有图均设置了 justify-content: space-around；效果依次如下：
5、align-items: flex-start | flex-end | center | baseline | stretch; 该属性定义了项目在交叉轴上的对齐方式
在此属性之前以上的属性案例都是设置align-items：center 对齐方式为交叉轴中点对齐
如果li未设置高度或为auto，那么项目将充满整个容器高度。
6、align-content: flex-start | flex-end | center | space-between | space-around | stretch;该属性定义多根轴线的对齐方式，容器内的项目只有一根轴线时，该属性不起作用。我们得调整一下ul li的样式了。调整flex-wrap:wrap;换行出现多条轴
容器高度400px, 项目高度100px, 设置完align-content: space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
二、flex-item项目的属性
1、order：数值越小，排列越靠前，默认值为0
2、flex-grow: ; 定义项目的放大比例，默认为0，如果存在剩余空间也不放大。
设置为2的比1的占据的空间多1倍，60px
3、flex-shrink: ; 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，负值无效。
该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的
值越大，缩小的越厉害。如果值为0，表示不缩减小。
4、flex-basis: | auto; flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。注意单词别打错了，不是basic！！！
5、flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]   有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间, flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
默认值 0 1 auto 如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
这里有个面试题：当flex：1时，其三个属性值是什么？对应的值是多少？
flex: 1; 相当于flex: auto 默认三个属性值是1 1 auto ；flex-grow、flex-shrink 和 flex-basis 放大不缩小，按照项目原本大小
flex: none; 三个属性值0 0 auto
flex: initial; 三个属性值 0 a auto 默认值
6、align-self: auto | flex-start | flex-end | center | baseline | stretch |initial | inherit;
把li的高度设置去掉，来看这几个属性值的效果。
align-self: auto;  align-self: center; align-self: initial; align-self: inherit; 这几个效果没啥差距
align-self: auto; 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
align-self: center; 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
align-self: initial; 设置该属性为它的默认值，等同于 align-self: auto;
align-self: inherit;  从父元素继承该属性，等同于align-self: auto;
align-self: flex-start；弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
align-self: flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。？？什么是内轴和测轴？？小疑问
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。注意: Internet Explorer 和 Safari 浏览器不支持 align-self 属性

标签：编程语言软件未分类 JavaScript 互联网