CSS position 定位之 Flex

全栈程序员-站长 • 2026年3月18日上午11:14 • 未分类 • 阅读 2

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

一、Flex是什么

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

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

二、基本概念

Felx分为容器和项目

容器默认存在两根轴：水平的主轴（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代码

示例

代码+示例

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/216716.html原文链接：https://javaforall.net

CSS position 定位之 Flex

一、Flex是什么

二、基本概念

三、容器的属性

四、项目属性