Flexbox——快速布局神器

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhang070514/article/details/83475440

一、Flex布局是什么?

Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
Flexbox通常能让我们更好的操作它的子元素布局:

  • 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行。
  • 可以快速让他们布局在一列。
  • 可以方便让他们对齐容器的左、右、中间等。
  • 无需修改结构就可以改变他们的显示顺序。
  • 如果元素容器设置百分比和视窗大小改变,不用担心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用Flex布局的元素,称为Flex容器,简称“容器”。它的所有子元素自动成为容器成员,称为Flex项目,简称“项目”。
在这里插入图片描述

三、容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 flex-direction属性

flex-direction属性决定主轴的方向

,box{
flex-direction:row | row-reverse | column | column-reverse;
}
在这里插入图片描述

上图是分别对flex-direction设置以上四个属性值得效果。

3.2 flex-wrap属性

.box{
flex-wrap:nowrap | wrap | wrap-reverse
}

三个值分别表示:
(1)nowrap(默认) :不换行
(2)wrap:换行,第一行在上方
(3)wrap-reverse:换行,第一行在下方

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.box{
flex-flow:< flex-direction >||< flex-wrap >
}

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box{
justify-content: flex-start | flex-end | center | space-between | space-around;
}

3.5 align-items属性

align-item属性定义项目在交叉轴上如何对齐。

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

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

四、项目的属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

item {
order:0;
}

4.2 flex-grow属性

flex-grow属性定义项目的放大比例,默认为0.

	  .outer{
			display: flex;
		}
		.outer div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-left: 20px;
		}
		.outer div:nth-child(1){
			flex-grow:1;
		}
		.outer div:nth-child(2){
			flex-grow:2;
		}
		.outer div:nth-child(3){
			flex-grow:3;
		}
		.outer div:nth-child(4){
			flex-grow:4;
		}

在这里插入图片描述
如上图所示,我们把四个div的flex-grow属性分别设为1,2,3,4,那么他们等于把整个宽度分为10份,分别占1/10、2/10、3/10、4/10。

4.3 flex-shrink属性

flex-shrink定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

	.outer{
			display: flex;
		}
		.outer div{
			width: 300px;
			height: 100px;
			background-color: red;
			margin-left: 20px;
		}
		.outer div:nth-child(1){
			flex-shrink:1;
		}
		.outer div:nth-child(2){
			flex-shrink:2;
		}
		.outer div:nth-child(3){
			flex-shrink:2;
		}
		.outer div:nth-child(4){
			flex-shrink:1;
		}

在这里插入图片描述
由上图可知,当空间不足时,flex-shrink属性值大的缩小。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

item {
	flex-basis:length | auto;
}

4.5 flex属性

flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。
该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)。

4.6 align-self属性

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

item {
	align-self:auto | flex-start | flex-end  |  center  | baseline  |  stretch;
}
展开阅读全文

没有更多推荐了,返回首页