父级容器属

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        /**

        父级的几个属性

        flex-direction ——》 属性决定主轴的方向（横着还是竖着）  row | row-reverse | column | column-reverse;

        flex-wrap-》  一行排不下是否换行 nowrap | wrap（换行 第一行在上） | wrap-reverse（换行第一行在下）;

        flex-flow -》上面两个属性的集合

        justify-content-》 属性定义了项目在主轴（x轴）上的对齐方式。

                                 flex-start(左端对齐) |

                                 flex-end（右端对齐） |

                                 center（居中对齐） |

                                 space-between （ 每一排 左右盒子紧挨边界盒子们间距相等）|

                                 space-around;（ 每一排 每个盒子左右两侧间距恒等）

        align-items-》 属性定义项目在交叉轴(Y轴)上如何对齐。

                        flex-start （顶部对齐 注意 ：如  flex-wrap：column-reverse，则底部对齐）|------------------------

                        flex-end （底部对齐）|

                        center | (上下居中)

                        baseline （文字基线对齐）|

                        stretch （盒子高变为父级宽，设置了敢赌除外）;

        align-content -》属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。(适用于非一条x垂直对齐方式)

                        flex-start （顶部对齐）|

                        flex-end 底部对齐|

                        center 垂直居中|

                        space-between垂直居中（上下紧挨着顶与低） |

                        space-around 垂直对齐 上下间距相等 |

                        stretch;轴线占满整个交叉轴。(每行下间距相等 首行顶部挨顶)

        */

        * {

            margin:0;

            padding: 0;

            list-style: none;

        }

        .wrap{

            width: 100%;

            height: 800px;

            background-color: #fcfccc;

        }

        ul{

            display: flex;

            flex-flow: row wrap;

            justify-content:  space-around;

            align-items: baseline;

            height: 800px;

            align-content:stretch;

        }

        li{

            flex-grow: 1;

            margin: 3px;

            background-color: red;

            text-align: center;

            min-width: 300px;

            max-width: 500px;

        }

    </style>

</head>

<body>

<div class="wrap">

    <ul>

        <li>01</li>

        <li>01</li>

        <li>01</li>

        <li>01</li><li>01</li>

        <li>01</li>

        <li>01</li>

        <li>01</li><li>01</li>

        <li>01</li>

        <li>01</li>

        <li>01</li>

        <li>01</li>

        <li>01</li>

        <li style="height: 100px;padding-top: 30px">02</li>

        <li>03</li>

        <!--<li>04</li>-->

        <!--<li>05</li>-->

        <!--<li>07</li>-->

    </ul>

</div>

</body>

</html>

注意： 当父级 display:flew ;子级无 display :flew-grow：1；子级大小等于盒子大小 -------父级样式生效

每个子级的属性

css display flew 伸缩盒模型的更多相关文章

  1. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  2. 深入了解 Flexbox 伸缩盒模型

    Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛 ...

  3. CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局

    伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex;    只能控制其子元 ...

  4. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  5. css文档之盒模型阅读笔记

    前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...

  6. 被废了的display:box弹性盒模型

    这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...

  7. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  8. HTML和CSS前端教程05-CSS盒模型

    目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...

  9. css和css3弹性盒模型实现元素宽度（高度）自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

随机推荐

  1. JavaScript -- Array中的push()方法和concat()方法介绍

    Array => push()方法向数组的末尾添加一个或者多个元素,也就是说它会改变数组本身 concat() => concat()方法用于连接2个或者多个数组,但它的特殊之处在于,它会 ...

  2. 在IE11(Win8)中检查up6.2配置

      1.按F12,打开调试模式    2.打开调试程序选项卡 说明:在调试程序选项卡中可看到IE加载的脚本信息是否正确.因为IE有缓存,导致脚本有时不是最新的.    3.打开脚本,up6.js   ...

  3. 分组背包----HDU1712 ACboy needs your help

    很简单的一道分组背包入门问题.不多解释了. #include <iostream> #include <cstdio> #include <cstring> usi ...

  4. 软件工程实践一 —— java之wc.exe

    SoftwareEngineering-wc github项目地址:https://github.com/CuiLam/SoftwareEngineering-wc   项目相关要求 实现一个统计程序 ...

  5. DELPHI 调用系统 ADO 配置窗体 提高软件易用性

    最近DELPHI好像不太景气哦,把自己的代码拿出来晒晒.高手别喷哦. 直接上代码 implementation uses AdoConEd; var  saveconnstr:string; proc ...

  6. is/as操作符

    is/as操作符,是C#中用于类型转换的,提供了对类型兼容性的判断,从而使得类型转换控制在安全的范畴,提供了灵活的类型转换控制. is规则:检查对象的兼容性,查看对象的类型是否完全一样,返回值 tru ...

  7. [python]模块及包

    一 .module 通常模块为一个文件,直接使用import来导入就好了.可以作为module的文件类型有".py".".pyo".".pyc&quo ...

  8. （转）深入研究MiniMVC之后续篇

    今天在园子看到<深入研究 蒋金楠(Artech)老师的 MiniMvc(迷你 MVC),看看 MVC 内部到底是如何运行的>之后,本来是不打算开博来续这个后传,不过,在那边回了个评论之后, ...

  9. Jquery的动画

    $下载链接详情点击Jquery-day01查看官方网站下载地址 Jquery-day02 1.Jquery动画使用animate-(JQ-2.1) <!DOCTYPE html> < ...

  10. C# 继承（3）

    接上章代码: class NameList { public NameList() => Console.WriteLine("这个是NameList的构造函数"); ~Na ...