CSS Flex 布局:用 Flex 来实现圣杯布局

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)。一般情况下,这种布局要求:

  1. header,footer固定高度,nav,aside固定宽度,body,main自适应。
  2. 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前面 */
}

参考

  1. CSS Flex
  2. Flex 布局教程:语法篇
  3. Flex 布局教程:实例篇

相关推荐