04-align-content 它对于当单行是没有效果的

编程之家收集整理的这篇文章主要介绍了04-align-content 它对于当单行是没有效果的编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

/* 运用在父级元素上 align-content: 它通产与子元素的div{margin:10px 一起联合使用 }*/ ps==>用在子项出现换行的情况下,并是多行的情况下哦。运用在子项在侧


/* 运用在父级元素上  align-content:   它通产与子元素的div{margin:10px 一起联合使用 }*/

ps==>用在子项出现换行的情况下,并是多行的情况下哦。运用在子项在侧轴上的排列方式。

align-content: flex-start ; 顶部对齐(认值)
align-content:center; 垂直方向上居中 
align-content: flex-end交叉轴的终点对齐(与底部对齐)。
 align-content:space-around
一个子元素距离顶部的距离==最后一个子元素距离底部的距离
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素,这些子元素距离左右两边的间距都是相等
巧记:around 是四周,说明四周是有间距的。


justify-content: space-between;
运用在父级元素上
一个子元素和最后一个子元素 分别靠在最顶部和最底部
除第一个子元素和最后一个子元素外,第3个...一直到倒数第二个子元素,这些子元素距离上下两边的间距都是相等

 

justify-content 通常和 子元素中的div{margin:10px} 联合使用的 (重点 重点) 

通过对比可以发现align-content:center对单行是没有效果的,而align-items:center不管是对单行还是多行都有效果,而在我们日常开发中用的比较多的就是align-items.

 

 

 

#main {
    width: 800px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: flex; 
    flex-wrap: wrap;
    align-content: center;
}

#main>div{
    width: 150px;
    height: 100px;
    background: #0099FF;
    margin: 10px;
}

</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">11</div>
  <div style="background-color:lightblue;">22</div>
  <div style="background-color:pink;">33</div>
  <div style="background-color:olive;">4</div>
  <div style="background-color:coral;">55</div>
  <div style="background-color:lightblue;">66</div>
</div>

 

 

 

align-content: flex-start;

 

 

 align-content: flex-end;

 

 

  align-content: space-around;

 

 

 

 

 

 

总结

以上是编程之家为你收集整理的04-align-content 它对于当单行是没有效果的全部内容,希望文章能够帮你解决04-align-content 它对于当单行是没有效果的所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

猜你在找的HTML5相关文章

html 默认:&lt;input type=&quot;number&quot; /&gt;&lt;/br&gt; 处理:&lt;input type=&quot;number&quot; clas
/* 运用在父级元素上 align-content: 它通产与子元素的div{margin:10px 一起联合使用 }*/ ps==&gt;用在子项出现换行的情况下,并是多行的情况下哦。运用在子项在侧
解决办法一 .main{ display: flex; justify-content: space-around; flex-wrap: wrap; } .son{ width:100px } //
FormData对象介绍FormData字母意思是表单数据,H5新增的一个内置对象。可以获取任何类型的表单数据,如text radio checkbox file textarea 常用语发送ajax
功能需求: 在下拉框中选择你所需要缩放的比例, 选择好了之后,图片会按照你选择的比例进行缩放 1==》如何获取select中option选中的值 在select添加事件change 和双向绑定v-mo
我发现在vue脚手架中不同的版本,对视频标签的处理是不同的哈。 在vue脚手架2.0中。离开视频video标签。所在的页面。 视频标签会自动关闭。 但是在vue3.0的脚手架中却不会自动关闭
&lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot
一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; jus
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注