05justify-content

编程之家收集整理的这篇文章主要介绍了05justify-content编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


display: flex; 的认轴是x轴
justify-content: 设置主轴上的子元素排列的方式
所以在使用之前要确定好哪一个是主轴

/* justify-content:flex-start; 如果主轴是x,从左到右 如果主轴是y,从上到下*/
/* justify-content: flex-end; 如果主轴是y,从下到上到右 如果主轴是x,从右到做*/
/* justify-content:center; 居中*/
/* justify-content: space-around; */
/* justify-content: space-between; */

#main {
    width: 800px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: flex; 
    flex-direction: row;
    justify-content:flex-start;
}


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

<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>

 

 

 

 

justify-content:flex-end;

 

 

 

justify-content: space-around;

 

 

 

 

 

 

 

 

总结

以上是编程之家为你收集整理的05justify-content全部内容,希望文章能够帮你解决05justify-content所遇到的程序开发问题。

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

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的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
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注