三分钟学会css3中的flexbox布局
2017-12-04 00:00
323 查看
这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现以往遇到的所有的关于布局的问题,现在都可以轻松解决了。
我们将只关注几个核心概念,等这些核心知识掌握之后,你可以再慢慢的学习那些不重要的相关知识。
效果如下:
三分钟学会css3中的flexbox布局
对于容器里面的子元素,我们什么都不需要做。它们会自动的按横坐标一字排开。
当我们在 容器 的CSS里添加 flex-direction : column. 后, 子元素 的排列方向就会发生变化。
三分钟学会css3中的flexbox布局
现在,子元素的排列方向是沿着纵坐标的方向了。
调整子元素的对齐方式,我需要使用 justify-content 和 align-items 这两个属性,它们控制着子元素的在横向和纵向两方面的定位和对齐方式。
下面我们将要使用 justify-content 属性让所有子元素都居中对齐:
三分钟学会css3中的flexbox布局
使用
align-items 属性来控制子元素的竖向对齐方式:
三分钟学会css3中的flexbox布局
下面的列表中显示了
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布局的布局方式。
比如我们想调整第一个子元素的位置,我们可以给他添加CSS属性 align-self,这个属性的属性值是和 align-items 是一样的用法:
效果是下面这样:
三分钟学会css3中的flexbox布局
是不是很神奇企且简单!
关于flexbox布局的知识远比本文介绍的这些要丰富,这总重要的几个知识点就是这些,掌握了它们,再学些其他的用法就容易多了。
我们将只关注几个核心概念,等这些核心知识掌握之后,你可以再慢慢的学习那些不重要的相关知识。
1. 容器和容器里的元素
flexbox布局的两个最重要的概念是 容器 (蓝色)和容器里的 子元素 (红色)。在本文的例子中, 容器 和它的 子元素 都是 div 。横向布局
为了实现flex布局,我们需要在 容器 的CSS里添加如下代码:.container { display: flex; }
效果如下:
三分钟学会css3中的flexbox布局
对于容器里面的子元素,我们什么都不需要做。它们会自动的按横坐标一字排开。
纵向布局
在上面的演示中,缺省排列是沿着横坐标方向的,还有一个方向是纵坐标,这个坐标轴的概念在理解flex布局中非常重要。当我们在 容器 的CSS里添加 flex-direction : column. 后, 子元素 的排列方向就会发生变化。
.container { display: flex; flex-direction: column; }
三分钟学会css3中的flexbox布局
现在,子元素的排列方向是沿着纵坐标的方向了。
2. 调整子元素的对齐方式
现在我们让子元素重新横向布局,这需要将 flex-direction 属性的值从column 改成 row, 子元素就会重新回到横向布局。调整子元素的对齐方式,我需要使用 justify-content 和 align-items 这两个属性,它们控制着子元素的在横向和纵向两方面的定位和对齐方式。
下面我们将要使用 justify-content 属性让所有子元素都居中对齐:
.container { display: flex; flex-direction: row; justify-content: center; }
三分钟学会css3中的flexbox布局
使用
align-items 属性来控制子元素的竖向对齐方式:
.container { display: flex; flex-direction: row; justify-content: center; align-items: center; }
三分钟学会css3中的flexbox布局
下面的列表中显示了
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; }
效果是下面这样:
三分钟学会css3中的flexbox布局
是不是很神奇企且简单!
关于flexbox布局的知识远比本文介绍的这些要丰富,这总重要的几个知识点就是这些,掌握了它们,再学些其他的用法就容易多了。
相关文章推荐
- 三分钟学会CSS3中的FLEXBOX布局
- 三分钟学会css3中的flexbox布局
- CSS3 Flex布局 Flexbox的属性详解
- CSS3中的Flexbox弹性布局(一)
- css3中的flexbox布局
- 三分钟学会用 js + css3 打造酷炫3D相册
- 用CSS3中的flexbox 布局模式使div内容垂直居中:
- CSS3中的Flexbox弹性布局(二)
- flexbox-CSS3弹性盒模型flexbox布局完整版教程
- 10分钟学会基本的 Flexbox 布局
- 转:CSS3 Flexbox 布局介绍
- 使用CSS3 Flexbox布局
- 使用CSS3 Flexbox布局
- 使用CSS3 Flexbox布局
- CSS3--伸缩布局 Flexbox
- CSS3的flexbox布局
- CSS3 Flexbox布局那些事
- CSS3 flexbox 布局 ---- flex 容器属性介绍
- CSS3 flexbox 布局 ---- flex项目属性介绍