CSS - Flex 实例篇(一)

简介: CSS - Flex 实例篇(一)

你会看到,不管是什么布局,Flex往往都可以几行命令搞定。


image.png


我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox


一、骰子的布局

骰子的一面,最多可以放置9个点。


image.png


下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。


image.png


如果不加说明,本节的HTML模板一律如下。


<div class="box">
  <span class="item"></span>
</div>


上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。

1.1 单项目

首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。


image.png


.box {
  display: flex;
}


设置项目的对齐方式,就能实现居中对齐和右对齐。


image.png


.box {
  display: flex;
  justify-content: center;
}


image.png

.box {
  display: flex;
  justify-content: flex-end;
}

设置交叉轴对齐方式,可以垂直移动主轴。


image.png


.box {
  display: flex;
  align-items: center;
}


image.png


.box {
  display: flex;
  justify-content: center;
  align-items: center;
}


image.png


.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}


image.png


.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
目录
相关文章
|
3月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
4月前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
74 4
|
4月前
|
前端开发 开发者 容器
CSS3:flex&box-sizing
本文介绍了CSS中的Flex布局及其相关属性,如`flex-direction`、`flex-wrap`、`justify-content`等,并通过代码示例展示了如何使用这些属性来控制容器内的项目排列方式。同时,还讲解了`align-items`属性用于定义子元素在交叉轴上的对齐方式,以及`box-sizing`属性的不同取值对元素尺寸计算的影响。
|
9月前
|
前端开发 开发者 容器
彻底学会CSS 弹性布局flex
【4月更文挑战第1天】 彻底学会CSS 弹性布局flex
94 0
|
7月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
7月前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
57 1
|
7月前
|
编解码 前端开发 C++
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
197 0
|
7月前
|
前端开发
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
58 0
|
7月前
|
前端开发
前端 CSS 经典:flex + margin 布局
前端 CSS 经典:flex + margin 布局
71 0
|
8月前
|
前端开发
CSS 选择器优先级详解及实例演示
CSS 选择器优先级详解及实例演示

热门文章

最新文章