和cool一起学前端----第十一天

弹性布局-flex(part2)

上节咱们说到了弹性布局父容器的一些属性，今天和大家分享一下子元素的一些属性

• order
• flex-grow
• flex-shrink
• flex-basis
• align-self
  order表示子元素的排列顺序，默认值为0，越小越靠前，看代码
  
  
  效果一眼就能明了，第二个属性flex-grow,如果父容器空间足够的话，该子元素会不会放大，如果是1的话就表示不会放大，超过了1就表示会放大，看我以下代码，
  
  再看浏览器效果，
  
  网上有好多关于多个子元素的flex-grow都大于1，怎么计算子元素的宽高的文章，在我这里看来，前期没必要管这么多，你要知道，这个flex-grow就是父元素如果还剩余空间，子元素会全部填充满，当你写多了flex-grow之后，你自然而然就理解了这个属性是怎么回事，同理flex-shrink也是一样的，这个属性是设置子元素在父元素空间不够的情况下会不会缩小的，来看下代码
  
  
  还有一个属性，flex-basis属性，这个取决你父容器排列的方式，是按照行排列还是列排列，如果父容器设置flex-direction:row,则设置flex-basis的值就是设置子元素的宽度，如果父容器设置为column,那flex-basis就是子元素的高度
  
  看效果
  
  再看下最后一个属性，align-self,之前我们设置了父元素的align-items,规定了子元素的对齐方式，但是子元素可以设置自己的对齐方式，没错，每个子元素都可以做不一样的烟火，哈哈，我们来试下，
  
  看下效果
  
  好了，关于flex布局就说到这里了，再强调下，我只是简单得表明下每个属性得大概意思，具体得玩法还是得靠你自己去发掘，欢迎留言哦。