1. Flex布局介绍

CSS的传统布局解决方案,基于盒状模型,依赖display属性、position属性、float属性,对于一些特殊的布局,例如垂直居中,往往要想很多hack的方法来解决。

2009年,W3C提出了一种新的方案--Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex布局的主要思想是为容器赋予控制容器内元素的高度、宽度以及如何分割容器空间的能力。

Flex是Flexible Box的缩写,表示“弹性布局”的意思,能够为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局,使用flex布局以后,子元素的floatclearvertical-align元素都将失效。

.box {
display: flex;
}

行内元素也可以使用Flex布局。

.box {
display: inline-flex;
}

Webkit内核的浏览器,必须加上-webkit前缀。

.box{
display: -webkit-flex; /* Safari */
display: flex;
}

2. 基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

下面对这几个概念作简要介绍:

  • 主轴 main-axis,flex容器的主轴是容器内项目 flex item的排列方向。主轴方向并不一定是水平的,这个由flex-direction属性决定。
  • main-start | main-end ,容器内项目的排列是从main-start到main-end。
  • main-size
  • 交叉轴 cross axis 与主轴垂直的交叉轴,它的方向由主轴的方向决定
  • cross-start | cross-end
  • cross-size

3. Flex容器的属性

Flex容器具有以下六个属性。

  • display 该属性决定flex布局的容器,display:flex;
  • flex-direction 该属性决定主轴的方向(即项目的排列方向)
  • flex-wrap 该属性决定flex元素的换行方式,默认情况下容器内项目总是倾向于排列在一行内
  • flex-flow 该属性是directionwrap的组合属性,默认值是row nowrap
  • justify-content 该属性定义容器中项目在主轴上的对齐方式
  • align-items
  • align-content

3.1 flex-direction

flex-direction属性决定主轴的方向(即容器元素的排列方向),有四个取值。

  • row(默认值),主轴为水平方向,起点在左端。
  • row-reverse,主轴为水平方向,起点在右端。
  • column,主轴为垂直方向,起点在上沿。
  • column-reverse,主轴为垂直方向,起点在下沿。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}

3.2 flex-wrap

熟悉wrap的同学应该知道,这个属性是决定如何处理一行显示不下的情况,有三个属性:

  • nowrap 不换行
  • wrap 换行,第一行在上,往下折行
  • wrap-reverse 换行,第一行在下,往上折行
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}

3.3 flex-flow

flex-flowflex-directionflex-wrap组合属性的简写,默认值为row nowrap

.box {
flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content

justify-content定义项目在主轴上的对齐方式,还能够帮助我们分配容器项目以外的剩余空间,即便是没有剩余空间。有以下属性:

  • flex-start(默认值): 主轴的起点对齐
  • flex-end: 主轴的终点对齐
  • center: 沿主轴居中对齐
  • space-between: 两端对齐,项目之间的间隔相等
  • space-around: 每个项目两侧的间隔相等,所以项目之间的间隔比左右两边的间隔大一倍
  • space-evenly: 每个项目的间隔以及两侧的间隔都相等
  • start: 容器内的项目堆在书写方向writing-mode的开始
  • end: 容器内的项目堆在书写方向writing-mode的结束
  • lfet: 容器内的项目堆在容器的左边
  • right: 容器内的项目堆在容器的右边
  • safe:
  • unsafe:

注意不同浏览器对这些属性的支持程度还不太一样,space-between从未在Edge浏览器上获得过支持,最安全的几个属性是flex-startflex-endcenter

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

3.5 align-items

align-items 该属性决定项目在交叉轴上如何对齐,有以下属性:

  • flex-start 交叉轴的起点对齐
  • flex-end 交叉轴的终点对齐
  • center 交叉轴的中间对齐
  • start 书写方向的起点对齐
  • end 书写方向的终点对齐
  • baseline 项目的第一行文字的基线对齐
  • stretch(默认值) 如果项目未设置高度或设为auto,项目将占满整个容器的高度,这样做两列布局再也不用发愁高度不一致了。

在flex布局中有主轴和侧轴的区分,和我们一般认为的横轴为主轴、纵轴为侧轴的固定认知不同,flex布局中主轴和侧轴会发生变化,这是由之前flex-direction属性决定的。当flex-direction:row的时候,主轴就是横轴,要调整元素在横轴的排列就需要使用justify-content属性。当flex-direction:column的时候,主轴就是纵轴,要调整元素在横轴的排列就需要使用align-items属性。

3.6 align-content

这个属性决定当容器在交叉轴方向还有剩余空间时,项目的排列方式。

这个属性在只有一行容器内项目时无效,在设置了nowrap时也无效。

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly
  • stretch
  • baseline

4. 项目的属性

项目包括6个属性

  • order 该属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。通过css就能控制DOM元素的顺序,简直太方便了。
  • flex-grow 该属性定义项目放大的比例,默认为0,也就是项目的大小不会发生缩放。
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order

order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。通过css就能控制DOM元素的顺序,简直太方便了。

.item {
order: <integer>;
}

4.2 flex-grow

flex-grow属性定义项目相对于其他项目进行扩展的量,默认为0。注意:如果项目不是flex item,则 flex-grow 属性不起作用。如果所有的项目都设置为1,则每个项目分到的空间都一样。如果有一个设置为2,则它分到的空间要比其他项目多一倍。负数无效。

.item {
flex-grow: <number>;

4.3 flex-shrink

flex-shrink 属性定义项目相对于其他项目缩小的比例。负数无效。

.item {
flex-shrink: <number>
}

4.4 flex-basis

flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item {
flex-basis: <length> | auto;
}

4.5 flex

flex属性是flex-grow,flex-shrink,flex-basis组合,默认值为0 1 auto后两个属性可选。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。属性支持的值包括:

  • auto
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

5. 浏览器支持

flexbox从出现到现在经历了多个版本,下图new的含义表示现在的语法display:flex;tweener表示2011年后出现的一个非官方的写法display:flexbox;old表示2009年出现后的旧语法display:box;

学好Flex布局并不容易的更多相关文章

  1. Flex 布局教程:语法篇

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

  2. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  3. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. 【转】Flex 布局语法教程

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

  9. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

随机推荐

  1. poj1050 To the Max(降维dp)

    To the Max Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 49351   Accepted: 26142 Desc ...

  2. 第1天|12天搞定Python网络爬虫,吃里爬外?

    人力资源部漂亮的小MM,跑来问我:老陈,数据分析和爬虫究竟是关系呀?说实在的,我真不想理她,因为我一直认为这个跟她的工作关系不大,可一想到她负责我负责部门的招聘工作,我只好勉为其难地跟她说:数据分析, ...

  3. ScheduledExecutor定时器

    为了弥补Timer 的上述缺陷,在Java 5的时候推出了基于线程池设计的 ScheduledExecutor.其设计思想是:每一个被调度的任务都会由线程池中一个线程去执行,因此任务是并发执行的,相互 ...

  4. vue 组件传值,(太久不用就会忘记,留在博客里,方便自己查看)

    一 :父组件 传值给 子组件 方法: props //父组件 <template lang="html"> <div> <h3>我是父亲< ...

  5. Java 中的 Lambda 表达式

    Lambda表达式 Lambda 表达式是 JDK1.8 的一个新特性,又称特殊的匿名内部类,可以取代大部分的匿名内部类,语法更简洁,可以写出更优雅的 Java 代码,可以极大地优化代码结构. Lam ...

  6. JavaScript动态显示时间

    <body> <div></div> <script> var div = document.querySelector('div'); retNowT ...

  7. 【转】Setting up SDL 2 on Visual Studio 2019 Community

    FROM: http://lazyfoo.net/tutorials/SDL/01_hello_SDL/windows/msvc2019/index.php Setting up SDL 2 on V ...

  8. lora传输模块的特点概述

    现今Lora已经是一种在物联网中广泛应用的技术,它是一种无线调制的方式,相对于传统的FSK调制技术来说,Lora在抑制同频干扰方面有非常大的优势,它解决了无法同时兼顾距离.抗扰和功耗不足的问题;另外l ...

  9. 模拟量采集模块433Mhz LoRa无线自组网络介绍

    模拟量采集模块433Mhz LoRa无线自组网络是LPWAN(低功耗广域网Low Power Wide Area Nerwork)通信技术中的一种,是美国Semtech公司采用和推广的一种基于扩频技术 ...

  10. JavaWeb中的关于html、jsp、servlet下的路径问题

    1 前言 本文将对近期项目练习中出现的关于文件路径的问题进行分析和总结,主要涉及html页面中的href及ajax指向路径.jsp页面中href指向路径及servlet转发或重定向路径等内容,本文的分 ...