三分钟学会css3中的flexbox布局.pdfVIP

三分钟学会 css3 中的flexbox 布局 这篇文章里我们将学习 CSS里 flexbox 布局的几个最重要的概念 ，通过学习 flexbox 布局 ，你会发现以往遇到的所有的关于布局的问题 ，现在都可以轻松解 决了。 我们将只关注几个核心概念 ，等这些核心知识掌握之后 ，你可以再慢慢的学习那 些不重要的相关知识。 1. 容器和容器里的元素 flexbox 布局的两个最重要的概念是容器(蓝色)和容器里的子元素(红色)。在本文 的例子中 ，容器和它的子元素都是 div。 横向布局 为了实现 flex 布局 ，我们需要在容器的 CSS里添加如下代码 ： .container { display: flex; } 效果如下 ： 对于容器里面的子元素 ，我们什么都不需要做。它们会自动的按横坐标一字排开。 纵向布局 在上面的演示中 ，缺省排列是沿着横坐标方向的 ，还有一个方向是纵坐标 ，这个 坐标轴的概念在理解 flex 布局中非常重要。 当我们在容器的 CSS里添加 flex-direction column.后 ，子元素的排列方向就 会发生变化。 .container { display: flex; flex-direction: column; } 现在 ，子元素的排列方向是沿着纵坐标的方向了。 2. 调整子元素的对齐方式 现在我们让子元素重新横向布局 ，这需要将 flex-direction属性的值从 column 改成 row, 子元素就会重新回到横向布局。 调整子元素的对齐方式 ，我需要使用justify-content 和 align-items 这两个属 性 ，它们控制着子元素的在横向和纵向两方面的定位和对齐方式。 下面我们将要使用justify-content 属性让所有子元素都居中对齐 ： .container { display: flex; flex-direction: row; justify-content: center; } 使用 align-items 属性来控制子元素的竖向对齐方式 ： .container { display: flex; flex-direction: row; justify-content: center; align-items: center; } 下面的列表中显示了justify-content 和 align-items属性可以使用的属性值 ： justify-content  flex-start (default)  flex-end  center  space-between  space-around align-items  flex-start (default)  flex-end  center  baseline  stretch 建议大家将justify-content 、align-items和flex-direction几个属性混合使用 ， 相互配合 ，看看都会达到什么样的布局效果。这样你才能正确的理解 flexbox 布 局的布局方式。 3. 子元素 最后 ，我们将学习针对子元素的一些应对 flexbox 布局的 CSS属性。 比如我们想调整第一个子元素的位置 ，我们可以给他添加 CSS属性 align-self ， 这个属性的属性值是和 align-items是一样的用法 .item1 { align-self : flex-end; } 效果是下面这样 ： 是不是很神奇企且简单 ！ 关于 flexbox 布局的知识远