flex布局的典型布局方式有哪些？
- 网格布局
- 固定底栏布局
- 圣杯布局
- 输入框布局
- 悬挂布局
网格布局
最简单的网格布局是平局分配，在容器里面平均分配空间，设置项目的自动缩放。
注意：grid布局是一个很大的概念。会单独成一章来写。
<style>
.grid {
width: 100%;
height: 90px;
display: flex;
}
.grid-cell {
margin: 10px;
border: 1px solid red;
flex: 1;
}
.grid-cell2 {
margin: 10px;
border: 1px solid red;
flex: 2;
}
.grid-cell3 {
margin: 10px;
border: 1px solid red;
flex: 8;
}
.grid-cell4 {
margin: 10px;
border: 1px solid red;
width: 200px;
}
.grid-cell5 {
margin: 10px;
border: 1px solid red;
flex: 1;
}
</style>
<div class="grid">
<div class="grid-cell">item1</div>
<div class="grid-cell">item2</div>
</div>
<div class="grid">
<div class="grid-cell">item1</div>
<div class="grid-cell">item2</div>
<div class="grid-cell">item3</div>
</div>
<!-- 28分 -->
<div class="grid">
<div class="grid-cell2">2份</div>
<div class="grid-cell3">8份</div>
</div>
<!-- 左边固定，右边改变 -->
<div class="grid">
<div class="grid-cell4">固定200px</div>
<div class="grid-cell5">随着宽度改变而改变</div>
</div>
最简单的网格布局
固定底栏的布局
有时候网页中间部分的内容不够多，不能占满一屏的高度，底部就会提升到页面中间，这时候就要用到固定底栏的布局了。
*{
margin: 0;
padding: 0;
}
.grid {
display: flex;
/* 让项目改变方向，竖向布局 */
flex-direction: column;
min-height: 100vh;
}
.header{
background-color: red;
height: 50px;
}
.content{
background: yellow;
/* 内容高度会改变 */
flex: 1;
}
.footer{
background-color:green;
height: 50px;
}
<!-- 固定的底栏 -->
<div class="grid">
<div class="header">头部</div>
<div class="content">content</div>
<div class="footer">底部</div>
</div>
固定底栏的布局
圣杯布局
圣杯布局从上到下分为：头部，内容，尾部。内容又分为左侧导航，主栏，副栏。
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header, .footer{
height: 50px;
background-color:red;
}
.content{
/* 即是项目，又是容器 */
flex: 1;
display: flex;
}
.left, .right{
width: 100px;
background-color: yellow;
}
.mid{
flex: 1;
background-color: green;
}
<div class="container">
<div class="header">header</div>
<div class="content">
<div class="left">left</div>
<div class="mid">mid</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
圣杯布局
输入框布局
比如左边图片，中间输入框，右边是提交按钮的字样。
.wrapper1{
margin: 30px;
display: flex;
}
.item1{
flex: 1;
display: flex;
}
.item1 img{
width: 40px;
height: 40px;
border: 1px solid #ccc;
border-right: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.item1 button{
width: 50px;
border-left: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
<div class="wrapper1">
<div class="item1">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562259257032&di=f9751a349fdf0a957544d500443a096b&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F86%2F89%2F8956ec576d4d7f5.jpg"alt="">
<input type="text">
<button>submit</button>
</div>
<div class="item1">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562259257032&di=f9751a349fdf0a957544d500443a096b&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F86%2F89%2F8956ec576d4d7f5.jpg"alt="">
<input type="text">
<button>submit</button>
</div>
</div>
输入框布局
悬挂布局
就是左边是图片，右边是文字的情况。
主要是给图片套一层，因为img和p不是同一个元素，会出现错位的现象。
.wrapper{
display: flex;
align-items: flex-end;
}
<div class="wrapper">
<p><img src="http://img4.imgtn.bdimg.com/it/u=3007587289,3827075689&fm=26&gp=0.jpg" style="height: 100px;" alt=""></p>
<p>其指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。其指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。其指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。其指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。其指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。</p>
</div>
悬挂布局
网友评论