摘要：圣杯布局圣杯布局指的是一种最常见的网站布局。代码如下代码如下这里主要使用到了使得子元素水平排列，并且换行总结这是我简单总结的一些布局。
如果对flex不是很熟悉的同学，可以看一下我的另一篇文章Flex 布局1、网格布局 1.1、基本网格布局
最简单的网格布局，就是平均分布。
HTML代码如下。
1/21/21/31/31/3
CSS代码如下。
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
background: #eee;
margin: 10px;
}
这里最关键的就是flex:1使得各个子元素可以等比伸缩
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
HTML代码如下。
50%autoautoauto50%1/3
CSS代码如下。
.col2 {
flex: 0 0 50%;
}
.col3 {
flex: 0 0 33.3%;
}
这里最关键的是通过flex的第三个属性，也就是flex-basis来定义元素占据的空间。
圣杯布局（Holy Grail Layout：）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
HTML代码如下。
header content
CSS代码如下。
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.body {
display: flex;
flex: 1;
}
header,
footer {
flex: 0 0 100px;
}
.content {
flex: 1;
}
.ads,
.nav {
flex: 0 0 100px;
}
.nav {
order: -1;
}
.bg {
background: #eee;
margin: 10px;
}
@media (max-width: 768px) {
.body {
flex-direction: column;
flex: 1;
}
.nav,
.ads,
.content {
flex: auto;
}
}
这里面需要注意的点有
container的flex-direction: column这样保证了header,body,footer是在垂直轴上排列
header,footer的高度可以通过flex: 0 0 100px来控制
nav可以通过order:-1来调整位置
通过@media (max-width: 768px)来调整小屏幕的页面结构
3、侧边固定宽度侧边固定宽度，右边自适应
html代码如下。
asideheadercontent
CSS代码如下。
.bg {
background: #eee;
margin: 10px;
}
.container1 {
min-height: 100vh;
display: flex;
}
.aside1 {
/* flex: 0 0 200px; */
flex: 0 0 20%;
}
.body1 {
display: flex;
flex-direction: column;
flex: 1;
}
.content1 {
flex: 1;
}
.header1, .footer1 {
flex: 0 0 10%;
}
这个和上面的基本差不多就不做解释了。
每行的项目数固定，会自动分行。
html代码如下
css代码如下
.container2 {
width: 200px;
height: 150px;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.item {
box-sizing: border-box;
background: #eee;
flex: 0 0 20%;
height: 40px;
margin: 5px;
}
这里主要使用到了flex-flow: row wrap使得子元素水平排列，并且换行
这是我简单总结的一些布局。如有错误，欢迎指正。更多系列文章
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116023.html
摘要：中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。我称之为果冻依赖型元素，又称之为依赖型元素，也就是说只有一个元素属于或是也可以理解为水平水平，其身上的属性才会起作用。 单列布局 水平居中 水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，...
摘要：中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。我称之为果冻依赖型元素，又称之为依赖型元素，也就是说只有一个元素属于或是也可以理解为水平水平，其身上的属性才会起作用。 单列布局 水平居中 水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，...
摘要：布局是年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。实践用来实现圣杯布局圣杯布局指的是一种最常见的网站布局。一般情况下，这种布局要求固定高度，固定宽度，自适应。 Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。 align-content 平时使用 ...
阅读 3653·2021-09-22 15:15
阅读 3557·2021-08-12 13:24
阅读 1311·2019-08-30 15:53
阅读 1820·2019-08-30 15:43
阅读 1182·2019-08-29 17:04
阅读 2793·2019-08-29 15:08
阅读 1578·2019-08-29 13:13
阅读 3087·2019-08-29 11:06
