常用布局使用felx布局来实现
2018-12-13 本文已影响0人
wait_cynthia
1. 一行显示，左边固定宽度右边自适应
html代码
<body>
<h4>felx布局实现左边固定宽度，右边自适应</h4>
<div class="flexBox">
<div class="left">左边固定宽度</div>
<div class="flex">右边自适应</div>
</div>
</body>
css代码
<style>
* {
padding: 0;
margin: 0;
}
h4{
margin: 10px 0;
}
.flexBox {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
height: 200px;
flex-flow: row; /* 主轴为水平方向，起点在左端。 */
}
.left {
width: 100px;
background: red;
}
.flex {
/* flex: 1 1 auto; */
/*
* 以上相当于 flex-grow: 1 项目的放大比例
* flex-shrink: 1 项目的缩小比例
* flex-basis: auto 项目占据主轴的全部空间
*/
flex-grow: 1; /*width充满剩余的空间*/
background: blue;
}
</style>
2.一行显示，右边固定宽度左边自适应
html代码
<body>
<h4>felx布局实现右边固定宽度，左边自适应</h4>
<div class="flexBox">
<div class="flex">左边自适应</div>
<div class="right">右边固定宽度</div>
</div>
</body>
css代码
<style>
* {
padding: 0;
margin: 0;
}
h4{
margin: 10px 0;
}
.flexBox {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
height: 200px;
flex-flow: row; /* 主轴为水平方向，起点在左端。 */
}
.right {
width: 100px;
background: red;
}
.flex {
flex-grow: 1; /*width充满剩余的空间*/
background: blue;
}
</style>
3.一行显示，中间固定宽度左右两边自适应
html代码
<body>
<h4>felx布局实现中间固定宽度，两边自适应</h4>
<div class="flexBox">
<div class="left">左边自适应</div>
<div class="flex">中间固定宽度</div>
<div class="right">右边自适应</div>
</div>
</body>
css代码
<style>
* {
padding: 0;
margin: 0;
}
h4{
margin: 10px 0;
}
.flexBox {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
height: 200px;
flex-flow: row; /* 主轴为水平方向，起点在左端。 */
}
.flex {
width: 100px;
background: red;
min-width: 100px; /* 当浏览器宽度很小时没有这句中间部分的宽度会变小 */
}
.right, .left {
flex-grow: 1; /* width充满剩余的空间，是以上代码的简写 */
background: rgb(110, 110, 112);
}
</style>
4.一行显示，中间自适应两边固定宽度
html代码
<body>
<h4>felx布局实现中间自适应，两边固定宽度</h4>
<div class="flexBox">
<div class="left">左边固定宽度</div>
<div class="flex">中间自适应</div>
<div class="right">右边固定宽度</div>
</div>
</body>
css代码
<style>
* {
padding: 0;
margin: 0;
}
h4{
margin: 10px 0;
}
.flexBox {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
height: 200px;
flex-flow: row; /* 主轴为水平方向，起点在左端。 */
}
.flex {
flex-grow: 1; /*width充满剩余的空间*/
background: rgb(110, 110, 112);
}
.right, .left {
width: 100px;
background: red;
}
</style>
5.一行只显示两个，超过的排下一行
html代码
<body>
<h4>felx布局实现一行显示两个，超过宽度换行</h4>
<div class="flexBox">
<div class="flex">1</div>
<div class="flex">2</div>
<div class="flex">3</div>
<div class="flex">4</div>
<div class="flex">5</div>
</div>
</body>
css代码
<style>
* {
padding: 0;
margin: 0;
}
h4{
margin: 10px 0;
}
.flexBox {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-flow: row; /* 主轴为水平方向，起点在左端。 */
flex-wrap: wrap /* 超过宽度自动换行 */
}
.flex {
flex: 0 0 50%;
height: 100px;
}
</style>
如有不对的地方或更好的方法请指出，感谢您的阅读
