前言
- 一些复杂的应用场景，我们尽可能快速去布局，flex或者是grid布局的确在一定程度上减轻了开发者在构建绘图的一些麻烦
- 不管你是否有没有特别深入的了解或者很熟练的使用这项技能，这的确需要去掌握的一项技能
- 随着各种前端UI库的层出不穷,比如tailwiindCss，是否想过你能实现类似的效果吗。
- 本次介绍示例代码在源码
- 抛砖引玉，还请其他小伙伴一起来拓展自己工作中使用到的场景
问答
- 面试官
- 能实现一个垂直居中的布局吗？说说你的思路？
- 求职者
- 定位....
- 定位 + transform ....
- 弹性盒....
- 网格布局....
是的，弹性盒、网格布局的确很轻松的实现这类效果
上一份代码吧...
弹性盒（flex）
网格（grid）
效果图
但似乎我们发现一个问题，不管是弹性盒还是网格布局 纵向没有居中，那么为什么呢？其实这也是我们后面会详细讲到的一些特性问题，这里可以先回答一波，那是因为纵向父级元素没有高度，无法确定子元素的个数，而横向默认是视窗的宽度，既然已经发现问题所在，只要给父元素设置高度值就好了
现在我们看到了元素已经垂直居中了
特性
弹性盒
- 主轴交叉轴
现在我们给子元素增加到两个
像这样
justify-content 表示子元素会沿着主轴进行位置排列和分布排列，主要常用的有下面几个值
1. 位置排列
center表示沿主轴居中flex-start表示沿主轴左对齐
flex-end表示沿主轴 右对齐
2. 分布排列
-
space-between表示子元素沿主轴均匀分布，且首尾元素间距是和父元素相切
-
space-around 表示子元素沿主轴均匀分布，且首尾元素间距是相邻元素间距的一半
-
space-evenly表示 均匀排列每个元素，每个元素之间的间隔相等
- 更多使用技参照MDN
align-items 表示子元素沿交叉轴 位置排列分布的特性
-
center表示沿交叉轴 居中显示 -
flex-start表示沿交叉轴 顶部对齐排列
flex-end表示交叉轴 沿着底部对齐
stretch如果子元素高度是auto, 那么子元素纵向会沿交叉轴拉伸和父元素一样高
- 更多使用技巧参照MDN
父元素和子元素的一些实用属性
- 父元素 设置flex-direction: column | row | row-reverse | column-reverse
- 默认主轴方向是沿着水平方向排列的
- 子元素 设置order进行排序 order值越大排在后面
<style>
.flex-order-2 {
order: 2;
}
</style>
</head>
<body>
<div
class="flex-container flex-end flex-between flex-around flex-evenly flex-stretch align-start align-end"
>
<div
class="flex-item bg-green font-20 bold-700 text-center text-color-white flex-order-2"
>
A
</div>
<div
class="flex-item bg-orange font-20 bold-700 text-center text-color-white"
>
B
</div>
</div>
</body>
3. 子元素
align-self: flex-start | flex-end | strecth
- 现在我们有一个需求 列表需要平分父元素，但希望最后多余的元素（没有完全填充的情况）保持居左显示
- 很明显 元素益处父元素
所以引出一个属性 给父元素设置flex-wrap: wrap;
但很明显 当所有子元素并没有完全填充父元素的时候，最后两个还是没有规则的展示
- 这里我们又必须知道一个常用属性 父元素设置
align-content对于多行子元素一个完善布局的方案
所以我们现在设置align-content: space-between
的确成功了
flex-grow,flex-shrink,flex-basis主要针对子元素大小的设置
现在我们将子元素设置为3个来看看这里的用法
6.1 `flex-grow`: 当子元素没有完全撑开父元素，剩余空间分配问题
6.2 `flex-shrink`: 当子元素总和溢出父元素最大宽度，进行尺寸压缩
.flex-item {
width: var(--base-item-width);
height: var(--base-item-height);
/* height: auto; */
flex-shrink: 3; //压缩比例
}
.flex-item:nth-child(2) {
flex-shrink: 2; //压缩比例
}
6.3 `flex-basis` 表示子元素width 宽度;会覆盖子元素默认值
.flex-item:nth-child(2) {
/* flex-shrink: 2; */
flex-basis: 300px;
}
总结
本次介绍示例代码在源码
本次基本讲述了flex在日常开发中常用的使用属性，欢迎分享留言
