首页 > 开发 > CSS > 正文

CSS弹性盒模型flex在布局中的应用详解

2024-07-11 08:32:55

字体：大中小

来源：转载

供稿：网友

前面的话

前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用

元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

JavaScript Code复制内容到剪贴板

<style> .parent{
display: flex; justify-content: center;
align-items: center; }
</style>

XML/HTML Code复制内容到剪贴板

<div class="parent" style="background-color: lightgrey; height: 100px; width: 200px;"> <div class="in" style="background-color: lightblue;">DEMO</div>
</div>

【2】在伸缩项目上使用margin:auto

CSS Code复制内容到剪贴板

<style> .parent{
display: flex; }
.in{ margin: auto;
} </style>

XML/HTML Code复制内容到剪贴板

<div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;"> <div class="in" style="background-color: lightblue;">DEMO</div>
</div>

两端对齐

CSS Code复制内容到剪贴板

<style> .parent{
display: flex; justify-content:space-between
} </style>

XML/HTML Code复制内容到剪贴板

上一篇：轻松掌握CSS3中的字体大小单位rem的使用方法

下一篇：CSS3实现多重边框的方法总结

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了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

疑难解答

图片精选

网友关注