Flex网页布局2CSS弹性框书写教程
时间：2023-04-05 17:03:31
HTML5
上一篇：Flex布局书写教程-介绍了Flex布局的语法，今天介绍常见布局的Flex书写。你会看到，无论是什么布局，Flex往往几行命令就可以搞定。我只列出代码，详细的语法解释请参考《Flex布局教程：语法篇》。我的主要参考资料是LandonSchropp的文章和SolvedbyFlexbox。1.骰子的布局骰子的一侧最多可以放置9个点。下面我们就来看看Flex是如何实现1点到9点的布局的。可以去codepen看demo。除非另有说明，本节的HTML模板如下。
在上面的代码中，div元素（代表骰子的一个面）是一个弹性容器，而span元素（代表一个点）是一个弹性项目。如果有多个item，则添加多个span元素，依此类推。1.1单项首先，左上角只有一个点。Flex布局默认第一行左对齐，一行代码就够了。.box{display:flex;}设置item的对齐方式，实现居中对齐和右对齐。.box{显示：flex;证明内容：居中；}.box{显示：flex；justify-content:flex-end;}设置横轴的对齐方式，垂直移动主轴。.box{显示：flex;对齐项目：中心；}.box{显示：flex；证明内容：居中；对齐项目：中心；}.box{显示：flex；证明内容：居中；align-items:flex-end;}.box{display:flex;证明内容：flex-end；align-items:flex-end;}1.2双项目.box{display:flex;证明内容：空格；}.box{显示：flex；弹性方向：列；证明内容：空格；}.box{显示：flex；弹性方向：列；证明内容：空格之间；对齐项目：中心；}.box{显示：flex；弹性方向：列；证明内容：空格之间；align-items:flex-end;}.box{display:flex;}.item:nth-child(2){align-self:center;}.box{display:flex;justify-content:space-between;}.item:nth-child(2){align-self:flex-end;}1.3三项目.box{display:flex;}.item:nth-child(2){align-self:center;}.item:nth-child(3){align-self:flex-end;}1.4四项目.box{display:flex;弹性包装：包装；证明内容t：柔性端；align-content:space-between;}HTML代码如下：
/span> 