自学前端第二十六天:flex弹性盒子(二)

css3系列之弹性盒子 flex

弹性盒子(伸缩盒)

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

搜索 弹性盒子的属性 ctrl + F 如果觉得图太小， ctrl + +键

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

flex

flex-grow

flex-shrink (真实计算公式)

flex-basis

flex-direction

flex-wrap

align-content

align-items

align-self

justify-content

order

设置弹性盒子的属性：

display：flex / inline-flex (这两者的区别就是， 一个是相当于 block 一个是相当于 inline-block)

首先要注意的是：

你给父元素设置了 display：flex 子元素们并不会改变成内联元素。 虽然他们的效果看起来是一行的像浮动一样， 但是实际上并不会改变。该是啥，还是啥

接下来来看一下，他的效果，及属性和应用：

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

接下来，几个属性， 都是设置在 父元素上面的：↓

flex: direction

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

参数：

row：默认值，主轴横向的，从左向右排列 (此时主轴的justify-content设置会针对左右间隙的)

row-reverse：主轴还是横向的，只是里面项目的 排列方式不一样， 是从右向左的。

column：把主轴变成 纵向的，排列方式 也就变成了，从上向下 (PS:此时主轴的justify-content设置会变为针对上下间隙的)

column-reverse：主轴变成 纵向的，排列方式颠倒， 从下向上排列。