阅读 122

flex布局教程

flex 基本概念

flex布局是W3C在2009年提出了一种弹性的自适应布局方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。

flex布局
基本概念
flex的核心概念是容器。其中容器包裹在外层的是父容器,内层的是子容器。容器默认存在两根轴:水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置与边框的交叉点是main start,结束位置是main end;交叉轴的开始位置是cross start,结束位置是cross end。子容器默认沿主轴排列。每个字容器占据的主轴空间是main size,占据的交叉轴空间是cross size。 使用flex实现水平垂直居中。

.container {
	display: flex;
	justify-content: center;
	items-align: center;
}
复制代码

父容器属性

display: flex|inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
复制代码
display

设置容器为flex布局模式,其中flex为块级布局,inline-flex为行内布局。

.container {
	display: flex;
}
复制代码
flex-direction

flex-direction属性决定了主轴的方向。默认方向是row即是left to right

.container {
	flex-direction: row | row-reverse | column | column-reverse;
}
复制代码

主轴方向

flex-wrap

flex-wrap属性决定了当子元素沿轴线排列不下是否换行排列。

.container {
	flex-wrap: nowrap | wrap | wrap-reverse;
}
复制代码
  • nowrap:不含行沿轴线排列。
  • wrap:从上到下换行排列。
  • wrap-reverse:从下到上换行排列。
flex-flow

flex-flow是属性flex-directionflex-wrap的简写形式。

.container {
	flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
}
复制代码
justify-content

justify-content属性决定了子元素沿主轴的对其方式。

.container {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}
复制代码
  • flex-start(默认值):沿main start开始方向左对齐。
  • flex-end:沿main end开始方向右对齐。
  • center:沿main axis中间居中。
  • space-between:沿main axis两端对其,项目之间的间隔都相等。
  • space-around:沿main axis均匀分布,每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍。
align-items

align-items属性决定了子元素沿交叉轴的对其方式。

.container {
	align-items: flex-start | flex-end | center | baseline | stretch;
}
复制代码
  • flex-start:cros start对齐。
  • flex-end:cros end对齐。
  • center:cros axis中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content

align-content属性决定了多根轴线的对齐方式。

.container {
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
复制代码
  • flex-start:与cros axis的起点对齐。
  • flex-end:与cros axis的终点对齐。
  • center:与cros axis的中点对齐。
  • space-between:与cros axis两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

子容器属性

order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | auto;
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
align-self: auto | flex-start | flex-end | center | baseline | stretch;
复制代码
order

order是属性决定了子元素的排列顺序,数字越小的在前。

.item {
	order: <integer>;
}
复制代码
flex-grow

flex-grow是属性决定当有空余空间时子元素的放大比例。

.item {
	flex-grow: <number>;
}
复制代码
flex-shrink

flex-shrink是属性决定当空间不足时子元素的缩小比例。

.item {
	flex-shrink: <number>;
}
复制代码
flex-basis

flex-basis是属性决定计算剩余空间之前子元素默认的大小。

.item {
	flex-basis: <length> | auto;
}
复制代码
flex

flex-flow是属性flex-growflex-shrinkflex-basis的简写形式。

.item {
	flex-flow: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
复制代码
  • none:0 0 auto
  • initial:0 1 auto
  • auto:1 1 auto
flex-self

flex-self属性决定了单个子元素与其他子元素的对齐方式。

.item {
	flex-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码
关注下面的标签,发现更多相似文章
评论