学习优先级最高的布局方式——flex布局

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

前言

在实际项目开发过程中我只用这一种布局方式，但是好像没有啥解决不了的问题，如果有欢迎评论区讨论。

下面分享一道布局的机考题，比比谁的代码最简单，最语义化。题目如下

解题

以下代码是我个人常用的布局方式，并非标准答案也非唯一答案。只要是要求横着排列的我都会用上flex来解决。默认情况为纵向排列。

<style>
  .container {
    width: 100%;
    height:100px;
    border:solid 1px #e3e3e3;
    display:flex;
  }
  .icon{
      height:50px;
      width:50px;
      border:solid 1px #e3e3e3;
      margin:auto 12px;
  }
  .center{
      width:calc(100% - 118px);//118为icon+arrow占用的宽度
      border:solid 1px #e3e3e3;
  }
  .arrow{
      height:13px;
      width:20px;
      border:solid 1px #e3e3e3;
      margin:auto 12px;
  }
</style>

<div class="container">
  <div class="icon"></div>
  <div class="center"></div>
  <div class="arrow"></div>
</div>

总结

这道题出题者意图可能是想查考布局和垂直居中，但是用margin：auto就能解决了，justify-content: center; align-items: center都没用上。欢迎大家评论区讨论