flex布局具有便捷、灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结。

web页面布局(topbar + main + footbar)

示例代码

  要实现的效果如下:

图1

  html代码:

   <div class="container">
<header>header...</header>
<main>内容</main>
<footer>footer...</footer>
</div>

  css代码:

header{
height:100px;
background:#ccc;
}
footer{
height:100px;
background:#ccc;
}
.container{
display:flex;
flex-direction:column;
height:100vh;
}
main{
flex-grow:1;
}

应用的flex属性

  本例中主要应用了以下flex属性:

  1. flex-direction:column 使整体布局从上到下排列
  2. flex-grow:1, 应用于main,使得main自动填充剩余空间

本例中应用以较少的css代码实现了传统的上中下页面布局,其中的关键通过flex-grow的使用避免了当main内容过少时footer部分会被提升到页面上方的问题(传统方式上可能需要靠绝对定位来解决了~)

每行的项目数固定并自动换行的列表项

  要实现的效果如下:

图2

  html代码:

示例代码

  css代码:

ul{
display:flex;
flex-wrap:wrap;
}
li{
list-style:none;
flex:0 0 25%;
background:#ddd;
height:100px;
border:1px solid red;
}

应用的flex属性

  本例中主要应用了以下flex属性:

  1. flex:0 0 25%,相当于flex-basis:25%,使得每一个列表项的宽度占外层容器(本例中的ul元素)的25%,因此每行最多能够排开四个列表项。

  2. flex-wrap:wrap,使得每行填满时会自动换行

实现自动划分多余空间的列表项

  本例的效果和上例中的图2很相似,只是每行为3个固定宽度的列表项,并且各列表项之间留有相同宽度的空隙

图3

  传统方式上实现这种效果,不可避免的要用到负margin,那么现在来看了用flex实现的方式吧

示例代码

  css代码:

ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
border:1px solid black;
}
li{
list-style:none;
width:120px;
background:#ddd;
height:100px;
border:1px solid red;
}

应用的flex属性

  本例中主要应用了以下flex属性:

  1. justify-content:space-between;使主轴方向的多余空间平均分配在两两item之间

平均分配空间的栅格布局

  各大UI里栅格布局基本是必备的布局之一,平均分配布局又是栅格布局里最常用的布局,利用flex实现平均分配的栅格布局,关键之处就是利用它的自动收缩空间。

图4

示例

  html如下:

<div class="row">
<div class="column">column1</div>
<div class="column">colum22</div>
<div class="column">colum322</div>
</div>

  css如下:

.row{
display:flex;
flex-wrap:wrap;
border:1px solid black;
}
.column{
list-style:none;
background:#ddd;
flex:1;
height:100px;
border:1px solid red;
}

应用的flex属性

  本例中主要应用了以下flex属性:

  1. flex:1 这里针对item应用了flex:1,相当于flex:1 1 0%,而之所以不管各个column元素内容的宽度为多大,都能均分到相等的空间,正式因为相当于在设置了flex-grow:1使得剩余空间按相等比例自动分配的同时又设置了flex-basis:0%,才使得整个空间都平均分配了。

圣杯布局

  传统的圣杯布局需要涉及绝对定位、浮动、负margin等几大最头疼属性,有了flex布局以后发现,原来这么简单的配方,也能实现这么复杂的效果哈~

图5 圣杯布局

示例代码

  html代码:

<div class="container">
<main>main</main>
<aside>aside</aside> <nav>nav</nav>
</div>

  css代码:

.container{
display:flex;
height:100vh;
}
aside{
width:50px;
background:#ccc;
}
main{
flex-grow:1;
background:#def;
}
nav{
width:80px;
background:#ccc;
order:-1;
}

应用的flex属性

  1. 对main用flex-grow:1,使得中间主元素空间自动扩充
  2. 对nav应用order:-1,使得order处于最左侧(html中main写在了最前,以利于优先加载主内容区)

元素水平垂直居中

  如何让一个元素同时水平垂直居中?答案很多样也很复杂,但是在这么多样化得答案中flex绝对是最简单的一种了~

图6 水平垂直居中

示例代码

  html代码:

 <div class="container">
<div class="inner">我是中间的内容</div>
</div>

  css代码:

.container{
height:300px;
width:300px;
border:1px solid red;
display:flex;
justify-content:center;
align-items:center;
} .inner{
border:1px solid black;
}

应用的flex属性

  1. justify-content:center;使item元素水平居中
  2. align-items:center;使item元素垂直居中

常用的flex知识 ,比起float position 好用不少的更多相关文章

  1. jsp学习---css基础知识学习,float,position,padding,div,margin

    1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. Ext常用开发基础知识

    Ext常用开发基础知识 组件定义 //这种方法可以缓存所需要的组件 调用起来比较方便(方法一 ) Ext.define('MySecurity.view.home.HomePanel', { //添加 ...

  3. 【20】display,float,position的关系

    [20]display,float,position的关系 如果display为none,元素不显示. 否则,如果position值为absolute或者fixed,元素绝对定位,float的计算值为 ...

  4. HTML布局四剑客-Flex,Grid,Table,Float

    前言 在HTML布局中有很多的选择,同一种表现方式可以使用不同的方法来实现.下面来对四种最常见的布局方式进行阐述和解释,它们分别是Float,Table,Grid和Flex Float 第一位出场的就 ...

  5. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  6. 网页制作常用的CSS知识

    在制作网页中,我们会用到很多CSS的知识,在这里我简单的总结了一些. div    划分区块 ul,li 无序列表(配合划分区块) ol,li 有序列表 a 超链接标签 p 段落标签 h 标题标签 i ...

  7. 我的总结常用的js知识

    nvm nvm是node的包管理工具.在不同的项目下使用不同的node版本.下载地址 https://github.com/coreybutler/nvm-windows/releasesnvm in ...

  8. Web测试的常用测试用例与知识

    1. Web测试中关于登录的测试 2. 搜索功能测试用例设计 3. 翻页功能测试用例 4. 输入框的测试 5. Web测试的常用的检查点 6. 用户及权限管理功能常规测试方法 7. Web测试之兼容性 ...

  9. Flex布局摆脱float带来的布局问题

    完整文章地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 使用浮动(float)的一个比较疑惑 ...

随机推荐

  1. Educational Codeforces Round 23 F. MEX Queries 离散化+线段树

    F. MEX Queries time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  2. tensorflow学习笔记一------下载安装,配置环境(基于ubuntu16.04 pycharm)

    一,安装TensorFlow 安装所有必备工具 sudo apt-get install python-pip python-dev python-virtualenv 安装TensorFlow su ...

  3. Uncaught TypeError: (intermediate value)(...) is not a function 上一个方法结束没有加分号; 代码解析报错

    Uncaught TypeError: (intermediate value)(...) is not a function 别忽略了,  第一个方法后面的结束 分号; 不起眼的,引来麻烦, 哎,规 ...

  4. 《剑指offer》第五十五题(二叉树的深度)

    // 面试题55(一):二叉树的深度 // 题目:输入一棵二叉树的根结点,求该树的深度.从根结点到叶结点依次经过的 // 结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. //如果左右 ...

  5. 牛客国庆集训派对Day3 B Tree

    Tree 思路: 树形dp 注意0不存在逆元,任何一个数乘以0就变成0了,就没有价值浪,所以要暴力转移 代码: #pragma GCC optimize(2) #pragma GCC optimize ...

  6. sql server auto increment - trace flag 272

    从 sql 2012 开始, 微软为了让 insert 时 auto increment 快一些,做了一个 cache 的机制. 这个机制虽然好,但是也有麻烦的情况,如果你的 sql 突然 resta ...

  7. [Spring] Annotation注释

    自动扫描: 在<beans>标签内, <context:annotation-config />允许使用注解 <context:component-scan base-p ...

  8. Lasso linear model实例 | Proliferation index | 评估单细胞的增殖指数

    背景:We developed a cell-cycle scoring approach that uses expression data to compute an index for ever ...

  9. 使用validate()方法进行输入校验 --Struts2框架

    服务器端的输入校验包含两种方式:硬编码方式和配置文件方式.本文演示硬编码方式中使用validate()方法进行输入校验. 1.项目目录结构: 2.项目核心代码: BookAction.java: pu ...

  10. android -------- 常用依赖库

    //  bannercompile 'com.youth.banner:banner:1.4.9' // recyclecompile 'com.android.support:recyclervie ...