flex布局实例（一）

阅读更多

【前言】

   昨天总结了下flex布局的基础语法，今天来做几个实例深入学习下。

   推荐一篇不错的博主：阮一峰老师，文章写的十分详细，结合简单图片解析后可以快速理解。

   下面记下根据教程学习后的笔录

 

【列表】

（1）经典的骰子布局（1点和6点）

（2）网格布局

（3）圣杯布局

（4）输入框布局

 

【主体】

（1）经典的骰子布局

基本模板架构：

   div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推

   ①六点

   ②一点

//css
.box{
      display: flex;
      justify-content: center;/*水平对齐方式*/
      align-items: center;/*垂直对齐方式*/
}
//HTML

    

 

（2）网格布局

   ①基本网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放

  
...
  
...
  
...

   ②百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间

 

（3）圣杯布局（Holy Grail Layout）

指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏

    
    
    


    

        
头部
        

            
主体部分
            
左侧导航栏
            
副栏
        
        
底部
    

 

（4）输入框的布局

我们常常需要在输入框的前方添加提示，后方添加按钮

//CSS代码
.InputAddOn {display: flex;}
.InputAddOn-field {flex: 1;}
//HTML代码

  ...
  
  ...

 

 

 

.