CSS: Flex 弹性布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS: Flex 弹性布局相关的知识，希望对你有一定的参考价值。
参考技术A 弹性元素是 container直接的在文档流中的子元素container在文档流中的子元素才是弹性子元素
弹性元素的默认宽高为内容宽高
flex-direction: row|row-reverse|column|column-reverse
container内的排列顺序: 从左往右 从右往左 从上往下 从小往上(都是从container对应方向边缘开始)
flex-wrap: nowrap|wrap|wrap-reverse
order: <integer>
initial: 0
两个黄色元素没有设置order, 默认为0
flex-basis: <height>|<width>
设置的是宽还是高根据主轴来定, 如果主轴是行则设置默认宽度, 如果主轴是列则设置默认高度
flex-grow: <integer>
initial: 0
弹性元素的宽或高计算:
flex-basis + flow-grow/sum(flow-grow)*remain
flex-shrink: <integer>
initial: 1
弹性元素的宽或高计算:
flex-basis + flow-shrink/sum(flow-shrink)*remain
这里的remain是负值, 表示超出的内容大小
flex: <flex-grow> || <flex-shrink> || <flex-basis>
initial: 0 1 main-size ( main-size 元素沿主轴方向默认尺寸)
justify-content: flex-start | flex-end | center | space-between | space-around
效果依次如下:
align-items: flex-start | flex-end | center | stretch | baseline
align-self: auto | flex-start | flex-end | center | baseline | stretch
initial: auto
当多行时: 应用于行
align-content: flex-start | flex-end | center | space-between | space-around | stretch
CSS3--Flex弹性盒子布局: 实例篇-圣杯布局
01: 弹性盒子模型介绍 & 游览器调试样式（简单介绍）
02: 弹性布局和传统布局响应对比
03: 使用弹性盒子模型布局微信客户端
04: 声明弹性盒子 & 容器的属性
05: flex项目的属性
06: 实例篇-骰子布局
07: 实例篇-网格布局
08: 实例篇-圣杯布局
09: 实例篇-输入框的布局 & 悬挂式布局
10: 实例篇-固定的底栏 & 流式布局
11: CSS3 flex弹性布局重点
1.Flex弹性盒子布局: 实例篇-圣杯布局
圣杯布局（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;
background-color: #ccc;
}
.HolyGrail-body {
display: flex;
flex: 1;
}
.HolyGrail-content {
flex: 1;
background-color: skyblue;
}
.HolyGrail-nav,
.HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em;
background-color: orange;
}
.HolyGrail-nav {
/* 导航放到最左边 */
order: -1;
}
运行结果：
如果是小屏幕，躯干的三栏自动变为垂直叠加。
在上面的css代码添加以下代码：
@media (max-width: 768px) {
.HolyGrail-body {
flex-direction: column;
flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
flex: auto;
}
}
以上是关于CSS: Flex 弹性布局的主要内容，如果未能解决你的问题，请参考以下文章