Web开发之flex布局

Flex布局

flex 是 “Flexible Box” 的缩写,意为 弹性布局 ,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
采用Flex布局的元素,称为Flex容器(Flex container),简称”容器”。他的所有子元素自动成为容器成员,称为Flex项目(Flex item),简称”项目”。

当父元素设定为flex布局之后。子元素的float、clear和vertical-align属性将失效。

常见父项属性

  • flex-direction 设置主轴方向
  • justfy-content 设置主轴上的子元素排列方式
  • flex-wrap    设置子元素是否换行
  • align-content  设置侧轴上的子元素排列方式(多行)
  • align-items    设置侧轴上的子元素排列方式(单行)
  • flex-flow    复合属性,相当于同时设置了flex-direction和flex-wrap

常见子项属性

  • flex     flex属性定义子项分配剩余空间,用flex来表示占多少份数
  • align-self 控制子项自己在侧轴上的排列方式
  • order    通过数值大小定义项目的排列顺序

主轴和侧轴

在flex布局中,分为主轴和侧轴两个方向(相当于 x轴y轴)
flex-direction 属性决定主轴方向,即项目的排列方向

默认主轴方向为x轴方向,水平向右|默认侧轴方向为y轴方向,水平向下。

主轴和侧轴是可以变化的,当主轴x轴时,y轴即为侧轴


flex-direction的属性值

flex-direction 设置主轴方向,默认值为row,即默认主轴方向从左到右,侧轴方向从上到下。

属性值 说明
row(默认) 从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

flex-direction: row

1
2
3
4

flex-direction: row-reverse

1
2
3
4

flex-direction: column

1
2
3
4

flex-direction: column-reverse

1
2
3
4

justfy-content属性值

justfy-content 属性定义了项目在主轴上的对齐方式,使用前先确定主轴方向。

属性值 说明
flex-start(默认) 默认值从头开始(若主轴为x轴,则从左到右)
flex-end 从尾部开始排列
center 在主轴居中对齐
space-between 先两边贴边,在平分剩余空间
space-around 平分剩余空间

justify-content: flex-start

1
2
3
4

justify-content: flex-end

1
2
3
4

justify-content: center

1
2
3
4

justify-content: space-between

1
2
3
4

justify-content: space-around

1
2
3
4

flex-wrap属性值

默认情况下,项目都排在轴线上。flex-wrap 设置子元素是否换行,flex布局中默认是不换行的。

属性值 说明
nowrap(默认) 不换行
wrap 换行

flex-wrap: nowrap

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O

flex-wrap: wrap

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O

align-items属性值

align-items 设置侧轴上的子元素排列方式,在子项为单行的时候使用。

属性值 说明
flex-start(默认) 从上到下
flex-end 从下到上
center 垂直居中
stretch 拉伸

align-items: flex-start

1
2
3
4

align-items: flex-end

1
2
3
4

align-items: center

1
2
3
4

align-items: stretch

1
2
3
4

align-content属性值

align-content 设置子项在侧轴上的排列方式,并且只能用于子项出现换行的情况,在单行下没有效果。

属性值 说明
flex-start(默认) 从侧轴的头部开始排列
flex-end 从侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头,再平分剩余空间
stretch 设置子项元素高度平分父元素高度

align-self

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

order

通过数值大小定义项目的排列顺序,数值越小排列越靠前,默认值为0。

文章内容有误?立即反馈
2020 年 9 月 3 日巧用 LeanCloud 实现在线留言板功能
2020 年 8 月 27 日利用腾讯云 COS 存储 Hexo 静态文件
2020 年 3 月 9 日Hexo 网站部署到云服务器全流程