弹性盒模型

  1. 简称felxbox、全称是flexible box
  2. 出现的目的是让子元素能更好的布局和对齐
  3. felx布局是一维的布局，一次只能处理一个维度上的布局，也就是主轴

flex 传统布局缺陷、flexBox、 flex Container - 图1

二维的布局方式

CSS Grid layout 网格布局

设置flex

  1.     div {
  2.       display: flex;
  3.       display: -webkit-box;
  4.       display: -webkit-flex;
  5.       display: -ms-flexbox;
  6.     }

flex的元素构成

  1. flex 父级容器：flex container

  2. flex 子元素（项目）：flex item

    html代码

    ```html

    1
    2
    3
    <a name="WsM8y"></a> # 父容器上面的属性 <a name="R916X"></a> ## HTML代码html <!DOCTYPE html>
    1
    2
    3

    <a name="yzjEd"></a>
## 定义主轴的排列方向
`direction`方向，用来定义主轴的方向
<a name="UKj1d"></a>
### 默认方向从左到右
```css
      flex-direction: row;

    image.png

    逆向，主轴方向在右边，从右到左排列

          flex-direction: row-reverse;

    image.png

    主轴方向为竖直方向

          flex-direction: column;

    image.png

    垂直方向翻转

          flex-direction: column-reverse;

    image.png

    盒子超出后是否换行

    默认排成一排，不换行（默认）

          flex-wrap: nowrap;

    image.png

    换行

          flex-wrap: wrap;

    image.png

    颠倒折行

          flex-wrap: wrap-reverse;

    image.png

    主轴+折行简写

          flex-flow:row wrap;

    image.png

    主轴上的对齐方式

    默认值-沿着起点对齐

    justify-content: flex-start;

    沿着终点对齐

    justify-content: flex-end;

    image.png

    多个盒子居中对齐

          justify-content: center;

    image.png

    两端对齐

          justify-content: space-between;

    image.png

    盒子两侧的间距相等

    flex item 两侧距离间隔相等

          justify-content: space-around;

    image.png

    垂直对齐

    • 默认值-沿着交叉轴进行对齐

      沿着起点方向

          flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;

      image.png

      沿着终点方向

          flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-end;

      image.png

      交叉轴居中

          align-items: center;

      image.png

      沿着基准线对齐

      沿着文字的基准线对齐

          align-items: baseline;

      image.png

      占满高度

      在不给高度的情况下，会占满。

          align-items: stretch;

      image.png

      多轴对齐方式

      沿着交叉轴的起点对齐

          align-content: flex-start;
    justify-content: space-around;

      image.png

      沿着交叉轴的终点对齐

          align-content: flex-end;
    justify-content: space-around;

      image.png

      交叉轴两端对齐

          align-content:space-between;
    justify-content: space-around;

      image.png

      交叉轴中间对齐

          align-content:center;
    justify-content: space-around;

      image.png

      交叉轴间距相等

          align-content:space-around;
    justify-content: space-around;

      image.png

      等分交叉轴，顶端对齐

          flex-flow: row wrap;
    justify-content: flex-start;
    align-content:stretch;

      image.png

      移动端固定

      position: fixed;然后给定位置。 ```html <!DOCTYPE html>

      菜单栏

    ```