使用flexbox，很多布局问题都可以解决，今天分享一个所有子元素居中对齐的样式。

涉及到居中的样式CSS主要是align-items:center;

需求是需要中间的某个块不要占全部，而是自适应子元素内容扩展。

<div class="box">
	<ul class="box-inner">
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
		<li>A</li>
	</ul>
</div>

样式：

.box{
	position: fixed;
	right: 0;
	top: 0;
	height: 100%;
	width: 40px;
	right: 15px;
	display: flex;
	align-items: center;
	background: rgba(0,0,0,0.5);
}
.box-inner{
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	text-align: center;
	background: #ddd;
}
.box-inner li{
	width: 40px;
	white-space: nowrap;
	color: #f00;
}

实现效果，中间的一块不是铺满整个屏幕，而是根据里面的子元素自适应大小居中。

演示

记录这篇代码是因为我以为子元素的外面的元素无法自适应扩展高度，需要占据整个高度，后来看到一个同事写的代码才发现原来嵌套多一层子元素，并设置里面的资源为flexbox时，它就不会占据整个高度了。

题外话：

有一段时间没写文章记录了，感觉学习到的东西很浅显，所以也没有去记录的意愿，前段时间去搞微信和头条号，还以为能搞出些名堂来，结果是发现花费了很多时间，但却收获不大，而且经常还熬夜，有时候还因为被人鄙视内容不够好，我想我可能还没有准备好。

暂时先放弃了，接下来的日子里专心的写一写之前的一些记录，哪怕再小的东西，也不要去管有没有人关注；有没有人因为看到这些东西而取消关注你。也许某天你还会遇到，就会一个印象了。

我不是大牛，我只是觉得自己比较喜欢整理一些东西，纯粹是记录并分享一些自己的成长，仅此而已。