弹性display: flex布局自看笔记

基础概念

块级元素默认的display 属性都是block 状态，而当给块级元素display 属性加上flex值，flex 布局就被创建
比如div 直接设置 display:flex，这时候当div被称为 flex 容器，里面的子项元素称之为 flex 子项

flex 容器布局也叫弹性布局的诞生，单靠一个属性值，无法满足布局需求，因此为满足布局需求，还需要围绕flex 布局而产生的相关属性，而这些相关属性恰好分为两部分 一部分作用与flex 容器；另一部分作用域flex子项

点击下面链接快速索引

作用于flex容器属性

• flex-direction　容器内项目的排列方向(默认横向排列)　
  flex-wrap　 容器内项目换行方式　　
  flex-flow　以上两个属性的简写方式　　
  justify-content　项目在主轴上的对齐方式　　
  align-items　项目在交叉轴上如何对齐　　
  align-content　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

作用于flex子项属性

• order　项目的排列顺序。数值越小，排列越靠前，默认为0
  flex-grow　项目的放大比例，默认为0，即如果存在剩余空间，也不放大
  flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
  flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
  flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
  align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

小提示 不管是作用在flex容器还是flex子项上，最终都是通过flex子项内容展现出来，需要区别的是一个是作用整体一个是作用具体的单个

flex 概念还有一个内容叫排序：
通过主轴（main axis）和交叉轴（cross axis）
默认情况下，主轴和x轴相同，交叉轴和y轴相同。弹性盒子默认会按主轴x轴排列，看上去的表现形式就是从浏览器的左边到右边排序；

友情提示
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

本篇测试属性的笔记HTML结构都是基于如下结构

<div class="container"> <!--  flex 容器-->
   <div><!--  flex 子项-->
     <img src="./images/1.jpg">
   </div>
   <div><!--  flex 子项-->
     <img src="./images/2.jpg">
   </div>
   <div><!--  flex 子项-->
     <img src="./images/3.jpg">
   </div>
 </div>

同时为了清晰的看到排序问题图片上标注了顺序，当然美女图片也比较养眼；

作用在flex 容器的css属性

flex-direction

容器子项目的排列方向(默认从左到右排序)，可以从上倒下，从下到上，从左到右&