前言:因为做任务十涉及到flex布局,所以索性花了一个上午的时间好好看了一遍。之前也看了,但是没有做实战练习,所以很多属性还是很容易忘记。其实就是熟能生巧的事情啦。
以下的所有总结都还未涉及到浏览器兼容的问题,只针对不同的属性做介绍。具体的语法介绍可以看阮一峰的教程:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
简单总结一下:
一、容器的属性:
①flex-direction:row|row-reverse|column|column-reverse
(项目排列方向:从左到右水平,从右到左水平,从上到下,从下到上)
②flex-wrap:nowrap|wrap|wrap-reverse
(项目换行:不换行【默认】,换行,第一行在下方的换行)
③flex-wrap:<flex-direction> |<flex-wrap>
(①和②的结合,row|nowrap**【默认】**)
④justify-content:flex-start|flex-end|center|space-between|space-around
(主轴对齐方式:左对齐,右对齐,居中,两端对齐,两端对齐且每个项目两端间隔相等)
⑤align-items:flex-start|flex-end|center|baseline|stretch
(交叉轴对齐方式:起点对齐,终点对齐,中点对齐,基线对齐,占满)
align-content:flex-start|flex-end|center|space-between|space-around|stretch
(多根轴的对齐方式:略)
二、项目的属性
①order:项目排列顺序。默认为0(越大排的越后面)
②flex-grow:项目放大比例。默认为0(即不放大)
③flex-shrink:项目所需比例。默认为1(即空间不足就缩小)
④flex-basis:项目占主轴的空间(长度)。默认为auto
.item{
flex-basis:length|auto
}
⑤flex:2,3,4的结合。默认为 0 1 auto
.item{
flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
}
flex:none(0 0 auto),flex:auto(1 1 auto)
⑥align-self:定义单个项目的对齐方式。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
几个应用栗子:
一、百分比布局:
<!DOCTYPE html>
<html>
<head>
<title>百分比布局</title>
<meta charset="utf-8">
<style type="text/css">
.Grid{
display: flex;
}
.Grid-cell{
flex: 1;
margin-bottom: 10px;
}
.u-1of2{
flex: 0 0 50%;
}
.u-1of3{
flex: 0 0 33.333%;
}
.u-1of4{
flex:0 0 25%;
}
</style>
</head>
<body>
<div class="Grid">
<div class="Grid-cell u-1of3" style="background-color: red">1/3</div>
<div class="Grid-cell" style="background-color: green">auto</div>
<div class="Grid-cell u-1of4" style="background-color: red"></div>
</div>
<div class="Grid">
<div class="Grid-cell u-1of3" style="background-color: red">1/3</div>
<div class="Grid-cell" style="background-color: green">auto</div>
<div class="Grid-cell u-1of2" style="background-color: red"></div>
</div>
<div class="Grid">
<div class="Grid-cell" style="background-color: red">auto</div>
<div class="Grid-cell u-1of4" style="background-color: green">1/4</div>
<div class="Grid-cell u-1of2" style="background-color: red">1/2</div>
</div>
</body>
</html>
二、骰子
<!DOCTYPE html>
<html>
<head>
<title>flex布局实战3</title>
<meta charset="utf-8">
<style type="text/css">
.box{
/*设置样式*/
width: 100px;
height: 100px;
padding:10px;
background-color: #ccc;
border-radius: 5px;
/*关键代码*/
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
/*设置圆点*/
.item{
display: inline-block;
width: 20px;
height: 20px;
background-color: #000;
border-radius: 10px;
margin:5px;
}
</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>
<!-- 有点嵌套的意思,box里面的元素是column,column里面的元素是item -->
还有其他的应用,见:
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html