flex右对齐_Flex布局详解（一）

最新推荐文章于 2024-08-24 15:04:36 发布

weixin_39999222

最新推荐文章于 2024-08-24 15:04:36 发布

阅读量1.8k

点赞数 1

文章标签： flex右对齐

本文详细介绍了Flex布局的基本概念和容器属性，包括flex-direction、flex-wrap、justify-content、align-items和align-content，讨论了它们在主轴和交叉轴上的对齐方式，帮助理解Flex布局的灵活应用。

摘要由CSDN通过智能技术生成

Flex布局

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，行内元素也可以使用Flex布局。

/* 块级元素 */
display: flex;
display: -webkit-flex;/* 需要兼容火狐Safari */

/* 行内元素 */
display: inline-flex;

这里需要注意的是设为Flex布局以后，子元素的float、clear和vertical-align属性将失效

兼容性

到目前为止，在PC端其实很乐观了，基本上主流的浏览器都已经兼容了flex的使用，除了IE10以下的浏览器，IE11也有部分不兼容。

市面上浏览器的兼容情况

基本概念

flex布局元素称为Flex容器(flex container),简称容器。他的所有子元素自动称为容器成员,称为Flex项目(flex item),简称项目。

当使用 flex 布局时，首先想到的是两根轴线 —— 主轴和交叉轴。主轴由flex-direction定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。

水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。

这篇文章先介绍容器属性

容器属性

flex-direction  决定主轴的方向。即项目的排列方向

flex-wrap       项目在容器轴线排不下如何换行。

flex-flow       是前两个属性的缩写。

justify-content 项目在容器主轴上对齐方式。

align-items     项目在交叉轴上如何对齐。

align-content   多根轴线的对齐方式。

1、flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）

row(默认值)：主轴为水平方向，起点在左端。

row-reverse: 主轴水平方向，起始点在右端。 

column:      主轴为垂直方向，起点在上沿。 

column-reverse:主轴在垂直方向，起点在下沿

1）row 主轴为水平方向，起点在左端。

<style type="text/css">
	.box{
    
		width: 500px;
		border: 5px solid #00008B;
		display: flex;
		/* flex-direction: row; */  /*不写这个也是默认水平*/
	}
	.chl_box{
    
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		background: #00C2DE;
                margin-left: 5px;
	}
</style>
<body>
	<div class="box">
		<div class="chl_box">1</div>
		<div class="chl_box">2</div>
		<div class="chl_box">3</div>
		<div class="chl_box">4</div>
	</div>
</body>

2）row-reverse 主轴水平方向，起始点在右端。

<style type="text/css">
	.box{
    
		width: 500px;
		border: 5px solid #00008B;
		margin: 50px auto;
		display: flex;
		flex-direction: row-reverse;/* ******* */
	}
	.chl_box{
    
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		background: #00C2DE;
		margin-left: 5px;
	}
</style>
<body>
	<div class="box">
		<div class="chl_box">1</div>
		<div class="chl_box">2</div>
		<div class="chl_box">3</div>
		<div class="chl_box">4</div>
	</div>
</body>