CSS3弹性盒模型

Flex布局基本概念

• Flex布局的好处：
• Flexbox通常能让我们更好的操作他的子元素布局，例如：如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；
• 可以快速让他们布局在一列； 可以方便让他们对齐容器的左、右、中间等； 无需修改结构就可以改变他们的显示顺序； 如果元素 容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽 度或高度的比例。
• 知识点2.Flex容器属性
      flex-direction：指定伸缩容器主轴的伸缩流方向
      flex-wrap：指定伸缩项目是否沿着侧轴排列
      flex-flow：这是flex-direction和flex-wrap两个属性的缩写。两个属性决定了伸缩容器的主轴与侧轴。默认值是rownowrap（中间用空格隔开）。
      justify-content：主轴上对齐伸缩项目
      align-items：指定伸缩项目沿着侧轴对齐方式
      align-content：align-content属性可以用来调准伸缩行在伸缩容
• 知识点3.Flex项目属性
      order：在Flex容器中可以通过order属性来控制Flex项目的顺序源。
      flex-grow：flex-grow可以定义一个Flex项目的扩大比例。
      flex-shrink：flex-shrink可以定义Flex项目的缩小比例。
      flex-basis：flex-basis属性定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。
      flex：flex是flex-grow，flex-shrink和flex-basis三个属性的缩写
      align-self：align-self则用来在单独的伸缩项目上覆写默认的对齐方式。
• 常用应用（居中对齐，自适应导航，移动优先布局）