父级容器属

<!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. springMVC传对象参数

    springController: [java] view plaincopy @Controller @RequestMapping("/user") public UserCo ...

  2. 转 XlsReadWriteII 的博文(自留参考)

    如何使用XlsReadWriteII在Delphi中读取Excel文件 XLSReadWriteII v5.20.01a for Delphi XE5 x32下载地址: http://download ...

  3. JavaScript对象（持续更新中）

    1Array对象 2.Boolean对象 3.Date对象 4.Math对象 5.Number对象 6.String对象 ※String.replace():替换字符串 实例: str.replace ...

  4. WebApi与MVC Route 问题整理

    1. 为WebAPI添加 Area后,完成了CustomControllerSelector的制定. 跟踪WebAPI底层,整理WebAPI源码后发现几个问题: 1. 使用Area的controlle ...

  5. Django-项目上线后，静态文件配置失效以及404、500页面的全局配置

    https://blog.csdn.net/Jamin2018/article/details/79060509 https://www.cnblogs.com/lfoder/p/6013142.ht ...

  6. 使用Linq读取资源文件

    ResXResourceReader resxr = new ResXResourceReader(txt_WebResourceOpenFile.Text); IEnumerable<Dict ...

  7. 父级（display:none）隐藏时，子节点的高度获取。

    当父节点display:none的时候,子节点的高度是0获取不到. 解决办法:用visibility替换display就可以了.

  8. 【大数据之数据仓库】HAWQ versus GreenPlum

    谈到GreenPlum,肯定会有同事说HAWQ!是的,在本系列第一篇选型流水记里,也有提到.因为对HAWQ接触有限,没有深入具体了解,所以很多信息都是来自于博文,人云亦云,我把看过的资料简要整理,希望 ...

  9. IDEA下载与安装

    IntelliJ IDEA号称当前Java开发效率最高的IDE工具. IntelliJ IDEA有两个版本:社区版(Community)和旗舰版(Ultimate). 社区版 是免费的.开源的,但功能 ...

  10. python操作RabbitMQ、Redis、Memcache、SQLAlchemy

    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...