父级容器属

<!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. Visual Studio 2010调试本地 IIS 站点

    点击vs的Debug-Attach to Process选中 w3wp.exe,然后点击Attach, vs便进入debug模式.

  2. CentOS6.5 Eclipse C++ 版本 OpenCV

    最近在搞Linux上用Eclipse(C++版本)开发 OpenCV,配环境配的那真是配到天昏地暗,不知所措,好在配成功了,期间参考了大量的帖子,所以,特立此贴,希望能给后来人一些小建议! 1.Cen ...

  3. TP5图片上传

    /*图片上传*/ public function upload(){ // 获取表单上传文件 例如上传了001.jpg $file = request()->file('file'); // 移 ...

  4. C++ 虚基类 派生与继承

    在学习设计模式时我就有一个疑问,关联和继承除了用法上的区别,好像在内存上并没有什么区别,继承也是父类作为了子类的元素(内存上),关联也是这样.而且关联好像更占内存一些.这就是设计模式里问题了“依赖倒转 ...

  5. HackThirteen 在onCreate()方法中获取View的宽度和高度

    1.概要:     Android源代码中很多模块都使用了post()方法,深入理解框架曾运行机制对于避开类似于本例中的小陷阱是很重要的 2.问题提出:     如果开发一些依赖于UI控件的宽和高的功 ...

  6. NPOI row.Cells[i] 的坑

    我有A行B列的EXCEL表格: 获取一行数据: IRow row=sheet.GetRow(i); 正常是这样的 row.Cells.Count = B; 但由于会存在没有激活的单元格,导致 row. ...

  7. shipyard

    https://www.ivankrizsan.se/2016/07/10/managing-containers-shipyard/ kubernetes中文社区:https://www.kuber ...

  8. C# 继承（4）

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

  9. c语言指针的简单实例

    c语言的指针的存在使得c语言对硬件的操控,以及灵活性得到了极大的提高. 但是指针的使用存在着很多难点问题. #include<stdlib.h> #include<stdio.h&g ...

  10. 关于C语言中printf函数“输出歧视”的问题

    目录 关于C语言中printf函数"输出歧视"的问题 问题描述 探索问题原因 另一种研究方法 问题结论 关于C语言中printf函数"输出歧视"的问题 问题描述 ...