flex博大精深

flex博大精深

前言

        我在长期带项目带人的过程中，发现好多人对flex很陌生，让我有种错觉，flex是很新的技术，后来一baidu，css3 2009年就发布了Flexbox layout。

        十来年前沿用至今的技术，我觉得不会这个的前端不是一个好厨子。

flex起步

Flexbox有两套属性，一套针对可伸缩容器（flexible container），一套针对容器的直接子元素，或可伸缩项（flexible item）。

Flex容器，即应用display:flex;或display: inline-flex规则的元素，可以接受如下属性：

• flex-direction：指定主轴方向是水平还是垂直

• flex-wrap：指定可伸缩项是否折行

• flex-flow：以上两个属性的简写形式

• justify-content：指定可伸缩项在主轴方向上的对齐方式

• align-items：指定可伸缩项在辅轴方向上的对齐方式

• align-content：指定多行可伸缩项在辅轴方向上的对齐方式

容器的直接子元素或者可伸缩项，可以接受如下属性：

• flex-grow：指定当前项如何扩展

• flex-shrink：指定当前项如何收缩

• flex-basis：指定分配剩余空间之前当前项的初始大小

• flex：以上三个属性的简写形式

• order：指定当前项在容器中出现的次序

综上：已经是flex的全部内容了

最高优先级：flex-basis

这个属性决定CSS如何给可伸缩项在容器中分配初始大小，常用值：

• auto（默认值）

• content

• 长度或百分比值

auto的意思是首先看当前项有没有明确设置宽度，如果有则使用该宽度；如果没有，则以包含的内容决定宽度。

content是不管当前项是否明确设置了宽度，一律以内容决定宽度。

长度或百分比值呢？就是字面意思，百分比是相对于容器而言的。

重点！！！

知道如何确定可伸缩项的宽度是第一步。根据以上规则知道了每一项的宽度，简单相加就能得到所有项宽度的总和。而知道了所有项宽度的总和，再与容器宽度比较，就能知道容器里是不是还有剩余空间可供再次分配。这里有三种情况：

1. 所有项宽度总和等于容器宽度，剩余空间为零

2. 所有项宽度总和小于容器宽度，剩余空间为正 看每项flex-grow 来分配剩余空间  默认0 不放大

3. 所有项宽度总和大于宽度宽度，剩余空间为负 看每项flex-shrink 来收缩空间  默认1  可缩小

特例：flex-basis: 0;

假设把所有可伸缩项的flex-basis都设置为0，那就意味着这些项不会参与第一次容器空间的分配。

什么意思呢？如前所述，flex-basis值决定了CSS如何确定各伸缩项在容器中的初始宽度。确定各项初始宽度是对容器空间的首次分配。

如果初次分配各项初始宽度为0（flex-basis: 0;），那就是说容器的全部宽度都会进入二次分配环节。利用这一点，可以实现各伸缩项宽度的绝对平均化。

由本文可知，理解Flexbox的重点并不在于容器，而在于可伸缩项。

flex：1

此处有一坑  可接受一个参数  两个参数  三个参数

flex：1  flex-basis值 0%    会自动解析为 content （父元素没有设置高度的情况下）、

W3C的解释是 0px

flex-basis属性之0px与0%的差异比较大，看下文吧 我是懂了 哈哈哈

饮水思源：Flexbox，终于可以承认自己明白了

饮水思源：CSS flex布局踩坑小记：flex-basis属性之0px与0%的差异_shadow_Mike的博客-CSDN博客