flex是前端布局的又一个利器。 比浮动布局好很多
下面没有明确说明都是这样的布局 body里面
<div class="box"> <span class="item">帅帅帅帅</span> </div>下面来说基本的style的格式
.box{ width:100px; height: 100px; border:solid 1px blue; display: flex; align-items: center; justify-content: center; /*justify-content: flex-end;*/ /*justify-content: center;*/ }文字居中
.box{ width:100px; height: 100px; border:solid 1px blue; display: flex; justify-content: center; }上面这是水平居中
垂直下面水平居中
.box{ width:100px; height: 100px; border:solid 1px blue; display: flex; justify-content: center; align-items: flex-end; }效果
右下角
.box{ width:100px; height: 100px; border:solid 1px blue; display: flex; justify-content: flex-end; align-items: flex-end; }类似的就是配合justify-content align-items 使用 flex-start flex-end center 这几个属性使用
代码
<style> .box{ width:100px; height: 100px; border:solid 1px blue; display: flex; justify-content: space-between; } .item{ width: 30px; height: 30px; background: #000; } .item2{ width: 30px; height: 30px; background:indianred; } </style> <div class="box"> <span class="item"></span> <span class="item2"></span> </div>上面这种效果图
两点靠左排列
.box{ width:100px; height: 100px; border:solid 1px blue; display: flex; flex-direction: column; justify-content: space-between; }效果图
两个标签居中分散上下
.box{ width:100px; height: 100px; border:solid 1px blue; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }如图
两者据右
.box{ width:100px; height: 100px; border:solid 1px blue; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }效果图
只作用于item2 让其据右
<style> .box{ width:100px; height: 100px; border:solid 1px blue; display: flex; } .item{ width: 30px; height: 30px; background: #000; } .item2{ width: 30px; height: 30px; background:indianred; align-self: center; } </style>效果图
item2 放在右下角
<style> .box{ width:100px; height: 100px; border:solid 1px blue; display: flex; justify-content: space-between; } .item{ width: 30px; height: 30px; background: #000; } .item2{ width: 30px; height: 30px; background:indianred; align-self: flex-end; } </style>三个分别依次排列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 布局学习喽</title> <style> .box{ width:100px; height: 100px; border:solid 1px blue; display: flex; } .item{ width: 30px; height: 30px; background: #000; } .item:nth-child(2){ align-self: center; } .item:nth-child(3){ align-self: flex-end; } </style> </head> <body> <div class="box"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> </body> </html>效果图
对比和这种的区别
<style> .box{ width:100px; height: 100px; border:solid 1px blue; display: flex; justify-content: space-between; } .item{ width: 20px; height: 20px; background: #000; } .item:nth-child(2){ align-self: center; } .item:nth-child(3){ align-self: flex-end; }效果
四块分别位于四角 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex 布局学习喽</title> <style> .box{ width:100px; height: 100px; border:solid 1px blue; display: flex; flex-wrap: wrap; align-content: space-between; } .item{ width: 20px; height: 20px; background: #000; } .column { flex-basis: 100%; display: flex; justify-content: space-between; } </style> </head> <body> <div class="box"> <div class="column"> <span class="item"></span> <span class="item"></span> </div> <div class="column"> <span class="item"></span> <span class="item"></span> </div> </div> </body> </html>效果图
现在来对知识点进行一个总结
则篇文章讲的挺不错 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
