zoukankan      html  css  js  c++  java
  • Flex布局03:flex-continer && justify-content(改变flex-items在主轴上的对齐方式)

    justify-content: 决定flex items 在主轴上的对齐方式

    image-20210224132135756

    • flex-start

      image-20210224132217625

    • flex-end

      image-20210224132252272

    • center

      image-20210224132450955

    • space-between

      image-20210224132552425

    • space-evenly

      image-20210224132653706

    • space-around

      image-20210224132717585

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
            #box{
                /* 开启flex布局:块元素 */
                display: flex;
                /* 开启flex布局;行元素 */
                /* display: inline-flex; */
                background-color: red;
                 600px;
                /* 水平居中 */
                margin: 0 auto;
                /* flex-start: 默认值 main start对齐 
                flex-end: main end 对齐
                center: 主轴中间对齐
                space-between: 左右对齐等分主轴
                space-around: 左右等分间隙然后等分
                space-evenly: 左右窄,中间等分
                */
                justify-content: space-around;
    
            }
            .item{
                text-align: center;
                line-height: 100px;
                 100px;
            }
    
            .item1{
                background-color: azure;
            }
            .item2{
                background-color: green;
            }
            .item3{
                background-color: gold;
            }
        </style>
    </head>
    <body>
    
        <div id="box">
            <div class="item item1">item1</div>
            <div class="item item2">item2</div>
            <div class="item item3">item3</div>
        </div>
        <strong>行类元素</strong>
    </body>
    </html>
    
    作者:zy7y
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文链接,否则保留追究法律责任的权利。
  • 相关阅读:
    从输入网址到页面呈现的过程
    Git 常用命令合集
    Jquery浅克隆与深克隆
    CSS变量教程
    设计模式
    Servlet和JSP简述
    SQL Server,MySQL,Oracle三者的区别
    mysql事务处理
    计时器
    java中length,length(),size()区别
  • 原文地址:https://www.cnblogs.com/zy7y/p/14440953.html
Copyright © 2011-2022 走看看