zoukankan      html  css  js  c++  java
  • 理解flex_对齐

    容器属性:

      左右对齐方式:justify-content:flex-start/flex-end/center/space-between/space-around;

      上下对齐方式:align-items:flex-start/flex-end/center/baseline/stretch  

              其中,baseline/stretch是用于存在内容的时候,基线对齐,伸展。

    项目属性:

      align-self:flex-start/flex-end/flex-center;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .container{
                display:flex;
                display:-webkit-flex;
                /*flex-direction:row;*//*默认*/
                /*-webkit-flex-direction:row;*/
                justify-content:center;/*子元素居中对齐*/
                /*align-items:center;!*在400的高度中竖向对齐*!*/
                height:400px;
                border:5px solid red;
            }
            .container .ch{width:200px;height:200px;border:10px solid green;color:green;}
            .ch:nth-child(1){
                align-self:flex-start;/*默认default*/
            }
            .ch:nth-child(2){
                align-self:flex-end;
            }
            .ch:nth-child(3){
                align-self:center;
            }
        </style>
    </head>
    <body>
    <h1 style="color:red;">
        .container{display:flex;display:-webkit-flex;justify-content:center;}
    </h1>
    <div class="container"><!--注意container要有高度。子元素的align-self才有意义。-->
        <div class="ch">align-self:flex-start</div>
        <div class="ch">align-self:flex-end</div>
        <div class="ch">align-self:flex-center</div>
    </div>
    </body>
    </html>
  • 相关阅读:
    ES5 05 Function扩展
    ES5 04 Array扩展
    ES5 03 Object扩展
    ES5 02 JSON对象
    ES5 01 严格模式
    Oracle 数据库复制
    PB函数大全
    Handle( ) //得到PB窗口型对象的句柄
    PB赋值粘贴 多个DW进行update
    pb 11 数据窗口空白,预览pb崩溃解决方案
  • 原文地址:https://www.cnblogs.com/wang715100018066/p/6050238.html
Copyright © 2011-2022 走看看