面试官让我用Flex写色子布局，我直接写了六种

复习一下Flex布局属性

在实现色子布局之前，我们先来复习一下这几个Flex布局的属性：

10年积累的成都网站制作、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站设计后付款的网站建设流程，更有牧野免费网站建设让你可以放心的选择与我们合作。

justify-content：用于调整元素在主轴的对其方式；

align-items：用于调整元素在侧轴的对其方式；

align-self：设置元素自身在侧轴的对齐方式；

flex-direction：定义主轴是水平还是垂直或者正反方向。

多说无益，我们直接来写代码

实现一点布局

实现一点布局就非常简单了，可以说就是一个水平垂直居中 ，用flex布局实现相当的容易，实现代码如下：

html

  

    

  


复制代码

css

复制代码

这里只贴出核心代码，剩余代码就是一些样式样的调整。

实现效果如下：

这里我们用到了justify-content和align-items，就轻松的实现了色子的一点布局。

实现二点布局

现在我们实现色子的二点布局，实现代码如下：

html

  

    

    

  


复制代码

css

复制代码

这仅仅是实现的一种方案，还有别的写法。

实现三点布局

三点布局与二点布局类似，只需要再添加一行即可，实现代码如下：

html

  

    

    

    

  


复制代码

css

复制代码

运行效果如下：

实现四点布局

四点布局可以说是二点布局的变种，实现代码如下：

html

  

    

      

      

    

    

      

      

    

  


复制代码

css

.warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.column {
  display: flex;
  justify-content: space-between;
}
复制代码

运行效果如下：

实现五点布局

实现五点布局可以在四点布局的基础上增加一行，示例代码如下：

html

  

    

      

      

    

    

      

    

    

      

      

    

  


复制代码

css

.warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.column {
  display: flex;
  justify-content: space-between;
}
.column:nth-child(2) {
  justify-content: center;
}
复制代码

运行效果如下：

实现六点布局

实现六点布局可以在四点布局的基础上增加一行，示例代码如下：

html

  

    

      

      

    

    

      

      

    

    

      

      

    

  


复制代码

css

.warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.column {
  display: flex;
  justify-content: space-around;
}
复制代码

运行效果如下：

分享名称：面试官让我用Flex写色子布局，我直接写了六种
本文URL：http://www.shufengxianlan.com/qtweb/news25/288925.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联