原文地址,保护版权,请勿转载:http://page.factj.com/blog/p/2574

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

三分钟学会CSS3中的FLEXBOX布局的更多相关文章

  1. ReactNative之参照具体示例来看RN中的FlexBox布局

    今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客.上篇博客<ReactNative之从HelloWorld中看环境搭建.组件封装.Props及State>中我们通过一个HelloW ...

  2. 三分钟学会@Autowired@Qualifier@Primary注解

    三分钟学会@Autowired@Qualifier@Primary注解 2018.10.08 20:24 154浏览 今天主要简单的跟大家介绍一下spring自动装配相关的@Autowired,@Qu ...

  3. [转]三分钟学会.NET Core Jwt 策略授权认证

    [转]三分钟学会.NET Core Jwt 策略授权认证 一.前言# 大家好我又回来了,前几天讲过一个关于Jwt的身份验证最简单的案例,但是功能还是不够强大,不适用于真正的项目,是的,在真正面对复杂而 ...

  4. 三分钟学会使用Derby数据库

    Derby数据库是一个纯用Java实现的内存数据库,属于Apache的一个开源项目.由于是用Java实现的,所以可以在任何平台上运行:另外一个特点是体积小,免安装,java1.6开始集成了derby数 ...

  5. CSS3中的Flexbox弹性布局(一)

    CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...

  6. CSS3弹性伸缩布局(中)——flexbox布局

    混合过渡版 上一篇我们主要讲了旧版box布局,今天这篇主要讲flexbox布局. 混合版本的Flexbox模型是2011年提出的工作草案,主要是针对IE10浏览器实现的伸缩布局效果,其功能和旧版本的功 ...

  7. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  8. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  9. CSS3中的Flexbox弹性布局(二)

    flexbox详解 flexbox的出现是为了解决复杂的web布局,因为这种布局方式很灵活.容器的子元素可以任意方向进行排列.此属性目前处于非正式标准. flex布局模型不同于块和内联模型布局,块和内 ...

随机推荐

  1. android 文件上传

    1.java原生上传 拼接上传的字符串 2.HttpClient方式上传 1.导入httpClient jar(core.mime)包 2.设置FileBody.MultiPartEntity.发送请 ...

  2. c++中类长度解析

    通常我们定义一个类,它所占的空间有多大呢? 首先我们看一下下面的这个类 class A{ public: void func1(void){ printf("11111heihei\n&qu ...

  3. Python Telnet弱口令爆破脚本及遇到的错误与问题

    写得时候遇到了一个很大的问题,就是我在发送用户名,接受用户名就会一直卡住.然后等了好久后提示 recv ‘\r\nSession timed out.\r\n\r\nTelnet Server has ...

  4. 给postfix设置黑名单

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  5. ThinkPHP CURD方法盘点:field方法

    ThinkPHP的CURD操作中有很多非常实用的方法,从这篇开始,我们会为大家一一介绍. 首先为大家介绍下field方法的用法.field属于模型的连贯操作方法之一,主要目的是标识要返回或者操作的字段 ...

  6. ZOJ 3822 Domination 期望dp

    Domination Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/showProblem ...

  7. iOS开发——UI篇OC篇&UIDynamic详解

    iOS开发拓展篇—UIDynamic(简单介绍) 一.简单介绍 1.什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟 ...

  8. iOS开发——数据持久化Swift篇&模型对象归档

    模型对象归档 import UIKit class ViewController: UIViewController { @IBOutlet weak var textField: UITextFie ...

  9. 十、Socket之UDP编程

    UDP基础知识 UDP(User Datagram Protocol,用户数据报协议)是一个简单的.面向数据报的无连接协议,提供了快速但不一定可靠的传输服务. UDP与TCP相比主要有以下区别. 1. ...

  10. com.velocity.servlet

    package com.velocity.servlet; import java.io.IOException; import java.util.ArrayList; import java.ut ...