CSS3:Flex布局

选中文字可对指定文章内容进行评论啦,绿色背景文字可以点击查看评论额。

Flex是一种弹性布局,要分为两部分理解Flex:

  • 作用于容器(flex-container)的属性
  • 作用于容器里项目(flex-item)的属性

Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。

  • 主轴(main axis): Flex方向设定为水平方向,主轴为水平方向,Flex设定为垂直分布,主轴为垂直方向。
  • 交叉轴(cross axis): 与主轴垂直交叉的轴。
  • 主尺寸(main size):主轴方向的尺寸。
  • 交叉尺寸(cross size):交叉轴方向的尺寸。

Flex容器属性

display

应用Flex布局,首先需要确定容器,对容器设定display为flex。

.container {
  display: flex; /* 或者 inline-flex */
}

Flex布局方向:flex-direction


容器首先要设定容器内项目的分布方向。

flex-direction用来设定容器内项目的分布方向。

语法

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row:水平向右,默认值
  • row-reverse:水平向左
  • column:垂直向下
  • column-reverse:垂直向上

换行:flex-wrap

默认情况下,Flex布局的容器内项目都放置在一行(row/row-reverse表示横行,colum/column-reverse表示纵行)内。对于很多项目的情况,所有的项目放在一行内会显得很拥挤。属性flex-wrap可以让我们设定在一个方向上的项目是否允许换行。

语法

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap:不允许换行,默认值
  • wrap:允许换行,按顶部到底部的方向换行
  • wrap-reverse:允许换行,按底部到顶部的方向换行

主轴上对齐:justify-content

justify-content属性定义了项目在容器主轴上的对齐方式。它有六个值表示不同的对齐方式:

语法

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  • flex-start:起始端对齐。不同的flex-direction,起始端不同。
  • flex-end:末端对齐。不同的flex-direction,末端不同。
  • center:居中对齐。
  • space-between: 两端对齐。
  • space-around:项目的两端空白空间相等对齐,项目之间的空间为两个空白空间。
  • space-evenly:项目等间距对齐,包括主轴方向上的两端间距。

行内交叉轴对齐:align-items

align-items定义在一行内(row/row-reverse表示横行,colum/column-reverse表示纵行)项目的对齐方式,有点类似于文本的行内对齐。

语法:

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start:行内交叉轴的起始端对齐
  • flex-end:行内交叉轴的末端对齐
  • center:行内居中对齐
  • baseline:基线对齐
  • stretch:行内两端延伸对齐

多行交叉轴对齐:align-content

align-content定义了多行整体在交叉轴的对齐方式,这是有区别align-items定义的行内对齐方式。

语法:

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start:交叉轴方向上起始端对齐
  • flex-end:交叉轴方向上末端对齐
  • center:交叉轴方向上居中对齐
  • stretch:交叉轴方向上两端延伸对齐
  • space-between:交叉轴方向上两端对齐。
  • space-around:交叉轴方向上,项目两端空白空间相等,项目间空间为两个空白空间。

Flex项目属性

项目顺序:order

项目默认按代码的顺序排列。使用order属性则可以使用改变项目的排列顺序。

.item {
  order: <integer>; /* default is 0 */
}

默认值为0,order值大往后排列。

项目扩大空间占比:flex-grow

flex-grow定义了项目在容器剩余空间的扩大比例。

  • 默认值为0,表示项目按指定的尺寸排列,不扩大。
  • 都为1,表示所有项目均分剩余空间。
  • 一个项目为2,其他项目为1,表示此项目占的空间是其他项目的两倍。

语法:

.item {
  flex-grow: <number>; /* default 0 */
}

项目收缩:flex-shrink

多个项目时,如果空间不够,那么项目需要收缩。flex-grow默认值为1。

项目的flex-shrink的值为0,其他项目值为1时,当容器的空间不足,那么其他项目按等比例收缩,flex-shrink为0的项目不收缩。

语法:

.item {
  flex-shrink: <number>; /* default 1 */
}

项目在分配剩余空间前的尺寸:flex-basis

flex-basic定义了项目在分配剩余空间前的尺寸。

语法:

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

flex-basis的值可以是百分比或空间尺寸。

flex-basis值为0,项目不参与额外空间的分配
flex-basis值为auto,项目根据flex-group的设置分配额外的空间

项目组合属性:flex

flex为flex-group,flex-shrink和flex-basis属性的组合。推荐使用此属性代替其他属性。

语法:

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

行内交叉轴对齐:align-self

align-items定义了行内所有的项目在交叉轴上的对齐方式,align-self则定义单个项目在交叉轴的对齐。

语法:

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

参考:A Complete Guide to Flexbox

版权声明:著作权归作者所有。

相关推荐

[译]iOS11安全区布局指南(Safe Area Layout Guide)

Apple在iOS7为UIViewController新增了topLayoutGuide和bottomLayoutGuide属性。它们可以让你创建约束以避免内容被UIKit的横条,如状态、导航或标签栏覆盖。在iOS 11这些布局指南被废弃,并被单一的安全区布局指南代替。顶部和底部布局指南——概述这是使用顶部和底部布局指南在导航控制器和标签栏插入视图控制器的示例:绿色的内容视图相对底部锚点

Angular CLI:集成Angular Flex Layout

Angular CLI创建项目ng new myproject 安装Angular Flex Layoutnpm install @angular/flex-layout --save 导入Angular Flex Layout NgModule模块src/app/app.module.t

解决IE11 Flex布局文本不换行的问题

在页面上使用了flex来布局,代码如下:CSS:.container{     display: flex;     flex-direction: column;     border: 1px solid red;     align-items: center;   }   .item {     border: 

Python定义全局变量

Python使用global指令来声明一个全局变量。示例globvar = 0 def set_globvar_to_one():     global globvar    # 在使用全局变量前,必须先声明为global    &nbs

CSS3使用transition属性实现过渡效果

属性详解transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现。它是一个合并属性,是由以下四个属性组合而成:transition-property:设置应用过渡的CSS属性,如background。transition-duration:设置过渡效果花费的时间。默认是 0。transition-timing-function:设置过渡效果的时间曲线。默认是

用来显示页面布局,margin,padding的CSS hack

在做前端开发过程中,有时要查看整体页面的布局,padding,margin。设置是在不同浏览器的实现情况。以下Javascript脚本可以添加到浏览器的书签中,用来打开显示页面的布局,margin以及padding。CSS hack脚本javascript: (function() { var elements = document.body.getElementsByTagName('*');

CSS三栏布局——浮动

不使用定位,只使用浮动实现左右固定,中间宽度自适应布局实现关键:自适应部分一定要放在第一个位置,使用浮动,且宽度设置为100%,如果不设置为100%,浮动元素内容不够撑开整个宽度。左右固定部位,使用margin-left :负数,使其左右靠齐。中间自适应部分嵌套一个div,设置margin-left 和 margin-right 使其空出左右固定的宽度。代码如下:<!DOCTYPE HTML

CSS三栏布局——定位

这里首先让中间栏绝对定位,两边栏相对定位;这里需要注意的是,如果中间使用绝对定位,不设置宽度的话将会撑不开容器;因此,中间使用了相对定位后,同时设置margin-left和margin-right给左右两栏一定空间,然后左右两栏不管是相对定位还是绝对定位都可以,这里我们使用绝对定位:<!DOCTYPE HTML> <html lang="en-US"> <head&g