前言：
Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 flex一维方向布局的方式。flex_box简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。
属性说明：
布局区别
float 浮动布局
position 脱离文档流
flexbox 一维布局方式 弹性布局
grid 二维布局方式 网格布局
因为grid有的属性跟flex很像 可先了解flexbox 弹性布局 再去了解 grid 网格布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex_box 布局</title>
<style type="text/css">
.title {
text-align: center;
}
.flex_box {
background-color: #f00;
height: 80px;
display: flex;
/**
* 开启flex布局
*/
flex-direction: column-reverse;
/*
* 主轴的方向
* row 行 左侧开始 （默认）
* row-reverse 行 左侧开始
* column 垂直方向
* column-reverse 垂直方向 起点是在下方
*/
flex-wrap: nowrap;
/**
* 超过是否换行
* wrap 换行
* nowrap 不换行 （默认）
* wrap-reverse 换行倒序 起点是在下方
*/
flex-flow: row wrap;
/**
* flex-direction flex-warp 简写 可覆盖
*/
justify-content: space-around;
/**
* 定义在主轴上的对齐方式
* flex-start 左对齐 (默认)
* flex-end 右对齐
* center 中对齐
* space-between 项目之间 两端对齐
* space-around 环绕元素之间的间隙相等
*/
align-items: center;
/**
* 项目在交叉轴上如何对齐
* flex-start
* flex-end
* center
* baseline 基线对齐
* stretch 未设置高度 或者auto 将撑满同期高度 (默认)
*/
align-content: center;
/**
* 如果超出了一行之后 多行在容器中的对齐方式
* flex-start
* flex-end
* center
* stretch
* space-between
* space-around
*/
}
.flex_box > div:nth-of-type(1) {
background-color: #f00;
/*内部元素属性*/
order: 1;
/* 定义每个项目序号 数值越小 越靠前 默认从0开始 */
}
.flex_box > div:nth-of-type(2) {
background-color: #0f0;
/*内部元素属性*/
order: 0;
flex-grow: 0;
/**
* 项目放大比例
* 0 有剩余也不放大
* 1 都有这个属性的话按倍数占比
*/
flex-shrink: 0;
/**
* 项目缩小比例
* 0 其他元素空间不足时该项目也不缩小
* 1 其他不足时该项目缩小 倍数
*/
flex-basis: auto;
/**
* 主轴分配多余空间之前 设置项目的固定空间
* px 占的空间
* auto 自动
*/
flex: 0 0 auto; /* 0 保持不放大也不缩小 */
/**
* flex-grow flex-shrink flex-basis 的缩写
*/
align-self: center;
/**
* 会继承父元素的align-items的属性 或者覆盖父元素的这个属性
* 属性也是跟父元素的align-items属性一致
*/
}
.flex_box > div:nth-of-type(3) {
order: 2;
background-color: #00f;
}
</style>
</head>
<body>
<div class="title">flex 布局</div>
<div class="flex_box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
标签： cssH5部分软件soft前端front