弹性盒子相关属性
- flext-direction
- flex-wrap
- justify-content
- align-item
弹性盒子子元素属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
flex的含义
1、flex是flex-shrink，flex-grown，flex-basic的缩写
2、 flex:1和flex:auto有什么不同
flex:1
flex:auto
原因： flex:1===flex:1 1 0
flex:auto === flex:1 1 auto
主要原因就是第三个属性flex-basic不同：
flex-basic：flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
auto 为表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小, 所以出现了上图中三个盒子不一样大的情况
developer.mozilla.org/zh-CN/docs/…
zhuanlan.zhihu.com/p/136223806
order
flex布局中order 决定了flex item里面的排布顺序
align-self
flex align-self属性允许子元素有与其他元素不一样的对齐方式，比如父元素设置align-items: flex-start;flex-direction:row 那么所有子元素全部从上往下对齐，而设置了align-self属性的子元素可以不遵循这个规则，可覆盖父元素的align-items属性。默认值为auto，表示继承父元素的对齐规则。 blog.csdn.net/i042416/art…
