css3系列之弹性盒子flex

弹性盒子(伸缩盒)

注意&＃xff0c;本篇会很长&＃xff0c;非常长&＃xff0c; 因为弹性盒子的知识点比较多

搜索 弹性盒子的属性  ctrl &＃43; F   如果觉得图太小&＃xff0c; ctrl &＃43; &＃43;键

主要的属性有&＃xff1a;  (主要分两部分讲&＃xff0c; 一部分讲 设置在父元素上的属性&＃xff0c;一部分讲 设置在子元素上的属性&＃xff0c; 还有最后一些简单的应用)

　　flex

　　flex-grow

　　flex-shrink  (真实计算公式)

　　flex-basis

　　flex-direction

　　flex-wrap

　　align-content

　　align-items

　　align-self

　　justify-content

　　order

设置弹性盒子的属性&＃xff1a;

　　display&＃xff1a;flex    inline-flex  (这两者的区别就是&＃xff0c; 一个是 block   一个是 inline-block)

首先要注意的是&＃xff1a;

　　你给父元素设置了 display&＃xff1a;flex  子元素们并不会改变成内联元素。  虽然他们的效果看起来是&＃xff0c; 但是实际上并不会改变。该是啥&＃xff0c;还是啥

接下来来看一下&＃xff0c;他的效果&＃xff0c;及属性和应用&＃xff1a;

　　首先&＃xff0c;display: flex  是设置在 父元素上面的&＃xff0c;设置之后&＃xff0c; 他里面的子元素&＃xff0c;就会变成 弹性盒子了。(有些人&＃xff0c;把父元素叫做盒子&＃xff0c;把里面的子元素叫做 项目)

接下来&＃xff0c;几个属性&＃xff0c; 都是设置在 父元素上面的&＃xff1a;↓  

　　flex: direction

 设置主轴的方向。 默认的主轴是 横向 的&＃xff0c;从左到右排列&＃xff0c;另一条轴叫做 交叉轴&＃xff0c;  也就是我们理解的纵向&＃xff0c;

参数&＃xff1a;

　　row&＃xff1a;默认值&＃xff0c;主轴横向的&＃xff0c;从左向右排列

　　row-reverse&＃xff1a;主轴还是横向的&＃xff0c;只是里面项目的 排列方式不一样&＃xff0c; 是从右向左的。

　　column&＃xff1a;把主轴变成 纵向的&＃xff0c;排列方式 也就变成了&＃xff0c;从上向下

　　column-reverse&＃xff1a;主轴变成 纵向的&＃xff0c;排列方式颠倒&＃xff0c; 从下向上排列。

　　flex-wrap&＃xff1a;
设置&＃xff0c;子元素溢出&＃xff0c;是否换行。

参数&＃xff1a;

　　nowrap&＃xff1a;默认值(也就是不换行。子元素如果的宽  大于父元素的&＃xff0c;会压缩子元素)  把所有子元素排列在一行

　　wrap&＃xff1a;子元素溢出&＃xff0c;会换行&＃xff0c;变成多行的形式

　　wrap-reverse&＃xff1a;颠倒 wrap 的排列方式 (也会变成多行的形式)

　　justify-content:

设置横轴(横向)的对齐方式

参数&＃xff1a;

　　flex-start&＃xff1a;默认值 对齐起始位置&＃xff0c;第一个子元素的起始位置&＃xff0c;然后其他子元素向它看齐

　　flex-end&＃xff1a;跟上面相反的&＃xff0c;也就是说&＃xff0c;人家对齐在开始&＃xff0c;这个对齐在 最后面

　　center&＃xff1a;居中对齐

　　space-between&＃xff1a;如果有多余的空间&＃xff0c;就会平均分布&＃xff0c;每个子元素的 两边空白空间保持一致(头尾的子元素贴边)

　　space-around&＃xff1a;如果有多余的空间&＃xff0c;就会平均分布&＃xff0c;每个子元素的 两边空白空间保持一致(头尾的子元素不会贴边)

　　align-items: 

设置(纵轴)纵向的对齐方式&＃xff1a;(单行)

参数&＃xff1a;

　　 flex-start&＃xff1a;默认值 对齐起始位置

　　flex-end&＃xff1a;跟上面相反的&＃xff0c;也就是说&＃xff0c;人家对齐在起始位置&＃xff0c;这个对齐在 最下面

　　center&＃xff1a;居中对齐

　　baseline:   基线对齐

　　stretch:   如果没有设置子元素高度&＃xff0c;那么全部子元素的高度都会被拉伸

既然学了纵向 和  横向的对齐方式&＃xff0c; 那么现在就用他来设置 一下&＃xff0c;我们平常的 居中功能

我们平常设置居中&＃xff0c; 是不是要设置 position&＃xff1a; 然后就left  calc  50% - 去子元素的 宽一半&＃xff0c;  然后再去计算 top&＃xff1f;  很麻烦对吧。 

看看以下的方法&＃xff0c;是不是简单了许多

　　align-content:

align-content 跟上面的 align-items 的区别就是&＃xff0c;一个是操作单行的&＃xff0c;一个是操作多行的。  参数都是一样的设置&＃xff0c; 除了多了两个 space-betwwen  &＃xff0c;space-around   

设置纵向的对齐方式(多行)

参数&＃xff1a;

　　flex-start&＃xff1a;

　　flex-end&＃xff1a;

　　center&＃xff1a;  

　　space-betwwen  

　　space-around   

　　stretch

接下来的几个属性&＃xff0c;都是设置在 子元素上的

　  align-self&＃xff1a;

单独设置对齐方式。如果父元素有设置 align-items的话&＃xff0c; 会被子元素给替代掉&＃xff0c;也就是&＃xff0c;align-self 和 align-items同时设置, 会采用子元素的align-self 对齐方式

但是&＃xff0c;如果是  align-self 和 align-content 同时设置&＃xff0c; 会采用 父元素的 align-content的 对齐方式

参数&＃xff1a;

　　auto&＃xff1a;默认值&＃xff0c;也就是遵从 父元素 align-items 的对齐方式。

　　flex-start&＃xff1a;对齐起始位置

　　flex-end&＃xff1a;跟上面相反的&＃xff0c;也就是说&＃xff0c;人家对齐在起始位置&＃xff0c;这个对齐在 最下面

　　center&＃xff1a;居中对齐

　　baseline:   基线对齐

　　stretch:   如果没有设置子元素高度&＃xff0c;那么全部子元素的高度都会被拉伸

　　order&＃xff1a;

设置数值&＃xff0c;来决定他们的排列顺序

参数&＃xff1a;

　　0&＃xff1a;默认值

　　数值越小&＃xff0c;越靠前  支持负数(-1)

　　flex-grow:

设置数值来 自定义 扩展的比例&＃xff0c;&＃xff08;不支持负值&＃xff09;

参数&＃xff1a;

　　默认值&＃xff1a;0 (也就是&＃xff0c;不用扩展)

　　flex-shrink: (flex-shrink的真实计算公式)

设置子元素们的宽加起来大于 父元素宽时&＃xff0c;要怎么压缩 成一行&＃xff0c;

参数&＃xff1a;

　　1&＃xff1a;默认值(超出的话&＃xff0c;就按照 比例1 压缩)

学了上面的那个 grow之后&＃xff0c; 是不是觉得&＃xff0c;他的计算公式那么简单&＃xff0c; 那么跟他对应的 shrink 计算公式也一样&＃xff1f;其实不是的&＃xff0c;他的计算公式&＃xff0c;有点冷门&＃xff0c;乃至于w3c 都没有公式&＃xff0c;那么多他的计算公式怎么样呢&＃xff1f; 看下面的例子吧~

 还有最后一点&＃xff0c;这也是最冷门的知识点。flex-shrink 参与计算的不是盒子的宽&＃xff0c; 而是内容区的宽&＃xff0c; border 和  padding 都不用加进去计算的。只计算content

　　flex-basis&＃xff1a;(如果使用了flex-direction 改变了主轴的方向&＃xff0c;那么他控制的&＃xff0c;就变成了高度。不是宽度&＃xff0c;也就是说&＃xff0c;横向控制宽度&＃xff0c;纵向控制高度)

如果这个属性呢&＃xff0c; flex-basis: 100px  你这样设置&＃xff0c;他跟 width: 100px的效果是一样的。 

其实把&＃xff0c;flex-basis 和 width 两个一起设置&＃xff0c;是有用意的。flex-basis 是决定了 元素宽度的 最小值&＃xff0c; width&＃xff0c;是决定了元素宽度可撑开的 最大值。

还有最后的一个值&＃xff1a;

　　flex&＃xff1a;

他是 flex-grow  flex-shrink flex-basis 的缩写形式

　　flex&＃xff1a;1  1  20%&＃xff1b;

代表的是&＃xff0c;可以伸缩&＃xff0c;该元素的最小宽度是 20%。

我们来利用&＃xff0c;今天的全部内容来实现几个案例。

　　第一个&＃xff1a;居中

　　　　第二个&＃xff1a;几等分。

　　第三个&＃xff1a;其中一个固定宽度的布局

　　第四个&＃xff1a;浮动

有人可能会问&＃xff0c; float 不好吗&＃xff1f;  emmm 确实不好&＃xff0c; 因为 父级会受浮动流的影响&＃xff0c;而且会触发bfc 等等。

　　第五个: 圣杯布局