轻轻松松学CSS:Flex布局
Flex布局就是“弹性布局”，它可以简便、完整、响应式地实现各种页面布局。引入弹性布局的目的，当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式，对一个容器中的子元素进行排列、对齐和分配空间。
弹性容器（Flex container）通过设置display属性的值为flex，包含多个弹性子元素(Flex item，很多资料把弹性子元素称为“项目")
关于弹性布局的语法，阮一峰老师的博客比较经典，很多其他博客都是转载自此。
关于弹性布局的实例，阮一峰老师的另外一篇博客也很经典。
读者如果对flex布局语法不熟悉或者想结合实例来理解flex布局，可以仔细研读以上两个博客。
本文，主要是对典型的页面布局再整理一下，以达到使读者更深入细致地理解flex布局的目的
经典的圣杯布局或双飞翼布局，页面分为头部（HEADER）、躯干（.CONTAINER)、尾部(FOOTER)，其中头部、尾部定高，躯干高度自适应，躯干又分为导航（NAV）、主栏（MAIN)、侧栏(ASIDE)，其中导航和侧栏定宽，主栏的宽度自适应。
以前的传统代码用到了浮动，代码稍显繁琐，其实可以使用flex布局，这样代码更简洁。
典型的页面布局效果图如下：
DOM结构如下：
1 <body>
2 <header>HEADER</header>
3 <div class="container">
4 <nav>NAV</nav>
5 <main>MAIN</main>
6 <aside>ASIDE</aside>
7 </div>
8 <footer>FOOTER</footer>
9 </body>
以下的CSS代码跟flex布局无关，它能影响背景色、固定高度值、固定宽度值等，读者了解即可，这不是本文的重点。
html{
height: 100%;
text-align:center;
}
body{
margin:0;
height:100%;
color:red;
}
header{
height: 120px;
background-color: cornflowerblue;
}
.container{
background-color: #ccc;
display: flex;
height:calc(100% - 170px);
}
footer{
height: 50px;
background-color: #000;
line-height:50px;
text-align:center;
}
nav{
background-color: lightgreen;
}
main{
background-color:#ccc;
}
aside{
background-color: orange;
}
以下的CSS代码跟flex布局有关
1 .container{
2 display: flex;
3 flex-direction:row;
4 flex-wrap:nowrap;
5 justify-content:flex-start;
6 align-items:stretch;
7 }
8
9 nav{
10 flex:0 0 200px;
11 }
12 main{
13 flex:1;
14 }
15 aside{
16 flex:0 0 150px;
17 }
18
其中.container是父容器，就是本文所指的“弹性容器(Flex container)”，nav、main、aside是子元素，就是本文所指的“弹性子元素（Flex item)"，或者叫”项目“
弹性容器的属性
1、display:flex 通过这个属性值把.container定义为弹性容器，这个属性是弹性布局中最根本的属性，没有这个属性（以及属性值），其它属性都没有意义。
2、flex-direction:row 表示主轴沿着水平轴方向，这是默认值。
3、flex-wrap：nowrap 表示不换行，无论子元素多少都在一行显示。
4、justify-content:flex-start 子元素在主轴上的对齐方式，本例中main元素自适应，填满剩余空间，所以justify-content无论取什么值，对本例来说，效果都是一样的。
5、align-items:stretch 子元素在交叉轴（和主轴垂直）上的对齐方式，本例中没有指定nav、main、aside的高度，所以拉伸（stretch）到和父元素（弹性容器）一样的高度。
子元素（项目）的属性
nav/aside
flex:0 0 200px/flex:0 0 150px是一种简写形式
相当于：
flex-grow:0 主轴上有剩余空间子元素也不分配
flex-shrink:0 主轴上空间不足子元素也不缩小
flex-basis:200px/150px nav/aside在收缩前的基准值是200px/150px（对于flex-direction：row来说就是宽度）
main
flex:1是快捷键，相当于flex:1 1 0%
即：
flex-grow:1
flex-shrink:1
flex-basis:0%（即：0px）
flex：1表示以0px为基准，自动收缩，这个属性值经常用。
Flex布局和多媒体查询结合，使响应式布局更加简便
/*中等屏幕*/
@media (max-width:992px){
/*主轴沿水平方向，超出空间后换行*/
.container{flex-direction:row;flex-wrap:wrap;}
/*nav、aside各占一半宽度*/
nav,aside{flex:0 0 50%;height:200px;}
/*main独占一行*/
main{order:1;flex:0 0 100%;}
}
/*小屏幕*/
@media (max-width:768px){
.container{
display:flex;
/*小屏幕时，因为nav、aside、main都独占一行，*/
/*所以主轴设置为沿垂直方向（交叉轴就沿水平方向）*/
flex-direction:column;
flex-wrap:nowrap;
}
nav,aside{
width:100%;
/*因为flex-direction:column，所以flex-basis:100px含义就是高度=100px*/
/*固定高度100px*/
flex:0 0 100px;
}
/*通过order属性，设置显示的先后顺序*/
nav{order:1;}
/*flex：1自适应*/
main{flex:1;order:3;}
aside{order:2;}
}
中等屏幕效果图如下：
小屏幕效果图如下：
轻轻松松学CSS:Flex布局的更多相关文章
- 轻轻松松学CSS:Grid布局
网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...
- 轻轻松松学CSS:媒体查询
轻轻松松学CSS:利用媒体查询创建响应式布局 媒体查询,针对不同的媒体类型定制不同的样式规则.在网站开发中,可以创建响应式布局. 一.初步认识媒体查询在响应式布局中的应用 下面实例在屏幕可视窗口尺寸大 ...
- CSS Flex布局完全指南 #flight.Archives002
Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- css flex布局详解
来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...
- CSS Flex布局整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- [Web 前端 ] 还在用浮动吗？CSS flex布局你了解多少？
cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...
- CSS Flex布局属性整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
随机推荐
- 第四方 fast快捷支付封装
class Fastpay { protected $conf = [ 'appkey'=>'',//appkey 'key'=>'',//秘钥 ]; protected $http_ty ...
- A Walk Through the Forest (最短路+记忆化搜索)
Jimmy experiences a lot of stress at work these days, especially since his accident made working dif ...
- [BUUOJ记录] [BJDCTF2020]EasySearch
前面的突破点考察swp泄露以及md5截断认证,最后一步考察ssi注入 进入题目是一个登陆页面什么提示都没有,工具扫了一下发现swp泄露,得到登录验证页面的源码: <?php ob_start() ...
- css动画 loading
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 阿里面试：dubbo的服务引用过程
点赞再看,养成习惯,微信搜一搜[三太子敖丙]关注这个喜欢写情怀的程序员. 本文 GitHub https://github.com/JavaFamily 已收录,有一线大厂面试完整考点.资料以及我的系 ...
- Activiti7 流程变量(UEL-Value方式)
需求:请假天数大于3天走总经理审批,小于等于3天直接走人事 画图 因为IDEA不展示那个线上的东西,所以截屏自己写的,还有就是我感觉IDEA画图挺坑的,之前画了好几遍,一部署就报错,很奇怪 /** * ...
- Tomcat源码分析（从启动流程到请求处理）
Tomcat 8.5下载地址 https://tomcat.apache.org/download-80.cgi Tomcat启动流程 Tomcat源码目录 catalina目录 catalina包含 ...
- 详解 LeetCode_007_整数反转(Java 实现)
目录 LeetCode_007_整数反转 题目描述 总体分析 解决方案 小结 LeetCode_007_整数反转 题目描述 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示 ...
- JavaScript五中迭代方法小解
ECMAScript 为数组定义了五个迭代方法.每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this的值.传入这些方法中的函数会接收三个参数:数组项的值.该 ...
- Solr专题（一）手把手教你搭建Solr服务
一.Solr是什么,能解决什么问题? Solr是一个高性能,采用Java开发,基于Lucene的全文搜索服务器.同时对其进行了扩展,提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展并对 ...