CSS position 定位之 Flex

这篇博客是我学习Flex的一个笔记，学习的资源主要来自阮一峰老师博客。博客讲的很清楚，我自己总结之后,更方便理解。

一、Flex是什么

Flex是Flexible Box的缩写，意为“弹性盒子”

/*块内元素*/ display：flex; /*行内元素*/ display:inline-flex;

二、基本概念

 

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

flex-direction    决定主轴方向， flex-wrap    定义如果一条轴线排不下，如何换行 flex-flow    前两个的简写 justify-content    定义项目在主轴上的对齐方式 align-items    定义项目在交叉轴上如何对齐 align-content    定义多根轴线的对齐方式，如果只有一根轴线，不起作用

四、项目属性

以下6个属性设置在项目上。

Order    项目的排列顺序 flex-grow    项目的放大比例 flex-shrink    项目的缩小比例 flex-basis    定义在分配多余空间之前，项目占据的主轴空间 Flex    前三个的缩写 align-self    允许单个项目有与其他项目不一样的对齐方式，覆盖align-items属性

 

五、实际问题

1. 不定宽高如何水平垂直居中？

2. 用flex布局制作航

3. 悬挂式布局

Flex:none;使用场景 推荐链接：flex:0 flex:1 flex:none flex:auto应该在什么场景下使用？

 4. 多列布局

 5. 基本网格布局

 HTML代码

   

     

      
第一个布局
      

        
1/2
        
1/2
      
     
      

      
第二个布局
      

        
1/3
        
1/3
        
1/3
      
      

      
第三个布局
      

        
1/4
        
1/4
        
1/4
        
1/4
      
      

      
第四个布局
      

        
When in the Course of human events, ......
        
We hold these truths to be self-evident......
      
   
	

 CSS代码

示例

 6. 圣杯布局

HTML代码

    

      
header
      

        
left
        
content
        
right
      
      
footer
    

CSS代码

示例