一生之敌布局之flex（一）这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情前言前端知识中最

这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

前言

前端知识中最令人头大的两个问题自适应和 页面布局，页面布局传统手法就是float clean 等等复杂而且不好控制，但是兼容性来说还是很厉害的适应大多数浏览器。今天我们就来看看弹性布局也叫伸缩布局也叫弹性盒布局等叫法。

什么是flex

flex 是 flexible Box 的缩写,意为 “弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。采用flex 布局的元素,称为flex 容器(flex container),它的所有子元素自动成为容器成员,称为flex 项目(flex item)。 flex就是通过给父盒子添加flex属性,来控制子盒子的位置和排列等。 Flex布局原理就是：给父盒子添加flex属性，来控制子盒子的位置排列方式从而实现flex布局，当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex常用属性

flex 布局是由主轴和侧轴之分默认为主轴（x轴）当然这个主轴是可以设置的也是相对的 Flex布局中默认的主轴是row，x轴如果想改变主轴方向可通过设置flex-direction来改变

flex-direction:column;将主轴改为y轴，纵轴
flex-direction:row;将主轴改为x轴，横轴（默认）
flex-direction:row-reverse;主轴为x轴，并且翻转
flex-direction:column-reverse;主轴为y轴，并且翻转

下面我们先来使用下弹性布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
	div{
		display: flex; //给父元素设置弹性布局 注意这里默认会加 flex-direction:row; 当然还有其他属性下面我们再说
		width: 800px;
		height: 400px;
		border: solid 1px red;
		
	}
	div span{
			background-color: red;
			width: 100px;
			height: 100px;
			margin-right: 10px;
		}
</style>
</head>
<body>
<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	</div>
</body>
</html>

效果展示

将主轴改为y轴

flex-direction:column;

怎么使用呢，直接给父元素加 flex-direction:column（可以理解为列）; 因为他又默认的row（可以理解为行）设置这个属性值为 column就可以以Y轴为主轴

div{
		display: flex;
		flex-direction:column;
		width: 800px;
		height: 400px;
		border: solid 1px red;
	}

当然还有翻转以row 为主轴进行翻转

flex-direction:row-reverse;注意子元素也进行翻转。

div{
   	display: flex;
   	flex-direction:row-reverse;//翻转
   	width: 800px;
   	height: 400px;
   	border: solid 1px red;
   }

可以看到不仅仅是从右边开始排列而且子元素又 1 2 3 也反转为3 2 1

翻转以clumn为主轴进行翻转

flex-direction:column-reverse;

div{
		display: flex;
		flex-direction:column-reverse;
		width: 800px;
		height: 400px;
		border: solid 1px red;
	}

一生之敌布局之flex（一）

前言