HTML弹性布局基础讲解（一）

一，弹性布局

弹性布局，又称“Flex布局”，是W3C在2009年提出的方案。
主要解决某个元素中内部子元素的布局方式，为布局提供的非常大的灵活性和操控性。

任何一个容器都可以指定为flex布局，包括行内布局。如果是webkit内核，必须加-webkit- 前缀

二，基础概念

容器：需要添加弹性布局的父元素；
当一个元素设置了display:flex
这个元素内部的子元素就按照弹性布局方式排列
这个元素叫做容器
注：设置了display：flex的元素本身不是弹性布局，它的子元素是弹性布局
项目：弹性布局容器中的每一个子元素，称为项目；
当一个元素设置了display:flex
这个元素内部的子元素就按照弹性布局方式排列
这些子元素，叫做弹性项目

 案例：（运行时记得删除汉字注释）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}#fu{width: 800px;   注：这个div块只设置了宽度border: 1px solid red;   display: flex;   注；只能写在父元素justify-content: space-between;   注：定义项目在主轴上的对齐方式--两端对齐}#z1{width: 200px;height: 200px;background-color: #DCDCDC;}#z2{width: 200px;height: 200px;background-color: #0062A9;}#z3{width: 200px;height: 200px;background-color: pink;}</style></head><body><div id="fu">   父元素<div id="z1"></div>  子元素<div id="z2"></div> 子元素<div id="z3"></div> 子元素</div></body>
</html>

效果：

三，语法

display:
flex 经常用于让块级元素变为弹性容器
inline-flex; 经常用于让行内元素变为弹性容器

 display: flex;

特点：
1.当元素变为弹性容器之后，这个元素的text-align失效，内部项目不会执行水平对齐
2.弹性项目，可以设置宽高
3.项目的浮动，clear：both都失效
总结：之前所有学习过的对齐方式，对于弹性项目都失效
弹性项目的对齐，取决于主轴、交叉轴

四，弹性布局基本方向（主轴和交叉轴）

主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；
控制项目们的排列方向的一根轴
主轴的方向，
被称为主轴的起点和终点
交叉轴：与主轴垂直的另一方向，称为交叉轴。
永远与主轴垂直相交的一根轴
图解（红色箭头为主轴，蓝色箭头为交叉轴）

1.主轴方向（4根主轴）
flex-direction:
row; 默认值，主轴为x轴，主轴起点在左侧
row-reverse 主轴为x，主轴起点在右侧
column 主轴为y轴，主轴起点在顶部
column-reverse 主轴为y轴，主轴起点在底部

flex-direction: row;

 案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}#fu{width: 800px;border: 1px solid red;display: flex;flex-direction: row-reverse;  主轴为x，主轴起点在右侧}#z1{width: 200px;height: 200px;background-color: #DCDCDC;}#z2{width: 200px;height: 200px;background-color: #0062A9;}#z3{width: 200px;height: 200px;background-color: pink;}</style></head><body><div id="fu"><div id="z1"></div><div id="z2"></div><div id="z3"></div></div></body>
</html>

交叉轴：
图片来源网络侵权必删（非盈利）

交叉轴上对齐方式（和主轴用法类似）
align-items：
flex-start 默认值。在交叉轴起点对齐
center 交叉轴中间对齐
flex-end 交叉轴终点对齐
baseline 每个项目中的文本，基线要对齐
stretch 项目在交叉轴方向上没有定义尺寸，项目将充满交叉轴