开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第二十天,点击查看活动详情

深入解析CSS(第六天)

flex布局

flex布局应该是目前很多css开发者用的比较多的一种布局,保持同一行,居中,垂直居中,等高列等等都可以用到flex来实现,flex也称作为弹性盒子布局,跟浮动布局相比，Flexbox的可预测性更好，还能提供更精细的控制。

基本使用

当我们给元素添加display:flex时就会让该元素变成一个弹性容器,它的直接子元素变成弹性子元素,弹性子元素默认在同一行按照从左到右的顺序并排,弹性容器有一个很大特点就是能自动填满可用宽度,而且弹性子元素的高度会保持一致

一个弹性容器能控制内部元素的布局

子元素按照主轴线排列，主轴的方向为主起点（左）到主终点（右）。垂直于主轴的是副轴。方向从副起点（上）到副终点（下）。

实例

我们可以通过实例更加快速的了解到flex的强大之处,在很多网站中的导航栏,侧边栏等等都可以使用flex轻松实现

如果我们想实现掘金这样的导航栏就可以使用flex轻松实现

第一步

第一步我们先设置导航栏的高度,我们这里设置为60px,并将其设置成弹性容器

第二步

我们将导航栏的内容填写一下,将其设置为同一行

 <div class="header">
        <div>
            <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
                alt="稀土掘金" class="logo-img" data-v-250c3156="">
        </div>

        <div>首页</div>
        <div>沸点</div>
        <div>课程</div>
        <div>直播</div>
        <div>活动</div>
        <div>商城</div>
        <div>APP</div>
        <div>插件</div>
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19e7f58eecbd497c92397344e1d489a6~tplv-k3u1fbpfcp-zoom-1.image"
            style="max-width: 115px; vertical-align: middle" data-v-250c3156="">
        <div><input type="text" /></div>
        <div><button>创作者中心</button></div>
        <div><button>会员</button></div>
        <div>头像</div>
    </div>

第三步

接下来无疑就是修改样式,这里我们需要用align-items将其垂直居中,然后使用justify-content将其进行均分分布

这样是不是好看很多,但是我们可以发现她好像还是有点点差距

第四步

我们再分析分析一下原图,可以发现这个是二边分布,也就是这个导航栏其实是分为左右二部分,所以我们需要将左边的文字设置成一部分,右边的搜索或者其他设置成另一部分,并设置相对应的宽度,并用align-items将其垂直居中,然后使用justify-content将其进行均分分布

<div class="header">
        <div class="left">
            <div>
                <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
                    alt="稀土掘金" class="logo-img" data-v-250c3156="">
            </div>

            <div>首页</div>
            <div>沸点</div>
            <div>课程</div>
            <div>直播</div>
            <div>活动</div>
            <div>商城</div>
            <div>APP</div>
            <div>插件</div>
            <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19e7f58eecbd497c92397344e1d489a6~tplv-k3u1fbpfcp-zoom-1.image"
                style="max-width: 115px; vertical-align: middle" data-v-250c3156="">
        </div>
        <div class="right">
            <div><input type="text" /></div>
            <div><button>创作者中心</button></div>
            <div><button>会员</button></div>
            <div>头像</div>
        </div>

    </div>
    <style>
        .header {
            background-color: #ff9c6e;
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
        }

        .left {
            display: flex;
            width: 50%;
            align-items: center;
            justify-content: space-evenly;
        }

        .right {
            margin-left: 10%;
            display: flex;
            width: 40%;
            align-items: center;
            justify-content: space-around;
        }
    </style>