您的位置：首页 > 其它

flex布局的学习总结

2017-07-14 17:26 423 查看

前言：因为做任务十涉及到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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航