flexbox

Flexbox was supposed to be the pot of gold at the long, long rainbow of insufficient CSS layout techniques. And the only disappointment I've experienced with flexbox is that browser vendors took so long to implement it. I can't also claim to have pushed flexbox's limits, but the technique has allowed me to accomplish a few tasks which were overly complicated in the past. One task was easily mastering vertical centering with flexbox.

Flexbox被认为是CSS布局技术不足的漫漫长路。而我对flexbox唯一的失望是浏览器供应商花了很长时间才实现它。我也不能声称已经突破了flexbox的极限，但是这项技术使我能够完成过去过于复杂的一些任务。一项任务是轻松地使用flexbox掌握垂直居中。

My next task was creating a responsive two-column layout with columns of equal width, equal height, and fixed-pixel margin between them, as well as any amount of padding. It was appallingly easy...and that's why I love flexbox!

我的下一个任务是创建一个自适应的两列布局，在两列之间具有相等的宽度，相等的高度以及固定的像素边距，以及任意数量的填充。这非常简单...这就是为什么我喜欢flexbox！

View Demo 观看演示

HTML (The HTML)

The markup requires one parent and two child elements:

标记需要一个父元素和两个子元素：


<div class="flexbox-container">
	<div><h3>Column 1</h3></div>
	<div><h3>Column 2</h3></div>
</div>

The content in each column can be any height -- that's not important here.

每列中的内容可以是任意高度-在此并不重要。

CSS (The CSS)

The CSS is also incredibly easy and brief:

CSS也非常简单和简短：


.flexbox-container {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
}

.flexbox-container > div {
	width: 50%;
	padding: 10px;
}

.flexbox-container > div:first-child {
	margin-right: 20px;
}

Simply set the display to flexbox on the parent and then give each child 50% width. What's sweet about flexbox is you can add padding, border, and margin to the child elements without needing to worry about a column spilling over to the next row.

只需将显示设置为父级上的flexbox，然后给每个子级50％的宽度。 flexbox的优点在于，您可以向子元素添加填充，边框和边距，而不必担心一栏溢出到下一行。

View Demo 观看演示

I was super excited when I learned about CSS calc because I wanted to shim what flexbox does today, but now that flexbox is supported by just about every modern browser, I don't need CSS calc for layouts. Excellent! I'm so glad that flexbox is here -- tasks that should be are easy now!

当我了解CSS calc时，我感到非常兴奋，因为我想补充一下flexbox的功能，但是现在几乎所有现代浏览器都支持flexbox，因此我不需要CSS calc进行布局。优秀的！我很高兴flexbox在这里-现在应该很容易的任务！