前言

最近笔者在复习以前基础知识,发现很多细的知识点还是需要重新再总结一番。本文对flex布局进行图解说明,以后忘了的同学可以随时过来查看,欢迎转载,烦请注明出处。

主体

万丈高楼平地起,熟悉flex,先来了解下以下7种css属性

1.

display: flex;
/* 设置父级元素flex模式 */
flex-direction: column;
/* 设置子级元素排列方式,主轴是哪一根(横/竖) */
flex-wrap: wrap;
/* 决定子级元素一行排列不下时,是否换行 */
flex-flow: row nowrap;
/* flex-direction和flex-wrap的综合体 */
justify-content: center;
/* 项目在主轴上的对齐方式 */
align-items: center;
/* 项目在侧轴上的对齐方式 */
align-content: space-between;
/* 多行项目的对齐方式 */

下面我们就对每个属性进行详细的探讨:

  1. flex-direction: 绝对主轴的方向
  • row 默认水平方向,起点在左边
  • row-reverse 水平方向,起点在右边
  • column垂直方向,起点在上沿
  • column-reverse垂直方向,起点在下沿
display: flex;

flex-direction: row | row-reverse | column | column-reverse;

  1. flex-wrap 当项目在一条轴线上排不下时,是否换行
  • wrap换行
  • nowrap (默认)不换行
  • wrap-reverse 换行,第一行在最下面
display: flex;

flex-wrap: nowrap | wrap | wrap-reverse;

  1. flex-flow: flex-directionflex-wrap的集合,也就是说这个属性是后面两个属性的结合方式
  • row nowrap (默认)水平方向,起点在左端,不换行
display: flex;

flex-flow: <flex-direction> || <flex-wrap>;

详细可参考如上单个属性的解释

  1. justify-content 定义项目在主轴上的对齐方式
  • flex-start左边对齐
  • flex-end 右边对齐
  • center居中对齐
  • space-between 两端对齐,空格在中间
  • space-around空格环绕
display: flex;

justify-content: flex-start | flex-end | center | space-between | space-around;

这里对space-betweenspace-around做一个简单的区别说明:

  1. 相同点:子元素都会自动排好,彼此之间距离相等

  2. 不同点:space-between两端对齐,第一个子元素和最后一个子元素会贴着父级元素的边框。space-around 第一个子元素和最后一个子元素与边框也会有一定的距离。

  3. align-items项目在侧轴的对齐方式

  • flex-start 顶部对齐,即文字图片等顶部同一条线上
  • flex-end 底部对齐,即文字图片等底部在同一条线上
  • center中间对齐,即文字图片不管多高,都拿它们的中间放在同一条线上
  • stretch将文字图片充满整个容器的高度,强制统一
  • baseline将每项的第一行文字做统一在一条线上对齐
display: flex;

align-items: flex-start | flex-end | center | stretch | baseline;

  1. align-content定义多行项目的对齐方式。如果只有一行项目,该属性不起作用
  • flex-start这几行顶部对齐
  • flex-end这几行底部对齐
  • center这几行居中对齐
  • stretch这几行进行扩展或者缩放,从而填满容器高
  • space-between这几行中间使用空格进行填充(两端对齐)
  • space-around这几行用空格进行围绕(两边及中间)
display: flex;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

后缀

如果你觉得这个对你有帮助,欢迎转载,烦请注明出处。同时也欢迎大家在GitHub上和我一起进阶前端。

找到我:GitHub

找到我:知乎

图解CSS3-flex布局的更多相关文章

  1. CSS3 Flex布局(伸缩布局盒模型)学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  2. CSS3 Flex布局整理(三)-项目属性

    一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...

  3. CSS3 Flex布局整理(二)-容器属性

    一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...

  4. CSS3 Flex布局整理(一)

    一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...

  5. CSS3 Flex布局(项目)

    一.order属性 order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0. 二.flex-grow属性 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. ...

  6. CSS3 Flex布局(容器)

    一.flex-direction属性 row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-r ...

  7. css3 flex布局/grid布局

    1.CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程) 2.CSS Grid 布局完全指南(图解 Grid 详细教程)

  8. CSS3 Flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  9. css3 flex 布局

    今天做一个小实战,需要让一个登录框始终保持水平和垂直居中,第一个想到的就是通过定位(要想让一个div居中,采用定位可以解决,示例), 然后开始接触flex布局,学完感觉真的好用,现把知识点记录一下,以 ...

  10. css3 flex布局结合transform生成一个3D骰子

    预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局 首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...

随机推荐

  1. CSS定位使用方法

    .box0 { width: 200px; height: 200px; position: relative; background: #cfa } .box0-1,.box0-2 { width: ...

  2. 第三次 orm自动建表及遇到的问题

    Hibernate支持自动建表,在开发阶段很方便,可以保证hbm与数据库表结构的自动同步. 方法很简单,在hibernate.cfg.xml内加入 <property name="hi ...

  3. 【多线程】-ThreadPool线程池

    ThreadPool介绍: Thread类是一个静态类,所有不存在实例化构造函数操作,直接可以调用其内所存在的方法. 微软官网给出的解释: 提供一个线程池,该线程池可用于执行任务.发送工作项.处理异步 ...

  4. Struts标签库详解【3】

    struts2标签库详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@taglib prefix="s" uri= ...

  5. SSM-Spring-15:Spring中名称自动代理生成器BeanNameAutoProxyCreator

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 名称自动代理生成器:BeanNameAutoProxyCreator 为了更好的测试,我放了俩个接口,俩个实现 ...

  6. 优雅的玩PHP多进程

    proc_open (PHP 4 >= 4.3.0, PHP 5, PHP 7) proc_open — 执行一个命令,并且打开用来输入/输出的文件指针. 说明¶ resource proc_o ...

  7. maven入门 (二)_私服安装与上传下载

    本篇文章主要介绍maven的私服安装和 jar包的上传与下载.毕竟大家还是在公司需要上传jar包到自己公司私服的. 1.安装私服 下载链接: https://pan.baidu.com/s/17dbQ ...

  8. SQL Server 2008更改数据库保存路径

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=641 操作环境: WindowsXP 数据库: Microsoft SQL Server 2008 操作步骤: 选中 ...

  9. 基于E-R模型的关系型数据库设计方法

    摘要 在管理信息系统开发中,数据库设计的目标是建立DBMS能识别的关系数据模型.而关系数据模型建立的基础是首先建立E-R模型,通过E-R模型才能转换为关系数据模型.如何建立E-R模型以及如何将E-R模 ...

  10. OAuth 2 Developers Guide

    Introduction This is the user guide for the support for OAuth 2.0. For OAuth 1.0, everything is diff ...