客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
背景 flex布局更有效的实现对齐，空间分配。最近又学习下flex子元素的尺寸计算规则，主要是 一、基本概念 1.1 主轴(Main axis) 定义了flex元素布局起始点和方向，flex子元素在主轴上依次放置。 主轴有4个方向，通过
水平方向，从左到右，默认的
水平方向，从右到左
垂直方向，从上到下
垂直方向，从下到上 1.2 主轴的尺寸（Main axis size） 就是flex容器content矩形（不包含padding, border, margin区域）在主轴方向的尺寸。 1.3 交叉轴（Cross axis） 交叉轴就是跟主轴锤子的方向，主要用于flex元素的对齐。 1.4 交叉轴的尺寸（Cross axis size） 就是flex容器content矩形（不包含padding, border, margin区域）在Cross轴方向的尺寸。 1.5 flex盒模型（flex box） display为 1. flex容器包含的不仅是flex元素，也包含空白空间。 2. 涉及的CSSflex-directionflex-wrapflex-flow
flex-direction和 flex-wrap的简写。
控制flex容器内容（flex元素和空白空间）在主轴方向对齐。注意区分align-items。
控制多行flex容器个行的对齐方式。
控制flex容器内容（flex元素和空白空间）在交叉轴方向对齐。 Tip： 1、这些CSS属性都是有相关性的： 首页先指定flex容器的主轴方向(flex-direction), 如果flex子元素超过在主轴 尺寸，那就涉及是否换行（flex-wrap）。如果没有超过主轴尺寸，那就涉及行内对齐（justify-content）, 如果存在多行每个行直接也要对齐（align-content）。 2、可能比较容易混淆 justify-content，align-content，align-items。 记住content是指flex元素和空白空间，items指的是flex元素。这样就容易就是这三个属性的用处了。 1.6 flex元素(flex items) 1. 语法 flex box的子元素，不包含流外子元素（ absolute, fix元素），但是包含float元素。 flex子元素相邻的margin不会发生合并。 float元素作为flex子元素时，float属性无效（因为要参与flex布局，不是流式布局）。 2. 涉及CSS属性
指定flex元素在主轴方向上占用flex容器的尺寸，默认为auto，即以flex元素的尺寸作为其占用的尺寸（主轴是row取值flex元素的宽度，主轴是column取值flex元素的高度），根据该属性计算是否有空余空间。 注意：flex元素占用的尺寸跟flex-basis有关，跟元素的宽高没直接关系。
指定各个flex元素弹性增长因数，即占用正空白空间（positive free space）的比例份额数量。0值（默认值）表示不占用空白空间
指定各个flex元素弹性收缩因数，即分配负空白空间（negative free space）的比例份额数量。但是元素不能无限收缩为0，也不能小于元素的最小尺寸（如min-width或者min-height）。
flex-grow flex-shrink flex-basis简写
调整自己在交叉轴的对齐方式，只有在不撑满交叉轴时，这个属性才有效。
指定顺序 二、计算自由空间和flex-basis flex子元素在主轴上的比例依赖这三个CSS属性：
其中： 2.1 规则
2.2 剩余自由空间计算 自由空间计算 期望自用空间 剩余自由空间计算 = 自由空间计算 - 期望自用空间 正自由空间 负自由空间 三、深入了解flex-grow 3.1 规则 如果存在正自由空间（positive free space），则采用
但毕竟蛋糕就一个，flex容器尽量满足felx子元素的要求，采用一种简单的按照比例分蛋糕方式：
3.2 Demo1：按照比例分蛋糕
function demo1() {
return (
<>
<div className="flex">
<div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10}}>One</div>
<div className="item" style={{flexBasis: 150, flexGrow: 2, }}>Two</div>
</div>
<style jsx>{`
.flex {
display: flex;
width: 600px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
}
`}</style>
</>
)
}
解析： 计算剩余自由空间
计算各个flex子元素增长尺寸
3.3 Demo2：SUM(flex-grow) < 1
function demo3() {
return (
<>
<div className="flex">
<div className="item" style={{flexBasis: 100, flexGrow: 0.2, marginRight: 10}}>One</div>
<div className="item" style={{flexBasis: 150, flexGrow: 0.3, }}>Two</div>
</div>
<style jsx>{`
.flex {
display: flex;
width: 600px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
}
`}</style>
</>
)
}
解析： 计算剩余自由空间
计算各个flex子元素增长尺寸
注意： 如果SUM(flex-grow)小于1，此时剩余空间没有全部分配给各个flex子元素。 3.3 Demo3 跟max-width冲突 留意该栗子中：
function demo4() {
return (
<>
<div className="flex">
<div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10, maxWidth: 150}}>One</div>
<div className="item" style={{flexBasis: 150, flexGrow: 2 }}>Two</div>
<div className="item" style={{flexBasis: 100, flexGrow: 3 }}>Three</div>
</div>
<style jsx>{`
.flex {
display: flex;
width: 800px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
box-sizing: border-box;
}
`}</style>
</>
)
}
解析： 计算剩余自由空间 flex容器主轴尺寸 = 800px 元素one的希望尺寸 = 100px(flex-basis) + 10px(margin-right) = 110px 元素two的希望尺寸 = 150px(flex-basis) = 150px 元素three的希望尺寸 = 150px(flex-basis) = 150px 剩余自由空间 = 800px - 110px - 150px - 150px = 390px，即存在正剩余空间。 计算各个flex子元素增长尺寸
这样元素one的尺寸就是 元素two和元素three重新分配剩下是自由剩余空间，即回到步骤1重新计算。
3.4 小结：
四、深入了解flex-shrink 4.1 规则 如果存在负自由空间（negative free space），则采用
flex容器都感动哭了，但为了照顾各个flex子元素的感受，采用了一个“更合理”的分摊规则：
计算的规则比上面的要复杂一些，不是简单的切分negative-free-space。收缩量不仅依赖flex-shrink,还依赖flex-basis。这样做只是为了“更合理”，即相同的flex-shrink情况下，flex-basis越小的flex元素收缩的越慢（跟纳税一样，收入越高交的越多）。 注意： 如果flex-shrink总和小于1，则表示部分负自由空间被分摊了（即有些尺寸没有被收缩）。 4.2 Demo1：“减少贫富差距”
function demo5() {
return (
<>
<div className="flex">
<div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10}}>One</div>
<div className="item" style={{flexBasis: 150, flexGrow: 2, flexShrink: 2 }}>Two</div>
</div>
<style jsx>{`
.flex {
display: flex;
width: 300px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
}
`}</style>
</>
)
}
解析（过长跟flex-grow过程类似）： 计算剩余自由空间
计算各个flex子元素收缩尺寸
4.2 Demo: SUM(flex-shrink) < 1
function demo8() {
return (
<>
<div className="flex">
<div className="item" style={{flexBasis: 100, flexShrink: 0.2, marginRight: 10}}>One</div>
<div className="item" style={{flexBasis: 150, flexShrink: 0.3 }}>Two</div>
</div>
<style jsx>{`
.flex {
display: flex;
width: 300px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
}
`}</style>
</>
)
}
flex子元素超出了flex容器。 解析： 计算剩余自由空间
计算各个flex子元素收缩尺寸
4.4 Demo3: box-sizing =border-box 留意：元素one, two
function demo6() {
return (
<>
<div className="flex">
<div className="item" style={{flexBasis: 100, flexGrow: 1, marginRight: 10}}>One</div>
<div className="item" style={{flexBasis: 150, flexGrow: 2, flexShrink: 2 }}>Two</div>
</div>
<style jsx>{`
.flex {
display: flex;
width: 200px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
box-sizing: border-box;
}
`}</style>
</>
)
}
解析： 计算剩余自由空间
计算各个flex子元素收缩尺寸
4.5 Demo5 跟min-width冲突 留意该栗子中： 元素one的
function demo7() {
return (
<>
<div className="flex">
<div className="item" style={{flexBasis: 100, flexShrink: 2, marginRight: 10, minWidth: 60}}>One</div>
<div className="item" style={{flexBasis: 150, flexShrink: 2 }}>Two</div>
<div className="item" style={{flexBasis: 100, flexShrink: 1 }}>Three</div>
</div>
<style jsx>{`
.flex {
display: flex;
width: 300px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
}
`}</style>
</>
)
}
解析： 计算剩余自由空间
计算各个flex子元素收缩尺寸
元素two和元素three重新分配剩下是自由剩余空间，即回到步骤1重新计算。
4.6 小结
参考 css-tricks: A Complete Guide to Flexbox 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论