用 justify-content 属性设置子元素两端对齐

最新推荐文章于 2024-04-23 13:46:57 发布

小鲤鱼听听

最新推荐文章于 2024-04-23 13:46:57 发布

阅读量7.7k

点赞数

分类专栏： CSS 文章标签： CSS 子元素两端对齐

本文链接：https://blog.csdn.net/qq_36485978/article/details/87285296

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

外层元素的 justify-content 属性设置为space-between即可实现子元素两端对齐

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;/*外层元素属性设置为space-between*/
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

效果如图所示：

菜鸟教程的官方解释为：http://www.runoob.com/css3/css3-flexbox.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小鲤鱼听听

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用 justify-content 属性设置子元素两端对齐

外层元素的 justify-content 属性设置为space-between即可实现子元素两端对齐&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫