收藏文章 楼主

CSS3学习之flexbox布局详解

版块:编程技术   类型:普通   作者:小白   查看:6603   回复:1   获赞:12   时间:2016-11-13 02:01:28

这篇文章里我们将学习CSS  http://www.maiziedu.com/course/352/里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布局的知识远比本文介绍的这些要丰富,这总重要的几个知识点就是这些,掌握了它们,再学些其他的用法就容易多了。

超时,系统自动处理

WOSB产品论坛 
回复列表
默认   热门   正序   倒序
cnhbzx
2F
好高深啊
 4   2016-11-14 13:28:58  回复

回复:CSS3学习之flexbox布局详解

暂无用户组
退出
等级:0级
天豆:
游客:

公告

近期本站被人为恶意注册及发布垃圾帖,本站已开启普通用户发帖审核功能,VIP系列用户组不受影响,一但发现发布违法或垃圾帖的用户,该用户账号将会被永久封号,请大家共同维护互联网环境,共创美好互联网未来。

永久免费,购授权享豪礼

3年个人版授权+1940天豆仅需194元

终身个人版授权+3880天豆仅需388元

3年尊享版授权+13580天豆仅需1358元

终身尊享版授权+27160天豆仅需2716元

扫个红包吧,快乐你我他

红包

Powered by HadSky 7.12.4

©2015 - 2022 HadSky

购买产品 用户文档 授权查询 网站绑定 更新补丁 客户案例 陕ICP备13005805号

您的IP:44.211.22.31,2022-09-27 22:09:20,Processed in 0.03534 second(s).

支持原创软件,抵制盗版,共创美好明天!
头像

用户名:

粉丝数:

签名:

资料 关注 好友 消息
已有0次打赏
(12) 分享
分享

请保存二维码或复制链接进行分享

取消