CSS3盒⼦模型（FLex弹性布局）实例代码全公开
前⾔
CSS3中的盒⼦模型（Flex弹性布局），是⽬前最流⾏的布局⽅式，相⽐于传统的Position，FLoat，Table 布局，盒⼦模型可以⽤更少的代码，实现更好的效果（⽐如：各种居中、对齐等）。
本⽂将把盒⼦模型中的各种布局⽅式，全⾯展⽰出来，并且直接提供相关代码，供读者使⽤。
项⽬展⽰
1. 盒⼦容器
图⽚⽰例
代码⽰例
<template>
<div class="container">
<div class="demo-box demo1">
<h1>flex-flow⽰例：</h1>
<h1>flex-flow⽰例：</h1>
<h2>flex-flow:column wrap-reverse;</h2> <ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div class="demo-box demo2">
<h1>flex-direction⽰例：</h1>
<h2>flex-direction:row-reverse</h2>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div class="demo-box demo3">
<h1>flex-wrap⽰例：</h1>
<h2>flex-wrap:wrap</h2>
<ul class="box">
<li>a</li>
<li>b</li>
flex布局对齐方式<li>c</li>
</ul>
</div>
<div class="demo-box demo4">
<h1>align-content⽰例：</h1>
<h2>align-content:space-around</h2>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</div>
<div class="demo-box demo5">
<h1>align-items⽰例：</h1>
<h2>align-items:flex-start</h2>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div class="demo-box demo6">
<h1>justify-content⽰例：</h1>
<h2>justify-content:space-between</h2> <ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
</template>
<style lang="scss" scoped>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.
demo-box {
width: 440px;
margin-bottom: 10px;
padding-bottom: 20px;
border: 1px solid black;
}
h1 {
font: bold 20px/1.5 georgia, simsun, sans-serif; }
.box {
display: -webkit-flex;
display: flex;
width: 220px;
margin: 0 auto;
padding: 10px;
list-style: none;
background-color: #eee;
}
.box li {
width: 100px;
height: 100px;
border: 1px solid #aaa;
text-align: center;
}
.demo1 {
.box {
height: 220px;
-webkit-flex-flow: column wrap-reverse;
flex-flow: column wrap-reverse;
}
}
.demo2 {
.box {
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
.demo3 {
.box {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.demo4 {
.box {
-
webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 200px;
height: 200px;
border-radius: 5px;
list-style: none;
background-color: #eee;
-webkit-align-content: space-around;
align-content: space-around;
}
.box li {
margin: 5px;
padding: 10px;
border-radius: 5px;
border-radius: 5px;
background: #aaa;
text-align: center;
width: 10px;
height: 10px;
}
}
.demo5 {
.
box {
width: 200px;
height: 100px;
border-radius: 5px;
list-style: none;
background-color: #eee;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.box li {
margin: 5px;
padding: 10px;
border-radius: 5px;
background: #aaa;
text-align: center;
width: 10px;
height: 10px;
}
}
.demo6 {
.box {
-webkit-justify-content: space-between; justify-content: space-between;
}
.box li {
margin: 5px;
padding: 10px;
border-radius: 5px;
background: #aaa;
text-align: center;
width: 10px;
height: 10px;
}
}
</style>
2. 盒⼦项⽬
图⽚⽰例
代码⽰例
<template>
<div class="container">
<div class="demo-box demo1"> <h1>flex⽰例：</h1>
<ul class="box">
<li>flex:1 1 400px;</li>
<li>flex:1 2 400px;</li>
<li>flex:1 2 400px;</li>
</ul>
</div>
<div class="demo-box demo2"> <h1>flex-grow⽰例：</h1>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</div>
<div class="demo-box demo3"> <h1>flex-shrink⽰例：</h1> <ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div class="demo-box demo4"> <h1>flex-basis⽰例：</h1>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</div>
<div class="demo-box demo5">
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论