css中flex布局简介

一、概述

1、什么是flex

        flex是弹性盒子布局，当页面在不同宽度的屏幕之间时，等比例排列。

        可以使盒子居中，等比例适配，不脱标。

        flex默认x轴为主轴，y轴为侧轴。

2、如何使用flex

       类名为box的父级，包含着三个子级。将以这个为例进行介绍。

 使用flex布局，要先在容器（父级）中写入定义flex布局

第一步，定义flex布局：display: flex;（父级一定要设置高）

第二步，定义后利用项目属性控制自己的布局

二、属性

1、容器（contain）属性

1、justify-content

主轴排列方式   写法：justify-content：属性值；

属性值有 space-between、space-around 、space-evenly、flex-start、flex-end

、center。

1、flex-start（默认）左对齐

 2、flex-end 右对齐

3、 space-evenly（等分间距）

4、space-around（两边间距是盒子间间距一）

 5、space-between（两边对齐）

 6、center（居中对齐）

 

2、align-items

侧轴排列  侧轴对齐方式 参考

1、flex-start（默认顶对齐）

 

2、flex-end（侧轴底对齐）

 3、center(居中)

 4、项目第一行文字基线对齐

 align-items:  baseline

5.align-items: stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

3、align-content

多轴对齐方式

与前justify-content类似

4、flex-wrap

轴线排不下，自动换行。

 

1、nowrap（默认不换行自动缩小）

 2、wrap（换行第一行在上方）

3 、wrap-reverse（第一行在下方）

 

6、flex-flow

 flex-direction 和 flex-wrap 的简写

2、项目属性

1、order

属性值从小到大排列 排列顺序

代码如下

 

    .box1 {
      order: 3;
      background: pink;
    }
 
    .box2 {
      order: 2;
      background: blue;
    }
 
    .box3 {
      background: purple;
    }

2、flex

子元素在父元素剩余宽度的等比例排列

1：1：1

1：2：3

3、 flex-grow

 flex-grow 项规定了在 flex 容器中分配剩余空间的相对比例。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍