Flex布局应用实例

缺乏、安全感 2022-05-19 12:21 194阅读 0赞

### 1、flex设置元素水平垂直居中 ###

.box{
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		border: 1px solid black;
    		width:500px;
    		height:500px;
    	}

**实现效果：**

![70][]

### 2、用flex布局制作导航栏 ###

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

ul{
    	display: flex;
    }
    li{
    	flex:1;
    	text-align: center;
    	line-height: 100px;
    	list-style: none;
    	background: green;
    	border-right: 1px solid grey;
    }

**实现效果：**

![70 1][]

### 3、图文并排的样式：左边是图片，右边是文字 ###

.box{
    		display: flex;
    		justify-content: space-between;
    		width: 350px;
    		height: 150px;
    		border: 1px solid grey;
    }
    .left{
    		width: 100px;
    		height: 100px;
    		background: grey;
    }
    .right{
    		width: 150px;
    		height: 100px;
    }

**实现效果：**

![70 2][]

### 4、固定百分比布局 ###

.demo{
     	display: flex;             
    }
    .item{
     	flex: 1;
     	background: green;
     	border-right:1px solid grey;
     	line-height: 100px;
    }

**实现效果：**

![70 3][]

### 5、某一个固定 ###

.demo{
     	 display: flex;             
    }
    .item{
     	flex: 1;
     	background: green;
     	border-right:1px solid grey;
     	line-height: 100px;
     	color: #fff;
     	text-align: center;
    }
    .item2{
        flex: 0 0 50%;
    }

**实现效果：**

![70 4][]

### 6、圣杯布局 ###

圣杯布局指的是一种最常见的网站布局。页面从上到下，分成三部分：头部（header），躯干（body），尾部（footer）。

其中躯干又水平分成三栏：从左到右为：导航、主栏、副栏。

<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>

.demo{
      	display: flex;
    	flex-direction: column;            
    }
    .demo div{
     	flex: 1;
    }
    .body{
     	display: flex;  
    } 
    .header, .footer{
    	 background: grey;
    	 line-height: 80px;
    	 text-align: center;
    }
    .left, .right{
    	 background: pink;
    	 line-height: 200px;
    	 text-align: center;
    }
    .header,.footer,.left,.right{
     	flex: 0 0 20%!important;
    }

**实现效果：**

![70 5][]

### 7、双飞翼布局 ###

双飞翼布局，就是两端固定宽高，中间自适应的三栏布局。

<div id="container">
      	<div id="left" class="column">#left</div>
        <div id="center" class="column">#center</div>
        <div id="right" class="column">#right</div>
    </div>

body {
            min-width: 550px;
       	}
        #container{
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }
        .column{
            height: 200px;
            color:white;
        }
        #center{
            flex-grow: 1;
            background-color: black;
        }
        #left{
            flex-basis: 200px;
            background-color: red;
        }
        #right{
            flex-basis: 200px;
            background-color: blue;
        }

**实现效果：**

### ![70 6][] ###

### 8、底部fooer固定在底部，但是不是fixed定位 ###

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

<div class="demo">
      	<div class="main">这是主要内容</div>
      	<div class="footer">这是底部</div>
    </div>

.demo{
        display: flex;
       	flex-direction: column;
       	width: 300px;
       	height: 200px;
    }
    .main{
      	flex: 1;
      	background: pink;
    }
    .footer{
       	width: 100%;
     	height: 30px;
     	background: grey;
    }

**实现效果：**

![70 7][]

[70]: /images/20220519/8b7d9128676f4dce802f958a4683f2b1.png
[70 1]: /images/20220519/7fe96831035e4bc598af51df9a0162ab.png
[70 2]: /images/20220519/8a6ecacad6014689abe1f541f1483753.png
[70 3]: /images/20220519/8ecf28981fd94149aa830b998e18c0d1.png
[70 4]: /images/20220519/7f53b715742c44c4a62243a5b228b757.png
[70 5]: /images/20220519/34e711e3545e43759d98d4af9a000603.png
[70 6]: /images/20220519/2ae848cc7fb5463b836fb6ef7c0df671.png
[70 7]: /images/20220519/d2f9897fea8f4e57bf0f0b35aeeb36e9.png