HTML关于弹性布局的介绍

目录

一、什么是弹性布局，它有什么作用

二、弹性布局语法和属性

1、语法

2、容器属性

三、示例

总结

---

一、什么是弹性布局，它有什么作用

传统布局基本依靠display float position来完成，有些特殊的布局写起来不太方便。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

 相较于浮动，弹性布局是属于文档流的，而浮动是属于脱离文档流的 。

二、弹性布局语法和属性

1、语法

主轴与交叉轴：学习flex布局需要明白”主轴“与”交叉轴“的概念，采用flex布局的元素，称为”容器“ （ flex container），它的所有子元素都是容器的”项目“（flex item），容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。

块级元素：：display: flex ———— 将容器盒模型作为块级弹性伸缩盒显示

行内元素：：display: inline-flex ———— 将容器盒模型作为内联级弹性伸缩盒显示

设置flex布局后，flex item的float、clear和vertical-align 属性都失效，并且flex布局默认为横向

2、容器属性

flex的排列属性：

lex-direction：column       设置从上往下排列

flex-direction：row          设置从左到右排列

flex-direction：row-reverse    设置从右到左排列

flex-direction：column            设置从上到下排列

flex-direction：column-reverse       设置从下到上排列

flex换行属性：

没有设置子级flex为1时：flex-wrap，没有设置高度时会均分父级。

flex-wrap：nowrap    默认值，都在一行或一列显示

flex-wrap：wrap    伸缩项目无法容纳时，自动换行

flex-wrap：wrap-reverse    伸缩项目无法容纳时，自动换行，方向和 wrap 相反

伸缩属性：

justify-content：flex-start    伸缩项目以起始点靠齐

justify-content：flex-end    伸缩项目以结束点靠齐

justify-content：center    伸缩项目以中心点靠齐

justify-content：space-between    伸缩项目平均分布

justify-content：space-around    伸缩项目平均分布，但两端保留一半的空间

三、示例

这里我们创建几个div标签：

	<div class="container s1">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</div>
	
	<div class="container s2" >
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</div>
	
	<div class="container s3" >
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</div>
	
	<div class="container s4">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</div>
	

然后在css文件中设置这些标签的样式：

.container{
    display: flex;
    margin: 30px;
    border: 2px solid orange;
    width: 400px;
}
.item{
    width: 50px;
    height: 50px;
    background-color: pink;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
    border: 2px solid black;
}
.s1{flex-direction: row;}
.s2{flex-direction: row-reverse;}
.s3{flex-direction: column;}
.s4{flex-direction: column-reverse;}

最后我们在html文件的head标签中引入这个css文件：

<link rel="stylesheet" href="../css/1.css">

 最后结果如图：

总结

弹性布局是一种灵活的盒模型布局方式，可以帮助我们更好的掌控页面的整体布局，但是弹性布局也不是处处都好，他也有他的缺点，我们应该仔细分析我们的需求，再决定采用什么方法实现，本文就到这里，希望可以对大家有所帮助。