摘要：布局是年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。实践用来实现圣杯布局圣杯布局指的是一种最常见的网站布局。一般情况下，这种布局要求固定高度，固定宽度，自适应。
Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。
align-content平时使用 justify-content 属性比较多，用它来表示主轴的对齐方式。align-content 用来处理多个轴线的对齐方式，这说明布局产生换行！
flex-growflex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrinkflex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basisflex-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-selfalign-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
实践：用 Flex 来实现圣杯布局圣杯布局指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航(nav)、主栏(main)、副栏(aside)。一般情况下，这种布局要求:
header,footer固定高度，nav,aside固定宽度，body,main自适应。
main 优先加载
用 Flex 来实现圣杯布局，Flex实现圣杯布局效果
DOM 结构CSSFlex 实现圣杯布局 header main
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前面 */
}
参考
CSS Flex
Flex 布局教程：语法篇
Flex 布局教程：实例篇
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93284.html
摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。 本文由云+社区发表 本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式...
摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。 本文由云+社区发表 本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现，可...
摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。 本文由云+社区发表 本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式...
摘要：圣杯布局双飞翼布局所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。双飞翼用在外层多加了一个然后改用。 前言 我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静...
摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。 本文首发于知乎专栏：前端指南 CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...
阅读 1819·2023-04-26 00:16
阅读 4133·2021-11-24 09:38
阅读 3280·2021-11-15 11:38
阅读 2947·2019-08-30 12:50
阅读 3063·2019-08-29 13:59
阅读 655·2019-08-29 13:54
阅读 2317·2019-08-29 13:42
阅读 2044·2019-08-27 11:04
