首页 > 开发 > CSS > 正文

基础的CSS3弹性盒Flexbox布局使用实例

2024-07-11 08:33:09

字体：大中小

来源：转载

供稿：网友

flexbox是一个新的盒子模型，当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方，下面就着重讲述一下它的一些使用场景：

Example 1： flexbox等分布局

如果你要实现以下所示的样式，你可能首先想到的是用float：
201648121454883.png (298×71)

CSS Code复制内容到剪贴板

<ul id="ranktop3">
<li>
<div class="ranktab">1</div>
<p>fdeg</p>
<p>霸气值：170</p>
</li>
<li>
<div class="ranktab">2</div>
<p>bling</p>
<p>霸气值：160</p>
</li>
<li>
<div class="ranktab">3</div>
<p>lea</p>
<p>霸气值：150</p>
</li>
</ul>
ul li {
width: 32.9%;
float: left;
border-right: 1px solid #fa9900;
padding: 5px 0;
}

上一篇：纯CSS3代码实现文字描边

下一篇：CSS3的Flexbox布局的简明入门指南

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注