开启flex属性布局display:flex

display: flex;

flex-direction 主轴排列

        flex-direction：
              row            主轴为水平方向，起点在左端
              row-reverse    主轴为水平方向，起点在右端
              column         主轴为垂直方向，起点在上面
              column-reverse 主轴为处置方向，起点在下沿

flex-direction:row 定义排列方向，从左到右

flex-direction:row-reverse 定义排列方向，从右到左

flex-direction:column 定义排列方向，从上到下

flex-direction:column-reverse 定义排列方向，从下到上

justify-content 子项对齐方式

justfy-content属性定义了项目在主轴的方向上的对齐方式
它可以取5个值，具体对齐方式与轴的方向有关：

   justify-content 定义了项目在主轴上的对齐
            flex-start       默认，左对齐或者上对齐
            flex-end         右对齐或者下对齐
            center           居中
            space-around     两端对齐，间距相等，贴边
            space-between    两端对齐，中间间隔相等，不贴边

flex-start 左侧起点

flex-end 右侧起点

center 效果图：居中
space-around 两侧不贴边，间距相等

space-between 两侧贴边，间距相等

align-item属性：设置元素在交叉轴上的对齐方式

它能取5个值。具体的对齐方式与交叉轴的方向有关
flex-start：交叉轴的起点对齐，垂直方向最上端。
flex-end： 交叉轴的终点对齐，垂直方向最下端。
center： 交叉轴的中点对齐，垂直方向中间。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-start

flex-end交叉轴底部

center居中

stretch:当高度没有设置，元素的高度会拉伸至容器高度一致

baseline：保证元素中文字正在同一条基准线

在设置属性值为baseline时，若字体大小不同

flex-wrap 元素是否换行

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap:
      值：nowrap        不换行，默认
          wrap          换行
          wrap-reverse  逆向换行

flex-wrap:nowrap 不换行

flex-wrap:wrap 换行

wrap-reverse：逆向换行

align-content 设置轴线的对齐方式

默认

** flex-start**

** flex-end**

center

stretch 拉伸
只有当子项盒子本身没有高度(交叉轴是纵向时)

space-between

space-around

flex-flow 元素比例增大

用于元素的放大比例，默认0，值越大占的空间比例越大
默认样式

给指定元素设置比例，值为数值

flex-shrink 用于缩放元素比例

默认为1，值越大元素越小；值为0是不缩放

order 用于设置flex容器内部的每个元素的排列顺序

默认0，1最大在第一位

flex-basic 用于设置元素固定或自动空间的占比

align-self 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

align-item是定义全部全部的子项，在父盒子身上设置；
而align-self是定义单独一个子项，是在子项身上设置；
两个属性的值基本作用相同，只是align-self是单独设置一个子元素
flex-start：在交叉轴上向起点位置(向上/向下)对齐
默认不再展示
flex-end：在交叉轴上向结束位置(向上/向下)对齐
给黄盒子设置flex-end属性值

** center：居中对齐**
给黄盒子设置center

stretch(默认)：置 当元素高度没有设置，则元素的高度会拉伸至容器高度的一半
给黄盒子设置stretch属性值

** baseline：保证元素中文字在同一基准线**

flex布局时，文字居中如何实现(高频率面试题)？

很简单，通过justify-content: center;搭配 align-items: center;

.box{
	width: 300upx;
	height: 300upx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: orange;
}

flex布局时，盒子如何居中(高频率面试题)

	.box{
        display: flex;
        background-color: darkgray;
        height: 400px;
        width: 400px;
        /* 核心代码，就两行 */
        justify-content: center;
        align-items: center;
}