flex布局——学习篇

本文是个人学习笔记，通过对各个属性demo的应用，加深印象。更深的理解还是要在实际应用中获取，再进行总结。

从最简单的demo开始flex。

html

<div class="wrap">
	<div class="item">item1</div>
	<div class="item">item2</div>
</div>

css

.wrap {
	display: -webkit-flex;
	display: flex;
}
.item {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	border: 1px solid #000;
}

效果图:

概括而言，

• 外层设置 display: flex;
• 内层的每一项设置 flex-grow: 1;

这样内层的两个item就有弹性效果了。(外层的宽度如何变化，两个item的宽度都会随之变化)

flex-grow

上面demo中两个item各自一半的效果就是靠这个flex-grow属性做到的。

作用： 项目的放大比例。
默认值： 0，也就是说对应的item不会去管剩余的空间。

html

<div class="wrap">
	<div class="item item1">item1</div>
	<div class="item item2">item2</div>
</div>

css

.wrap {
	display: -webkit-flex;
	display: flex;
}
.item1 {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	border: 1px solid #000;
}
.item2 {
	-webkit-flex-grow: 2;
	flex-grow: 2;
	border: 1px solid #000;
}

效果图:

对比两个demo很容易就理解flex-grow了。

看完这个属性的作用，让我联想到了之前准备校招面试经常看到的题目：左边固定，右边自适应的布局。
html

<div class="wrap">
	<div class="left">left</div>
	<div class="right">right</div>
</div>

css

.wrap {
	display: -webkit-flex;
	display: flex;
}
.left {
	width: 100px;
	border: 1px solid #000;
}
.right {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	border: 1px solid #000;
}

效果图:

order

html

<div class="wrap">
	<div class="item1">item1</div>
	<div class="item2">item2</div>
	<div class="item3">item3</div>
	<div class="item4">item4</div>
	<div class="item5">item5</div>
	<div class="item6">item6</div>
</div>

css

.wrap {
	display: -webkit-flex;
	display: flex;
}
.item1 {
	order: 1;
	border: 1px solid #000;
}
.item2 {
	order: 6;
	border: 1px solid #000;
}
.item3 {
	order: 3;
	border: 1px solid #000;
}
.item4 {
	order: 4;
	border: 1px solid #000;
}
.item5 {
	order: 5;
	border: 1px solid #000;
}
.item6 {
	order: 2;
	border: 1px solid #000;
}

效果图:

其实就是有个排序的作用。

flex-shrink

作用：项目的缩小比例。
默认值：1。

默认值状态下，当项目被“挤”的时候，会缩小。

看个demo。

html

<div class="wrap">
	<div class="item1">item1</div>
	<div class="item2">item2item2item2</div>
	<div class="item3">item3</div>
</div>

css

.wrap {
	display: -webkit-flex;
	display: flex;
	width: 200px;
}
.item1 {
	border: 1px solid #000;
	overflow: hidden;
}
.item2 {
	border: 1px solid #000;
}
.item3 {
	flex-shrink: 0;
	border: 1px solid #000;
	overflow: hidden;
}

效果图:

上面这个demo中被挤的是item1，因为item3设置了flex-shrink: 0;，也就是会被缩小0倍，相当于不再会被“挤”。
利用这个属性，可以满足工作中很多应用场景。

flex-basis

这个属性我的理解和设置一个width一样的效果，不作展开，等什么时候理解更深了，再来填坑。

flex

其实就是对flex-grow、flex-shrink、flex-basis的缩写。
对应的默认值分别是 0 1 auto;
类似：
flex: 2 0 100px;

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

---

上面提到的属性都是每个项目的属性。下面简单罗列下容器的属性。

• flex-direction [row | row-reverse | column | column-reverse] 这些值一看就明白
• flex-wrap [nowrap | wrap | wrap-reverse]
• flew-flow 上面两个属性的缩写形式
• 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 | str]

参考来源
阮一峰