zoukankan      html  css  js  c++  java
  • CSS Flex 布局

    .container {
        display: flex;
        width: 800px;
        height: 150px;
    }
    .item {
        font-size: 50px;
        font-weight: 500;
        width: 200px;
        text-align: center;
    }

    一、容器属性,子元素排列

    .container {
        display: flex;
        width: 800px;
        height: 150px;
        flex-direction: row;
    }

    row

     

    row-reverse

     

     column

     

    column-reverse

    二、容器属性,子元素折行

    .container {
        border: 2px solid black;
        display: flex;
        width: 700px;
        height: 150px;
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }

    wrap

    wrap-reverse

     

    三、容器属性,子元素对齐方式

    .container {
        border: 2px solid black;
        display: flex;
        width: 1200px;
        height: 200px;
        flex-direction: row;
        justify-content:start;
    }
    flex-start

    end

     

    center

     

    space-between

     

    space-around

     

    .container {
        border: 2px solid black;
        display: flex;
        width: 1200px;
        height: 200px;
        flex-direction: row;
        align-items: flex-start;
    }

    flex-start

    flex-end

    center

    baseline

     

    stretch (子元素没有指定高度)

    四、子元素属性,空间多余,分配给子元素。默认是0,所有元素都不分配

    <div class="item" style="background-color: aqua;">1</div>
    <div class="item" style="background-color: gold;flex-grow: 2;">2</div>
    <div class="item" style="background-color: hotpink;flex-grow: 1;">3</div>
    <div class="item" style="background-color: GreenYellow;">4</div>
    <div class="item" style="background-color: Indigo;">5</div>
    <div class="item" style="background-color: LightCyan;">6</div>
    <div class="item" style="background-color: SlateGray;">7</div>
    <div class="item" style="background-color: SaddleBrown;">8</div>

     空间不足,需要减少子元素尺寸,默认都是1,平均减少

    <div class="item" style="background-color: aqua;">1</div>
    <div class="item" style="background-color: gold;flex-shrink: 2;">2</div>
    <div class="item" style="background-color: hotpink;">3</div>
    <div class="item" style="background-color: GreenYellow;">4</div>
    <div class="item" style="background-color: Indigo;">5</div>
    <div class="item" style="background-color: LightCyan;">6</div>
    <div class="item" style="background-color: SlateGray;">7</div>
    <div class="item" style="background-color: SaddleBrown;">8</div>

  • 相关阅读:
    内存分析工具MAT(Memory Analyzer Tool)从安装到使用
    java 技术分享
    FreeMarker三宗罪之优缺点
    100+经典Java面试题及答案解析
    java中使用SimpleDateFormat实现字符串和日期的相互转换
    SQLSERVER还原数据库失败:错误: 3154
    值不能为null.参数名: viewInfo,如何解决
    java中判断Object对象类型
    ajax图片上传(asp.net +jquery+ashx)
    ElasticSearch 入门介绍
  • 原文地址:https://www.cnblogs.com/chenyingzuo/p/15024474.html
Copyright © 2011-2022 走看看