Flex 布局是 W3C 2009年提出的,目前已经被所有浏览器支持,也是我现在布局的首选方案。Flex 布局使用起来是非常简单的,本文谈一谈平时使用可能需要注意的问题。
align-content
平时使用 justify-content 属性比较多,用它来表示主轴的对齐方式。align-content 用来处理多个轴线的对齐方式,这说明布局产生换行!
flex-grow
flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的 flex-grow 属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的 flex-grow 属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex-shrink
flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的 flex-shrink 属性都为1,当空间不足时,都将等比例缩小。如果一个项目的 flex-shrink 属性为0,其他项目都为1,则空间不足时,前者不缩小。
flex-basis
flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为 auto,即项目的本来大小。它可以设为跟 width 或 height 属性一样的值(比如350px),则项目将占据固定空间。
flex
平时很少直接使用 flex-grow、flex-shrink、flex-basis,一般使用的是 flex。flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。auto 表示放大、缩小,none 表示不放大,不缩小。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
查看 demo,通过放大和缩小浏览器大小动态改变 container 长度,当 container 长度不够时,flex-shrink、flex-basis 产生作用,长度足够 flex-grow、flex-basis 产生作用。
align-self
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。
实践:用 Flex 来实现圣杯布局
圣杯布局指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航(nav)、主栏(main)、副栏(aside)。一般情况下,这种布局要求:
- header,footer固定高度,nav,aside固定宽度,body,main自适应。
- main 优先加载
用 Flex 来实现圣杯布局,Flex实现圣杯布局效果
DOM 结构
<html>
<head>
<title>Flex 实现圣杯布局</title>
</head>
<body>
<header>
header
</header>
<div class="content">
<main>main</main>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>
footer
</footer>
</body>
</html>
CSS
html,
body {
display: flex;
flex-direction: column;
min-height: 600px;
height: 100%;
font-size: 28px;
font-weight: bolder;
}
header,
footer {
height: 150px;
background-color: #666;
display: flex;
justify-content: center;
align-items: center;
flex: none;
}
.content {
flex: 1; /* 高度自适应 */
display: flex;
}
nav,
aside {
background-color: #eb6f43;
flex: 0 1 200px;
display: flex;
justify-content: center;
align-items: center;
}
main {
display: flex;
justify-content: center;
align-items: center;
flex: 1; /* 宽度自适应 */
background-color: #d6d6d6;
}
nav {
order: -1; /* 调整顺序在main前面 */
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。