flex布局

flex布局

• • 什么是flex?
  • 容器的属性：
  • • 项目的属性：
    • flex布局水平垂直居中对齐

什么是flex?

1. flex容器: 使用flex的元素就叫做容器,容器默认存在两条轴线. 主轴线和垂直的交叉轴线. 项目是沿着主轴线开始->结束方向排列的.
2. 项目(flex item): 容器内部的直属第一层元素就叫做项目。

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

容器的属性：

1、flex-direction：设置容器主轴线的方向;
2、flex-wrap：设置是否换行，每换一行意味着会多一条主轴线;
3、justify-content：设置主轴方向上的项目的对齐方式;
4、align-items：设置交叉轴方向上项目的对齐方式;
5、align-content：多轴线对齐方式;
6、flex-flow: flex-direction 和 flex-wrap 的简写

1. flex-direction
   用来设置容器的主轴方向和主轴线的起点,有如下4个属性:

display: flex;
flex-direction: row; /* (默认值) 主轴为水平方向, 起点在左侧 */
flex-direction: row-reverse;  /* 主轴为水平方向, 起点在右侧 */
flex-direction: column;  /* 主轴为垂直方向 起点在顶端 */
flex-direction: column-reverse;  /* 主轴为垂直方向 起点在底部 */

2. flex-wrap
   轴线上排满了是否换行,

flex-wrap: nowrap; /* (默认值) 不换行  */
flex-wrap: wrap; /* 换行 */
flex-wrap: wrap-reverse;  /* 换行  第一行从交叉轴末端开始排列 */

3. flex-flow 是flex-direction 和 flex-wrap 的合写
   默认值 flex-flow:row nowrap。
4. justify-content
   用来设置项目在主轴发方向上的排列方式:

/* (默认值) 主轴线起点对齐 */
justify-content: flex-start;
/* 主轴线终点对齐 */
justify-content: flex-end;
/* 主轴线中心对齐 */
justify-content: center;
/* 主轴线两端对齐 项目间距相等 */
justify-content: space-between;
/* 项目两侧间距相等 所有项目间距是两侧间距的2倍 */
justify-content: space-around;
/* 项目间距相等 与两侧间距也相等 */
justify-content: space-evenly;

5. align-items
   用来设置项目在交叉轴上的排列对齐方式。

/* 交叉轴的起点对齐 */
	align-items: flex-start;
	/* 交叉轴的终点对齐 */
	align-items: flex-end;
	/* 交叉轴居中对齐 */
	align-items: center;
	/* 项目的第一行文字的基线对齐 */
	align-items: baseline;
	/* 如果项目未设置高度或设置为auto,将占满整个容器的高度 */
	align-items: stretch;

6. flex-flow

flex-flow: row wrap;（水平排列，多行显示）

项目的属性：

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

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. align-self
6. flex

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

flex-grow属性
flex-grow 属性定义项目的放大比例, 默认为0, 即存在剩余空间也不放大.

flex-shrink
flex-shrink 属性收缩项目比例

flex-basis
flex-basis 在分配多余空间之前, 项目占据的主轴空间.

flex属性
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写, 默认值为 0 1 auto. 后两个属性可选.

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

flex布局水平垂直居中对齐

//  html代码如下:
<div class="outer">
   <div class="inner">测试flex布局水平垂直居中对齐</div>
</div>

// css代码如下:
.outer {
	width: 200px;
	height: 200px;
	background-color: pink;
	position:relative;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
.inner {
	width: 100px;
	height: 100px;
	background-color: #abcdef;
}

**个人学习, 如有错误之处, 还请指出。

标签：flex,轴线,align,布局,content,对齐,属性
来源： https://blog.csdn.net/motor_tang/article/details/102562798