0
点赞
收藏
分享

微信扫一扫

flex布局常见的一些案例



风华正茂的年纪遇到你,是我最大的幸运,谢谢你,靠近我,了解我,治愈我,陪着我,谢谢你来爱我。


flex是啥:是一种​​弹​​性布局方式。(注意这个弹)

flex属性值大全:

flex的属性虽然较多,但实际常用的就那么几个,会以下几个布局,就能完成99%的布局问题了。

下面的案例为了更好的理解,需要都设置重置样式:

*{
padding: 0;
margin: 0;
}

1. flex设置元素 垂直、水平 居中对齐

<template>
<div id="app">
<div class="demo">
<div class="inner">
<p>这是一个测试</p>
</div>
</div>
</div>
</template>

<style lang="scss">
.demo {
width: 500px;
height: 300px;
border: 1px solid purple;
display: flex; /*设置为flex布局*/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.inner {
width: 160px;
height: 160px;
font-size: 26px;
border: 1px solid red;
}
</style>

flex布局常见的一些案例_css3

demo => innder => p 一共三层结构,demo设置了flex,并未影响到p,这就是我和你讲的flex只影响他的下一级的展现点。

2.用flex布局制作导航栏

以前在写导航栏的时候,总是用float或者display:inline-block实现,但是这两种方法都会有各种问题,比如浮动会影响父元素以及兄弟元素的样式,需要清除浮动。

现在用flex会很方便,并且是弹性布局。

<template>
<div id="app">
<ul>
<li>音乐</li>
<li>影视</li>
<li>旅游</li>
</ul>
</div>
</template>

<style lang="scss">
ul{
display: flex;
}
li{
flex: 1;/*让元素占据剩余空间,如果每个都是1,则平分*/
text-align: center;
line-height: 100px;
cursor: pointer;
background: #999;
border: 1px solid #fff;
box-sizing: border-box;
}
</style>

flex布局常见的一些案例_导航栏_02

我再加两个li:

flex布局常见的一些案例_css3_03

看,仍就是被平分的。

3.有时候需要做成左图右文字的样式,如下图所示:

记住一件事:布局无非就是上中下,左中右。拿到ui图第一件事就是把ui图拆成上中下或者左中右的形式。

左图又文:

flex布局常见的一些案例_css3_04

<template>
<div id="app">
<div class="demo">
<div class="left"></div>
<div class="right">
<p>Iphone7 PLUS XXXXXXXXXX</p>
<span>总人数99</span>
<span>剩余人数33</span>
<div class="btn">立即参与</div>
</div>
</div>
</div>
</template>

<style lang="scss">
.demo{
display: flex;/*设置为flex布局*/
justify-content: space-between;//左右布局
}
.left{
width: 100px;
height: 100px;
background: #d4cdcd;
}
.right{
flex: 1;
width: 380px;
height: 100px;
padding: 10px 15px;
background: #fff;
p{
margin-bottom: 10px;
}
.btn{
margin-top: 10px;
background: blue;
padding: 5px;
width: 100px;
text-align: center;
color: #fff;
}
}
</style>

甚至可以多列布局:

flex布局常见的一些案例_css_05

<template>
<div id="app">
<div class="demo">
<div class="left"></div>
<div class="mid">
<p>description</p>
<p>description</p>
<p>description</p>
</div>
<div class="right">
<div class="btn">确认</div>
<div class="btn">取消</div>
</div>
</div>
</div>
</template>

<style lang="scss">
.demo{
display: flex;/*设置为flex布局*/
justify-content: space-between;//左右布局
}
.left{
width: 100px;
height: 100px;
background: #d4cdcd;
}
.mid{
background: #fff;
flex: 1;/*中间的让他占据剩余宽度 */
padding: 10px 10px;
}
.right{
width: 120px;
height: 100px;
padding: 10px 15px;
background: #fff;
p{
margin-bottom: 10px;
}
.btn{
margin-top: 10px;
background: blue;
padding: 5px;
width: 100px;
text-align: center;
color: #fff;
}
}
</style>

4.固定百分比布局:

(1)等分布局

flex布局常见的一些案例_css_06

<template>
<div id="app">
<div class="demo">
<div class="item item1">1/4</div>
<div class="item item2">2/4</div>
<div class="item item3">3/4</div>
<div class="item item4">4/4</div>
</div>
</div>
</template>

<style lang="scss">
.demo{
display: flex;
}
.item{
flex: 1;
background: #fff;
border: 1px solid #999;
box-sizing: border-box;
height: 40px;
}
</style>

(2)某一个固定

flex布局常见的一些案例_html_07

<template>
<div id="app">
<div class="demo">
<div class="item item1">auto</div>
<div class="item item2">1/2</div>
<div class="item item3">auto</div>
<div class="item item4">auto</div>
</div>
</div>
</template>

<style lang="scss">
.demo{
display: flex;
}
.item{
height: 40px;
background: #fff;
border: 1px solid #999;
}
.item{
flex: 1;
}
.item2{
flex: 0 0 50%;
}
</style>

(3)某两个固定

flex布局常见的一些案例_导航栏_08

<template>
<div id="app">
<div class="demo">
<div class="item item1">auto</div>
<div class="item item2">1/2</div>
<div class="item item3">auto</div>
<div class="item item4">1/5</div>
</div>
</div>
</template>

<style lang="scss">
.demo{
display: flex;
}
.item{
height: 40px;
background: #fff;
border: 1px solid #999;
flex: 1;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}
</style>

(4)三个固定

flex布局常见的一些案例_html_09

<template>
<div id="app">
<div class="demo">
<div class="item item1">1/10</div>
<div class="item item2">1/2</div>
<div class="item item3">auto</div>
<div class="item item4">1/5</div>
</div>
</div>
</template>

<style lang="scss">
.demo{
display: flex;
}
.item{
height: 40px;
background: #fff;
border: 1px solid #999;
flex: 1;
}
.item1{
flex: 0 0 10%;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}
</style>

5.圣杯布局,如图所示

flex布局常见的一些案例_导航栏_10

<template>
<div class="demo">
<div class="header">头部</div>
<div class="body">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">底部</div>
</div>
</template>

<style lang="scss">
.demo{
display: flex;
flex-direction: column;
height: 100vh;
}
.demo div{
flex: 1;
}
.body{
display: flex;
}
.header,.footer,.left,.right{
flex: 0 0 20%!important;
}

.header{
background: #999;
}
.body{
.left{
background: gainsboro;
}
.center{
background: pink;
}
.right{
background: peachpuff;
}
}
.footer{
background: #999;
}
</style>

6.输入框布局

有时需要在输入框的前部添加提示,或者后部添加按钮,如图所示:

flex布局常见的一些案例_html_11

<template>
<div class="demo">
<span class="tip">icon</span>
<input type="text" name="" />
<button>search</button>
</div>
</template>

<style lang="scss">
.demo{
display: flex;
height: 40px;
}
.tip{
width: 20px;
height: 100%;
line-height: 40px;
text-align: center;
}
input{
flex:1;
}
</style>

7. 底部footer固定在底部,但是不是fixed定位

页面会经常用到固定的底栏,但是当页面内容过少时,footer会到页面中间,下面用flex来解决

flex布局常见的一些案例_导航栏_12

<template>
<div class="demo">
<div class="main">
<p>我是内容</p>
</div>
<div class="footer">这是底部</div>
</div>
</template>

<style lang="scss">
.demo{
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.main{
flex: 1;
background: #fff;
padding: 30px;
}
.footer{
width: 100%;
height: 120px;
background: #333;
color: #ffff;
line-height: 120px;
text-align: center;
flex-shrink: 0;
}
</style>

8.流式布局 ,如下如所示:

flex布局常见的一些案例_css_13

flex布局常见的一些案例_导航栏_14

随便多少个,都会按照顺序排下去,啊哦,上次和你讲的时候我还不知道的,也是最近看的。

<template>
<div class="demo">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</template>

<style lang="scss">
.demo{
width: 100%;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.item{
flex: 0 0 33.333333%;
height: 137px;
box-sizing: border-box;
background: red;
border: 1px solid #999;
box-sizing: border-box;
}
</style>



举报

相关推荐

Flex布局案例练习(一)

DOM的一些案例

一些经典案例

一些常见的状态码

一些常见的网络协议

Linux一些常见的命令

flex布局(理论+案例解释)

0 条评论