轻轻松松学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内核 ...
随机推荐
- Codeforces 1324E Sleeping Schedule DP
题意 给你一个长度为\(n\)的数组\(a\)和3个数字\(h,l和r\).\(t\)初始为0,每次可以使\(t=(t+a_i) \% h\)或者\(t=(t+a_i-1)\%h\),如果这时\(t\ ...
- akka-streams - 从应用角度学习：basic stream parts
实际上很早就写了一系列关于akka-streams的博客.但那个时候纯粹是为了了解akka而去学习的,主要是从了解akka-streams的原理为出发点.因为akka-streams是akka系列工具 ...
- 跟着尚硅谷系统学习Docker-【day07】
day07-20200722 p27.dockerfile案例编写-3 第一步:编写父dockerfile DockerFile_20200722_2 FROM centos RUN yum ...
- Activiti7 网关(排他网关)
什么是排他网关? 排他网关(也叫异或(XOR)网关,或叫基于数据的排他网关),用于在流程中实现决策,当流程执行到这个网关,所有分支都会判断条件是否为true,如果为true则执行该分支 注意:排他网关 ...
- java之多态浅谈
多态是同一个行为具有多个不同表现形式或形态的能力. 父类中定义的属性和方法被子类继承之后,可以具有不同的数据类型或表现出不同的行为 多态现实意义理解: 现实事物经常会体现出多种形态,如学生,学生是人的 ...
- 阿里云前端路线 | CSS快速掌握
1.1什么是CSS 翻译为“层叠样式表”或者“级联样式表”, 简称样式表. 1.2CSS的主要作用 它主要是用来给HTML网页来设置外观或者样式 外观或者样式:HTML网页中的文字的大小.颜色.字体, ...
- 关于HTML基本标签，了解一下！
目录 1 前言 2 正文 2.1 HTML文档结构 2.1.1 html标签 2.1.2 head标签 2.1.3 title标签 2.1.4 body标签 2.2 HTML常用标签 2.2.1 换行 ...
- JavaWeb实现图片上传功能
首先导入文件上传的jar包 然后在Spring-servlet.xml文件中设置上传文件解析器 <!--上传文件解析器--> <bean id="multipartReso ...
- 蓝奏网盘CMD控制台
LanZouCloud-CMD 2.0 基于蓝奏云API开发的CMD版蓝奏云控制台 Github : https://github.com/zaxtyson/LanZouCloud-CMD 更新说明 ...
- Robotframework自动化1-Windows环境搭建
前言: robotframework环境搭建-环境准备 1.python2,pip2 2.WxPython 3.Robot Framework 4.Robotframework-ride 5.RIDE ...