一、关于Flex布局。
1.什么是Flex布局?
Flex是Flexible Box的缩写,意思为“弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器和行内元素都可以指定为Flex布局。
*需要注意的是:设为Flex布局为,子元素的float,clear和vertical- align属性将失效。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
2.容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
具体的讲解可以去http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
3.项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
具体可以去
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 了解详细情况。
二、其他布局。
1、网格布局
(1)基本的网格布局
最简单的网格布局就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。
源代码如下:
HTML:
<div class="Grid">
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell">...</div>
</div>
CSS:
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
(2)百分比布局
某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
源代码如下:
HTML:
<div class="Grid">
<div class="Grid-cell u-1of4">...</div>
<div class="Grid-cell">...</div>
<div class="Grid-cell u-1of3">...</div>
</div>
CSS:
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
.Grid-cell.u-full {
flex: 0 0 100%;
}
.Grid-cell.u-1of2 {
flex: 0 0 50%;
}
.Grid-cell.u-1of3 {
flex: 0 0 33.3333%;
}
.Grid-cell.u-1of4 {
flex: 0 0 25%;
}
2.圣杯布局
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
源代码如下:
HTML:
<body class="HolyGrail">
<header>...</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">...</main>
<nav class="HolyGrail-nav">...</nav>
<aside class="HolyGrail-ads">...</aside>
</div>
<footer>...</footer>
</body>
CSS:
.HolyGrail {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,
footer {
flex: 1;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}
在我们写网页的过程中肯定要写到适配,这个布局就可以解决这个问题,所以可以用用,解决适配还有栅格系统等其他方法,可以自己探索。以上有的地方引用自其他的地方。