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>

Flex案例——垂直居中、导航栏、圣杯布局等_第1张图片
Flex案例——垂直居中、导航栏、圣杯布局等_第2张图片

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>

Flex案例——垂直居中、导航栏、圣杯布局等_第3张图片
Flex案例——垂直居中、导航栏、圣杯布局等_第4张图片

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>

Flex案例——垂直居中、导航栏、圣杯布局等_第5张图片

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>

Flex案例——垂直居中、导航栏、圣杯布局等_第6张图片

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>

Flex案例——垂直居中、导航栏、圣杯布局等_第7张图片

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>

Flex案例——垂直居中、导航栏、圣杯布局等_第8张图片

Flex案例——垂直居中、导航栏、圣杯布局等_第9张图片

最终实现
Flex案例——垂直居中、导航栏、圣杯布局等_第10张图片

你可能感兴趣的:(前端,flex,flexbox,css,css3)