父级容器属

<!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. ubuntu扩展屏幕

    1.了解设置的名称 直接运行xrandr(不带任何参数)就可以显示出当前的显示设备及设备的模式. xdj@xdj-Presario-CQ42-Notebook-PC:~$ xrandr Screen ...

  2. JavaScript跨域调用基于JSON的RESTful API

    1. 基本术语 AJAX(Asynchronous JavaScript And XML,异步JavaScript和XML):AJAX是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交 ...

  3. 实践作业3：白盒测试---细化明确任务DAY5

    收到老师给我写的评论,感觉老师真的太认真,每个博客都有仔细的,参考了老师发给我的博客,我才明白老师想要的博客内容原来是具体实际的进展记录.我们组其实这些东西早就确定了,会议也开了,但是我之前不明白博客 ...

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

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

  5. 申请参加腾讯云自媒体分享计划，送代金券+CN域名

    文章介绍 看到腾讯支持博客了,就尝试下,看看效果如何. 文章属于转载,文末有文章来源,转载注明出处. 活动规则 活动资格:面向腾讯云官网已注册且完成实名认证用户,除协作者之外,其余用户均可参与; 如何 ...

  6. 企业管理系统——第三周需求&原型改进_张正浩，黄锐斌

    企业管理系统——需求&原型改进,架构设计,测试计划 组员:张正浩,黄锐斌 一.需求&原型改进 1.给目标用户展现原型,与目标用户进一步沟通理解需求 我们的目标用户是公司管理员 场景:随 ...

  7. Dynamically loading unmanaged OCX in C#

    You'll have to perform a number of steps that are normally taken of automatically when you use the t ...

  8. eclipse 开发hbase 环境准备

    修改开发机的host文件:

  9. 871. Minimum Number of Refueling Stops

    A car travels from a starting position to a destination which is target miles east of the starting p ...

  10. 使用Eclipse的几个必须掌握的快捷方式

    “工若善其事,必先利其器”,感谢Eclipse,她 使我们阅读一个大工程的代码更加容易,在阅读的过程中,我发现掌握几个Eclipse的快捷键会使阅读体验更加流畅,写出来与诸君分享,欢迎补充. 1. C ...