前端面试 flex 布局（画骰子）题

阅读量：

常用语法回顾

flex-direction
决定主轴的延伸方向，可设置为水平或垂直方向
- justify-content
  控制主轴上元素的排列方式，包括起始对齐、末尾对齐、居中对齐、两端对齐等选项
- align-items
  用于设定元素在交叉轴上的对齐方式
- flex-wrap
  定义元素是否允许换行显示
- align-self
  单独设置某个子元素在交叉轴上的对齐方式

上述提到的核心属性需要熟练掌握，其余内容了解即可

画骰子

该题目是面试过程中经常用来检验flex布局掌握程度的一种典型题型
以下通过实例演示如何实现一个包含三个点的骰子效果

对父容器应用display:flex属性，并结合justify-content:space-between进行水平间距分配
针对第二个子元素，采用align-self:center实现垂直居中对齐
对于第三个子元素，使用align-self:flex-end实现右下角对齐

复制代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, in

全部评论 (0)

还没有任何评论哟~