zoukankan      html  css  js  c++  java
  • 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 {
         800px;
        height: 300px;
        border: 1px solid #c3c3c3;
        display: flex; 
        flex-direction: row;
        justify-content:flex-start;
    }
    
    
    #main>div{
         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;

  • 相关阅读:
    huffman编码
    查询选修了全部课程的学生姓名【转】
    java中的内部类
    jdbc技术
    多态
    存储过程,触发器,Mysql权限,备份还原
    sql查询重点
    常用的sql基础
    手动+工具开发动态资源
    Tomcat
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11823588.html
Copyright © 2011-2022 走看看