zoukankan      html  css  js  c++  java
  • Flex布局04:flext-contianer & align-items(flex-items交叉轴对齐方式)

    align-items: 决定了flex-items在交叉轴上的对齐方式

     align-items: 决定flex-items在交叉轴的对齐方式 
    
     flex-start: 在交叉轴的顶部对齐
    
     flex-end: 在交叉轴的底部对齐
    
     center: 在交叉轴的中心点对齐
    
     baseline: 基线对齐(第一行文本作为基线)
    
    • center

      image-20210224135616143

    代码

    <!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;
                height: 500px;
                
                /* 水平居中 */
                margin: 0 auto;
    
                /*
                align-items: 决定flex-items在交叉轴的对齐方式 
                flex-start: 在交叉轴的顶部对齐
                flex-end: 在交叉轴的底部对齐
                center: 在交叉轴的中心点对齐
                baseline: 基线对齐(第一行文本作为基线)
                 */
                align-items: center;
    
            }
            .item{
                text-align: center;
                height: 300px;
                 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
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文链接,否则保留追究法律责任的权利。
  • 相关阅读:
    随机出题问题
    简读《构建之法》提问
    大二下第一次课后作业
    大道至简第七第八章读后感
    继承与接口动手动脑
    大道至简第六章读后感
    数组里的随机数问题
    大道至简第五章读后感
    输入法的用户界面
    搜索水王
  • 原文地址:https://www.cnblogs.com/zy7y/p/14441045.html
Copyright © 2011-2022 走看看