blog-web/source/_posts/前端杂烩/CSS布局(3) - Flex实践.md

title: CSS布局(3) - Flex实践 date: 2018-5-16 22:38:32 tags: - 前端 - css categories: - 前端杂烩

熟悉flex布局方式以后 , 就会发现flex布局十分灵活 19.1当中提到的多列布局 使用flex都可以以十分简洁的代码搞定

DOM结构

<div class="layout">
    <aside class="layout_aside">侧边栏宽度固定</aside>
    <div class="layout_main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout_main">主内容栏宽度自适应</div>
    <aside class="layout_aside">侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout_aside">左侧边栏宽度固定</aside>
    <div class="layout_main">主内容栏宽度自适应</div>
    <aside class="layout_aside">右侧边栏宽度固定</aside>
</div>
<div class="layout">
    <aside class="layout_aside">第1个侧边栏宽度固定</aside>
    <aside class="layout_aside">第2个侧边栏宽度固定</aside>
    <div class="layout_main">主内容栏宽度自适应</div>
</div>
<div class="layout">
    <div class="layout_main">主内容栏宽度自适应</div>
    <aside class="layout_aside">第1个侧边栏宽度固定</aside>
    <aside class="layout_aside">第2个侧边栏宽度固定</aside>
</div>

css样式

.layout {
	height : 200px;
	display: flex;
}
.layout > .layout_aside {
	background-color: pink;
	width : 100px;
}
.layout > .layout_main {
	background-color: #ccc;
	flex-grow: 1;
}

无论结构是什么样子 , 只要让main区域自动放大 , 侧边栏的宽度固定即可

---

对于常见的 上 左下 右下 将整个窗口区域分为3部分 , 并且外部区域没有滚动条的布局 ( 通常右下作为主内容显示区 , 这部分可以有自己的纵向滚动条 ) 使用flex实现起来也十分简单 , 不需要使用js获取可视区域的尺寸进行控制

DOM结构

<div id="main">
	<div class="top">我是顶部条</div>
	<div class="down">
		<div class="left">我是侧边栏</div>
		<div class="content">我是主面板</div>
	</div>
</div>

main是最外层的flex容器 , 其中包含top和down两个项目 down本身也是一个flex容器 , 其中包含left和content两个项目

CSS样式

* {
	margin: 0;
	padding : 0;
}
#main {
	height : 100%;
	display: flex;
	flex-direction: column;
}
#main > .top{
	height : 50px;
	background-color: blue;
}
#main > .down {
	display: flex;
	flex-grow: 1;
}
#main > .down > .left{
	width : 200px;
	background-color: yellow;
}
#main > .down > .content {
	flex-grow: 1;
	background-color: pink;
}