Flex案例——垂直居中、导航栏、圣杯布局等
Flex案例
- 一、案例
-
- 1.弹性容器案例
- 2.弹性元素案例
- 3.flex设置元素垂直居中
- 4.flex布局实现导航栏
- 5.固定百分比布局
- 6.圣杯布局
- 7.固定div在底部
一、案例
1.弹性容器案例
<style>
.son {
width: 60px;
height: 60px;
border: 1px solid red;
margin: 5px;
box-sizing: border-box;
background-color: blanchedalmond;
}
.flex-direction,.align-content,.align-items, .flex-wrap,.flex-flow,.justify-content{
width: 600px;
display: flex;
background-color: gray;
margin: 10px auto;
}
.flex-direction {
flex-direction: row;
}
.flex-wrap {
flex-wrap: nowrap;
}
.flex-flow {
flex-flow: row wrap-reverse;
}
.justify-content {
height: 100px;
justify-content: space-around;
}
.align-items {
height: 100px;
flex-flow: row wrap;
align-items: baseline;
}
.align-content {
height: 300px;
flex-flow: row wrap;
align-content: stretch;
}
style>
<body>
<div class="flex-direction">
<div class="son">老大div>
<div class="son">老二div>
<div class="son">老三div>
<div class="son">老四div>
<div class="son">老五div>
div>
body>
2.弹性元素案例
<style>
.son {
width: 60px;
height: 60px;
border: 1px solid red;
margin: 5px;
box-sizing: border-box;
background-color: blanchedalmond;
}
.order,.flex-grow,.flex-shrink,.flex-basis,.flex,.align-self {
width: 600px;
height: 100px;
display: flex;
margin: 10px auto;
background-color: gray;
}
/* :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 */
.order>div:nth-child(1) {
/* 数值越小，排列越靠前 默认为0 */
/* order: 2; */
}
.order>div:nth-child(2) {
order: 10;
}
.order>div:nth-child(3) {
order: -1;
}
.order>div:nth-child(4) {
order: 5;
}
.order>div:nth-child(5) {
order: 8;
}
.flex-grow>div {
flex-grow: 1;
}
.flex-grow>div:nth-child(2) {
flex-grow: 2;
}
.flex-shrink>div {
flex-shrink: 1;
}
.flex-shrink>div:nth-child(1) {
flex-shrink: 0;
}
.flex-basis>div:nth-child(2) {
/* flex-basis优先级大于width */
flex-basis: 100px;
}
.flex>div {
/* 等于flex-grow：1; */
flex: 1;
}
.align-self {
height: 240px;
align-items: flex-start;
}
.align-self>div:nth-child(2) {
align-self: flex-end;
}
style>
<body>
<div class="order">
<div class="son">老大div>
<div class="son">老二div>
<div class="son">老三div>
<div class="son">老四div>
<div class="son">老五div>
div>
body>
3.flex设置元素垂直居中
父元素设置flex后，利用justify-content和align-items共同完成。
<style>
.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>
<body>
<div class="demo">
<div class="inner">
<p>这是一个测试这是一个测试这是一个测试p>
div>
div>
body>
4.flex布局实现导航栏
<style>
ul{
display: flex;
}
li{
flex: 1;
text-align: center;
line-height: 100px;
background-color: #0069D9;
list-style: none;
font-size: 28px;
}
style>
<body>
<ul>
<li>音乐li>
<li>影视li>
<li>旅游li>
ul>
body>
<body>
<div class="demo">
<div class="left">div>
<div class="right">
<p>Iphone7 PLUS XXXXXXXXXXp>
<span>总人数99span>
<span>剩余人数33span>
<div class="btn">立即参与div>
div>
div>
body>
<style>
.demo{
display: flex;
justify-content: space-around;
}
.demo > div{
flex: none; /* flex: none = flex: 0 0 auto; 固定尺寸不伸缩*/
}
.left{
width: 200px;
height: 200px;
background: #0069D9;
}
.right{
width: 380px;
height: 200px;
border: 1px solid red;
}
style>
5.固定百分比布局
主要是使用flex属性中flex-basis固定大小
<body>
<div class="demo">
<div class="item item1">div>
<div class="item item2">div>
<div class="item item3">div>
<div class="item item4">div>
div>
body>
<style type="text/css">
.demo{
display: flex;
background-color: pink ;
}
/*1.等分布局*/
.item{
flex: 1;
}
.item1,.item2,.item3,.item4{
border:1px solid red ;
background-color: greenyellow;
margin:5px ;
}
/*2.某一个固定*/
.item{
flex: 1;
background-color: greenyellow;
margin: 5px;
border: 1px solid green;
}
.item2{
flex: 0 0 50%; /* item2占主轴的50% */
}
/*3.多个固定*/
.item{
flex: 1;
background-color: greenyellow;
border: 1px solid #ADFF2F;
margin: 5px;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}
style>
6.圣杯布局
<style>
.demo{
display: flex;
flex-direction: column;
text-align: center;
font-size: 25px;
}
.demo div{
flex: 1;
}
.body{
display: flex;
}
.header,.footer,.left,.right{
flex: 0 0 20% !important;
}
.header,.footer{
background-color: dimgray;
}
.left{
background-color: lightgray;
}
.center{
background-color: greenyellow;
}
.right{
background-color: lightpink;
}
.left,.center,.right{
height: 300px;
}
.header{
height: 100px;
}
style>
<body>
<div class="demo">
<div class="header">头部div>
<div class="body">
<div class="left">leftdiv>
<div class="center">centerdiv>
<div class="right">rightdiv>
div>
<div class="footer">底部div>
div>
body>
7.固定div在底部
<body>
<div class="demo">
<div class="main">这是主要内容div>
<div class="footer">这是底部div>
div>
body>
<style>
*{
padding: 0;
margin: 0;
}
.demo{
display: flex;
flex-direction: column;
height: 100%; /* 重点1 */
}
/* 重点2：不能缺少对于html,body高度的设置。
一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度。
块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。
如果不写，就会出现下图，不确定的话可以加入一张图片试验。*/
html,body{
height: 100%;
}
.main{
flex: 1;
}
.footer{
width: 100%;
height: 120px;
background-color: black;
color:white;
}
style>
最终实现
