父级容器属

<!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. C#中对DataTable进行全连接后group by,orderby

    var result = from temp2 in                             (                                 from u in u ...

  2. [GO]随机生成切片元素并使用冒泡排序方式进行排序

    package main import ( "math/rand" "time" "fmt" ) func ButtleData(s []i ...

  3. Python基础入门-os模块

    今天我们来介绍一下os模块中常用的一些方法,当然python中的os模块中提供的使用方法有很多,但是这里面小编会列举出来一些和实际工作中应用的相关的方法,而且会有一些实际的例子方便大家对os模块理解. ...

  4. phpmyadmin安全预防

    头疼的安全 之前服务器总是本人黑,千疮百孔,只能一步步的去做一些安全防范,如何防范自然先从如何渗透开始. 文章及建议 前段时间看到了个phpmyadmin提权的教程,很多人都说现在那里还有root帐号 ...

  5. 编写高质量代码改善C#程序的157个建议——建议58：用抛出异常代替返回错误代码

    建议58:用抛出异常代替返回错误代码 CLR异常机制的优点: 正常控制流会被立即中止,无效值或状态不会在系统中继续传播. 提供了统一的处理错误的方法. 提供了在构造函数.操作符重载及属性中报告异常的遍 ...

  6. 跨域Ajax请求（jQuery JSONP MVC）

    通过jQuery的$.ajax方法发送JSONP请求 js代码 <script type="text/javascript"> function jsonptest2( ...

  7. Maven整理笔记の初步窥探

    第一部分:引言 Maven是一款跨平台的项目管理工具,作为Apache组织的一个开源项目,主要服务于基于java平台的项目构建.依赖管理和项目信息管理. 项目构建:编译.运行单元测试.生成文档.打包和 ...

  8. 关于hibernate的查询

    为什么建议hibernate查询全部字段 一般而言,要查询什么字段就查询什么字段,不要select * from表,但是在hibernate,我们其实可以不遵循这个规则,建议我们把所有属性都查询出来( ...

  9. TSQL--SET ANSI_NULLS OFF

    当ANSI_NULLS 为ON时,遵循SQL92的标准,只能使用IS NULL 来判断值是否为NULL, 而不能使用=或<>来与NULL做比较,任何值包括NULL值与NULL值做=或< ...

  10. 微信第三方平台开头篇--MVC代码（第三方获取ticket和公众号授权）

    微信公众号授权给开放平台 公众号授权给第三方平台的技术实现流程比较简单 这个步骤遗漏了开头获取第三方平台自己的accessToken 先说下流程 如何注册开放平台的第三方信息看截图 其他不说了,此文只 ...