flex深入浅出—基本属性、优势特色、性能影响

最新推荐文章于 2023-01-31 20:14:15 发布

cb++

最新推荐文章于 2023-01-31 20:14:15 发布

阅读量1k

点赞数

文章标签： ui 前端 css3

本文链接：https://blog.csdn.net/weixin_44768794/article/details/123898535

版权

1. flex基本属性需知

1.1 flex是什么

== flex是一个可以简便、完整、响应式地实现各种页面布局的布局方式==
例如：垂直居中、两栏布局就可以使用flex布局简便的实现

<div class="wrap">
  <div class="box"></div>
</div>

.wrap {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}

.box {
  height: 100px;
  width: 100px;
  border: 1px solid blue;
}

在这里插入图片描述

.wrap { display: flex; }
.left { width: 200px; }
.right { flex: 1; }

在这里插入图片描述

1.2 开启flex布局

1.2.1 flex属性

flex元素分为两大类

开启了flex布局的元素称为 flex-container，也就是父元素
flex-container里面的直接子元素被称为flex items，即子元素

1.2.2 设置display属性

display: flex; flex-container的属性为block-level 块级元素
display: inline-flex; flex-container的属性为inline-level 行内块元素
如果一个元素的父元素开启了flex布局，其子元素的display属性对自身的影响会失效，但是对其内容的影响依旧存在

1.3 父元素flex-container上的属性

flex-flow

flex-direction和flex-wrap的缩写 flex-flow: column wrap;

flex-direction

决定主轴的方向

row（左到右）
row-reverse（右到左）
column（上到下）
column-reverse（下到上）

flex-wrap

wrap
nowrap（父盒子宽度不变、子盒子宽度变化，这也是flex布局成为弹性布局的原因）
wrap-reverse 交叉轴起点和终点相反

justify-content

决定子元素在主轴上的对齐方式，

flex-start（从主轴起始点开始）
flex-end（从主轴终点开始）
center（主轴上居中对齐）
space-between（与主轴起始点、终点连接，子元素之间的距离相等）
space-evently（子元素和子元素、起始点、终点间隔大小相等）
space-around（子元素之间距离相同、子元素与起始点终点距离为子元素间距的一半）

align-items

决定子元素在交叉轴上的对齐方式

stretch 自动拉伸填充（默认值）
flex-start 与起始点对齐
flex-end 与终点对齐
center 居中对齐
baseline 与基准线对齐

align-content

多行子元素在交叉轴上的对齐方式

stretch 自动拉伸填充（默认值）
flex-start 与起始点对齐
flex-end 与终点对齐
center 居中对齐
space-between（与主轴起始点、终点连接，子元素行之间的距离相等）
space-around（子元素行之间距离相同、子元素行与起始点终点距离为子元素行间距的一半）

1.4 子元素 flex items上的属性

flex

flex是flex-grow flex-shrink flex-basis的简写，参数可以为1个、2个、3个，剩下的为默认值。参数值按顺序赋值

默认值为flex： 0 1 auto（不放大但会缩小）
none： 0 0 auto（既不放大也不缩小）
auto：1 1 auto（放大且缩小）
n：n 1 0
n(带尺寸)：1 1 n

flex-grow

决定子元素 flex items的扩大值

可以设置任何非负数字（正整数、正小数、0），默认值为0
只有当flex container在主轴上有剩余的size时，该属性才会生效
flex-grow属性值总和sum小于或等于1，每个flex item扩展的size就为flex container剩余size * flex-grow + 原来size
flex-grow属性值总和sum超过1，每个flex item的size就为flex container剩余size * flex-grow / sum + 原本size

flex-shrink

决定子元素flex items的缩小值

当flex items在主轴方向上超过了flex container的size之后，flex-shrink属性才会生效
收缩比例 = flex-shrink * flex item的原始宽度 base size，base size就是flex item放入flex container之前的size
每个flex item收缩的size为flex items超出flex container的size * 收缩比例 / 所有flex items 的收缩比例之和

flex-basis

只有一个参数，限制flex items的长度，flex-shrink、flex-grow的初始值
参数可以为百分比，也可以带单位
决定最终base size优先级，max-width/max-height/min-width/min-height > flex-basis > width/height > 内容本身的size

order

order决定了flex items的排布顺序

可以设置为任意整数（正整数、负整数、0），值越小就排在越前面
默认值为0，当flex items的order一致时，则按照渲染的顺序排列

align-self

flex items可以通过align-self修改父元素flex container设置的align-items

默认值为auto：默认遵从flex container的align-items设置
align-items有什么属性，align-self就有哪些属性

2. flex的优缺点

优点：flex布局容易上手，根据flex规则很容易达到某个布局效果。
缺点：浏览器兼容性比较差，只能兼容到ie9及以上。

3. flex对性能的影响

相比传统margin，可伸缩性强（不算性能）
相比float，关联性重绘好很多
相比tranform，子元素和父元素样式控制操作更少

flex对前端脑力的解放是革命性的，它是简洁的，弹性的，又是可控的。在此之前，想要实现“弹性”的布局，多半会用到float。
比如设计一个行内三个元素两个靠边一个居中，传统的方法怎么搞，外面两个浮动，中间那个margin计算位移到中间，而这一切，flex只需要在父类加两句，

display：flex；
justify-content: space-between;

而且不用算高，这如果用传统方法，子元素得挨个添加css，最少三倍css代码，可想而知性能如何（我很肤浅），而且float不可控因素太多，已经被高度坍塌整疯了，时不时要清除浮动，都关联到上下dom了，性能能好到哪里去。这还只是靠边对称居中，要是留空对称居中，margin算到地老天荒。还有水平垂直居中，传统方法就是算margin，兼容性好，但是高度变化咋整，又有人想到用>transformposition:absolute;