flex知识回顾

最新推荐文章于 2025-02-10 16:05:48 发布

原创最新推荐文章于 2025-02-10 16:05:48 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #css3

本文通过实例对比了常规布局与Flex布局的区别，详细介绍了Flex布局的关键属性，如flex-direction、flex-wrap、justify-content等，并提供了实际应用场景示例。

先看几个小栗子：

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;
        }