flex知识回顾

先看几个小栗子：

1、在没有任何样式的情况下，常规布局下，有默认间距：

如果将 input 和 button 的父 div 设置 display: flex，则如下：

2、常规布局下，如果想让按钮局最右边，左边输入框自动填满剩余宽度，会有些麻烦：

flex 布局，只需父元素将按钮设置display: flex，input设置 flex: 1 即可：

3、常规布局：想做到图片和输入框无间距同高度，会有些麻烦：

flex 布局，只需父元素设置 display: flex 即可：

正文开始：

flex-direction：主轴方向

row：默认值，水平，起点左端

row-reverse：水平，起点右端

column：垂直，起点上端

column-reverse：垂直，起点下端

rtl：水平，起点右端，与row-reverse不同的是，rtl排序的容器里的内容也是从右到左的

flex-wrap：换行方式

nowrap：默认值，不自动换行

wrap：会自动换行

wrap-reverse：反着换行

justity-content：水平对齐方式

flex-start：默认值，居左

flex-end：居右

center：居中

space-between：两端对齐，元素之间间距相等

space-around：每个项目两侧之间的距离相等

align-items：垂直对齐方式

flex-start：从上到下

flex-end：从下到上

center：居中

baseline：对齐第一行文字

strech：默认，如果元素未设置高度，或者将高度设为auto，将会占满整个父元素

order：排序，默认为0

flex

flex 有3个参数，分别代表

• flex-grow：放大的比例，0为不放大，1为填充剩余空间，默认0；
• flex-shrink：缩小的比例，0为不缩小，1为等比例缩小，默认1；
• flex-basis：在分配空间前，元素优先占据的空间，可以像width那样设置一个宽度，占据一个固定空间，不在参与后续空间分配。

auto

自动分配空间，如下最右边的div块设置了：margin-left: auto

经典案例：

1、左边固定200px宽菜单，右边自适应内容的布局

// html
<div class="container">
    <div class="menu"></div>
    <div class="content"></div>
</div>

// css
.container{
    display: flex;
    height: 500px;
}
.menu{
    flex: 0 0 200px;
}
.content{
    flex: 1;
}

2、header栏展示一系列内容，“个人中心”显示在最右边，都需要垂直居中

header {
            background: rgb(230, 230, 230);
        }
        header ul {
            display: flex;
            margin: 0 auto;
        }
        header ul li {
            height: 60px;
            padding: 0 15px;
            display: flex;
            align-items: center;
        }
        header ul li:last-child {
            margin-left: auto;
        }

3、水平垂直居中

需要被垂直居中的元素设置：margin: auto即可，也可同时设置：justify-content: center; align-items: center;

---

一句话日记：又快12点了，一篇博客快一小时还没写完，什么时候才能真正提效