理解flex

flex基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex基础语法

包括设置在容器上的容器属性(6个)以及设置在项目上的项目属性(6个)，如下表格：

1 、容器

容器属性	用途	默认值
flex-direction	设置主轴方向	row
flex-wrap	定义如何换行	nowrap
flew-flow	flew-direction\flew-wrap的简写	row nowrap
justify-content	设置主轴的对齐方式	flex-start
align-items	设置交叉轴的对齐方式	stretch
align-content	设置多行主轴的对齐方式	stretch

#####  容器属性与取值
flex-direction:  row row-reverse column column-reverse
flex-wrap:       wrap nowrap wrap-reverse
flew-flow:       <flex-direction> <flex-wrap>
justify-content: flow-start | flow-end | center | space-between | space-around
align-items:     flow-start | flow-end | center | baseline | stretch
align-content:   flow-start | flow-end | center | space-between | space-around | stretch

2 、项目

项目属性	用途	默认值
flow-grow	设置放大比例	0
flow-shrink	设置缩小比例	1
flow-basis	设置初始大小	auto
flow	flow-grow \flow-shrink\flow-basis的简写	0 1 auto
align-self	设置对齐方式	auto
order	设置排序位置	0

#####  项目属性与取值
flow-grow:      <number>
flow-shrink:    <number>
flow-basis:     <length> | auto
flow:           <flow-grow> <flow-shrink> <flow-basis>
align-self:     auto | flex-start | flex-end | center | baseline | stretch;
order:          <integer>

我对flex的理解

• 对于容器：
  1、要注意：justify-content属性是用来定义项目在主轴上如何对齐,具体对齐方式与轴的方向有关，所以要注意flex-direction定义的主轴方向。
  2、要注意：align-items属性是用来定义项目在交叉轴上如何对齐,具体的对齐方式与交叉轴的方向有关，所以要注意flex-direction定义的主轴方向。
• 对于项目：
  1、要理解flow-grow flow-shrink：flow-grow:用来定义有多余空间时，项目是否放大；flow-shrink用来定义空间不足时，项目是否缩小。
  2、要理解：flex-basis指的是flex items在被放进一个flex容器之前的大小
  3、要注意：flex-basis属性定义的是在分配多余空间之前，项目占据的主轴空间
  4、要注意：flow-shrink不可为负值，order可为负值
  5、要注意：order数值越小，排列越靠前
  6、要注意：align-self为auto时继承父元素的align-items，若无父元素，则等同于stretch。
  7、请记住：flex属性的快捷值：

flex:auto   (=>1 1 auto) 
flex:none   (=>0 0 auto)
flex:1      (=>1 1 0%)  flex:2(=>2 1 0%) flex:2 3(=>2 3 0%)
flex:50%    (=>1 1 50%)

相关参考

语法：Flex 布局教程：语法篇
实践：小游戏
flex:1:flex:1
flex-basis:flex-basis与width区别