CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行。它不使用浮动,flex容器的边缘也不会与其内容的边缘折叠。

基本概念

  • 采用Flex布局的元素,称为Flex容器(container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(item),简称"项目"。
  • 每个弹性框布局包含两个轴,弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(crossaxis)
  • 弹性容器的主轴起点(main start)/主轴终点(main end)侧轴起点(crossstart)/**侧轴终点(cross end)**描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中,由writing-mode 确立的方向(从左到右、从右到左,等等)。
  • 根据弹性容器的主轴与侧轴,弹性项目的宽和高中,对应主轴的称为主轴尺寸(main size),对应侧轴的称为侧轴尺寸(cross size)

下面是主轴为水平方向的弹性容器及其项目
这里写图片描述

容器属性

  • displayflex | inline-flex
    将元素定义为弹性容器,其子元素则成为弹性项目。

值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。

  • flex-directionrow | row-reverse | column | column-reverse
    该属性指定了内部元素是如何在 flex 容器中布局的,定义了主轴的方向(正方向或反方向)。

row和row-reverse表示主轴的方向为水平轴,其轴方向受容器文本方向影响。当direction属性为ltr时,row表示从左到右定向的水平轴,而 row-reverse 表示从右到左; 如果 direction 属性是 rtl,row表示从右到左定向的轴,而 row-reverse 表示从左到右。
column表示主轴方向为垂直轴

  • flex-wrapnowrap | wrap | wrap-reverse
    用于指定Flex子项是否换行

nowrap表示元素被放在一行,不换行,这可能导致溢出 flex 容器,为默认值。wrap表示换行。而wrap-reverse表示垂向上行排列的方向反转

  • flex-flow<'flex-direction'> || <'flex-wrap'>
    其是flex-direction 和 flex-wrap 的简写
element {
  flex-flow: column-reverse wrap;
}
  • justify-contentflex-start | flex-end | center |space-between | space-around
    用于指定主轴(水平方向)上Flex子项的对齐方式

flex-start表示与行的起始位置对齐;flex-end表示与行的结束位置对齐;center表示与行中间对齐;space-between表示两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于flex-start;space-around表示间距相等,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于center。

  • align-itemsstretch | flex-start | flex-end | center | baseline
    用于指定侧轴(垂直方向)上Flex子项的对齐方式

stretch表示弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度(默认值,当项目未设置高度或为auto时被拉伸);flex-start表示与侧轴开始位置对齐;flex-end表示与侧轴的结束位置对齐;center表示与侧轴中间对齐;baseline表示基线对齐,当行内轴与侧轴在同一线上,即所有Flex子项的基线在同一线上时,效果等同于flex-start

  • align-contentflex-start | flex-end | center | space-between | space-around | stretch
    该属性只作用于多行的情况下,用于多行的对齐方式

stretch表示拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行;flex-start表示各行与侧轴开始位置对齐,第一行紧靠侧轴开始边界,之后的每一行都紧靠前面一行;flex-end表示各行与侧轴的结束位置对齐,最后一行紧靠侧轴结束边界,之后的每一行都紧靠前面一行;center表示各行与侧轴中间对其;space-between表示两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数时,效果等同于flex-start;space-around表示各行之间间距相等,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数时,效果等同于center;

项目属性

  • order:数字
    该属性用来指定Flex子项的排列顺序,数值越小,越靠前,可以为负数,默认为0,数值相同时按照源码中的顺序排列
  • flex-grow:数字
    项目的拉伸因子,当有剩余空间时,项目会根据各自的拉伸因子进行拉伸。默认为0(不拉伸),负值无效。

例如,当项目拉伸因子都为1时,表示他们等分剩余空间,如果此时某一项的拉伸因子为2,那么它占据的剩余空间将比其他项多一倍

  • flex-shrink:数字
    项目的缩小比例,默认为1,负值无效。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

例如,如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

  • flex-basisauto |content | 宽度
    指定了 flex 元素在主轴方向上的初始大小,默认为auto。

content表示自动调整项目宽度;宽度表示设置宽度(可以使用px,百分比等);auto表示如果项目没有设置宽度,则使用content。

  • flexnone | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)
  • align-selfauto | flex-start | flex-end | center | baseline | stretch
    用来单独指定某Flex子项的对齐方式
    auto表示默认值,查找父元素的align-items值,如果没有父元素则取值为stretch;其他值同align-items属性

推荐资料:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

##示例##

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<style type="text/css">
			#container{
				background-color:gray;
				width:350px;
				height:450px;
				display:flex;
				flex-direction:row;
			}
			
			.item{
				background:yellow;
				width:100px;
				height:100px;
				border:3px solid red;
				text-align:center;
				line-height:100px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="item" id="item_1">1</div>
			<div class="item" id="item_2">2</div>
			<div class="item" id="item_3">3</div>
			<div class="item" id="item_4">4</div>
			<div class="item" id="item_5">5</div>
			<div class="item" id="item_6">6</div>
			<div class="item" id="item_7">7</div>
			<div class="item" id="item_8">8</div>
		</div>
	</body>
</html>

flex-direction:row
这里写图片描述
flex-direction:row-reverse
这里写图片描述
flex-direction:column
这里写图片描述
flex-wrap:wrap
这里写图片描述
flex-wrap:wrap-reverse
这里写图片描述
justify-content:flex-start
这里写图片描述
justify-content:flex-end
这里写图片描述
justify-content:center
这里写图片描述
justify-content:space-between
这里写图片描述
justify-content:space-around
这里写图片描述
align-items:stretch(项目未设置高度)
这里写图片描述
align-items:flex-start
这里写图片描述
align-items:flex-end
这里写图片描述
align-items:center
这里写图片描述
align-items:baseline(项目5的字体略大,基线位置被改变)
这里写图片描述
align-content:flex-start
这里写图片描述
align-content:flex-end
这里写图片描述
align-content:center
这里写图片描述
align-content:space-between
这里写图片描述
align-content:space-around
这里写图片描述
align-content:stretch(项目未设置高度)
这里写图片描述
order(改变第一行3个项目order)

#item_1{
	order:2;
}
#item_2{
	order:3;
}
#item_3{
	order:1;
}

这里写图片描述
flex-grow

#item_1{
	flex-grow:1;
}

这里写图片描述
flex-shrink

#item_2{
	flex-shrink:2;
}

这里写图片描述
flex-basis

#item_2{
	flex-basis:200px;
}

这里写图片描述
align-self

#item_2{
	align-self:flex-end;
}

这里写图片描述


如果觉得这篇文章帮助了您,请打赏一个小红包鼓励作者继续创作哦!!!

在这里插入图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐