欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flex布局简介

程序员文章站 2024-03-20 14:55:04
...

**

Flex布局

**

一、什么是Flex布局?

	Flexible Box的缩写,意为“弹性布局”,它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。目前,它已经得到了所有
	浏览器的支持,这意味着,现在就能很安全地使用这项功能。

二、Flex概念

	想要使用Flex布局必须先给元素添加属性定义为弹性盒。采用了Flex布局的元素称为“容器”,它的所有子元素称为“项目”。
	各类型的元素都可以定义为Flex布局,如块级元素,
/*块级元素*/
div{
	display:flex;
}
展示效果如下,

Flex布局简介

行级元素也可以定义为Flex布局
div{
	display:inline-flex;
}
展示效果如下,

Flex布局简介

	当使用 flex 布局时,首先想到的是两根轴线 ——主轴和交叉轴。主轴由 flex-direction 定义,另一根轴垂直于它。我们使用
	flexbox的所有属性都跟这两根轴线有关。
	
	注:1.当元素设置为display:flex时,默认x轴为主轴,其子元素在主轴排列。
	   2.当元素设置为display:flex时,其子元素都能设置宽高。
	   3.当元素设置为display:flex时,其子元素的float和clear无效。
	   4.当元素设置为display:flex时,其子元素的vertical-align(元素垂直对齐方式)无效。

三、容器Flex属性

	1.flex-direction	
	2.flex-wrap
	3.flex-flow
	4.justify-content
	5.align-items
	6.align-content

3.1 flex-direction

	flex-direction	决定主轴的方向
div{
	flex-direction:row | row-reverse | column | column-reverse;
}

row:水平方向为主轴,起点在左侧
Flex布局简介
row-reverse:水平方向为主轴,起点在右侧
Flex布局简介
column:主轴为垂直方向,起点在顶部
Flex布局简介
column-reverse:主轴为垂直方向,起点在底部
Flex布局简介
3.2 flex-warp

	flex-warp	决定子元素是否换行
div{
	flex-warp:nowarp | warp | warp-reverse;
}

nowarp(默认值):不换行
Flex布局简介
warp:换行
Flex布局简介
warp-reverse:反向换行
Flex布局简介
3.3 justify-content

	jusify-content	子元素在主轴上的对齐方式
div{
	justify-content:flex-start | flex-end | center | space-around | space-between;
}

flex-start:子元素位于主轴起始位置
Flex布局简介
flex-end:子元素位于主轴终点位置
Flex布局简介
center:子元素主轴居中
Flex布局简介
space-around:子元素自动分配间距
Flex布局简介
space-between:子元素两端对齐,中间自动分配间距
Flex布局简介
3.4 align-items

	align-items	子元素在侧轴上的对齐方式
div{
	display:flex-start | flex-end | center | baseline | stretch;
}

flex-start:子元素位于侧轴起始位置
Flex布局简介
flex-end:子元素位置侧轴终点位置
Flex布局简介
center:子元素侧轴居中
Flex布局简介
baseline:子元素基线对齐
Flex布局简介
stretch:子元素默认位置对齐
Flex布局简介
3.5 align-content

	align-content	多行元素在侧轴上的对齐方式(多行元素才有效)
div{
	align-content:flex-start | flex-end | center | space-around | space-between | stretch;
}

flex-start:子元素位于侧轴起始位置
Flex布局简介
flex-end:子元素位于侧轴终点位置
Flex布局简介
center:子元素位于侧轴居中
Flex布局简介
space-around:子元素自动分配间距
Flex布局简介
space-between:子元素两段对齐,中间自动分配间距
Flex布局简介
stretch:子元素默认位置对齐
Flex布局简介
3.6 flex-flow

	flex-flow是flex-direction和flex-warp的缩写,默认值为row nowarp。
div{
	flex-flow:<flex-direction><flex-warp>;
}

四、项目Flex属性

4.1 align-self

	align-self	控制单个子元素在侧轴上的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性;若没有父元素,则等同于stretch
div{
	align-self:flex-start | flex-end | center | auto | stretch;
}

Flex布局简介
4.2 order属性

	order	定义项目的排列顺序,数值越小,排列越靠前,默认为0。
div2{
	order:4;
}

Flex布局简介
Flex布局简介
4.3 flex-grow

	flex-grow	定义项目的放大比例,默认为0
div{
	flex-grow:1;
}

Flex布局简介
Flex布局简介
4.4 flex-shrink

	flex-shrink	定义项目的缩小比例,默认为1
div{
	flex-shrink:0;
}

Flex布局简介
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。

4.5 flex-basis

	flex-basis	定义分配多于空间之前,项目占据的主轴空间,默认值为auto
div{
	flex:<length> | auto;
}

4.6 flex

	flex	是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto
div{
	flex:none|<flex-grow> | <flex-shrink> | <flex-basis>;
}
相关标签: 学习小结