当外层容器使用flex布局，并且把flex-direction设置成colum的时候，内层容器的宽度会跟外层容器的宽度保持一致。

在浏览器上的效果如下：

当把外层容器的纵向布局不适用flex-direction，改用flex-wrap的时候，内层组件的宽度就不会被自动拉伸，此时的内层组件宽度会跟随内容宽度动态变化，如下所示：

flex-direction和flex-wrap的更多相关文章

  1. flex 1与flex auto

    flex意为"弹性布局" 这次主要探究的是flex:1与flex:auto的区别,flex是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 ...

  2. 杂项：flex （adobe flex）

    ylbtech-杂项:Flex (Adobe Flex) Flex指Adobe Flex,基于其专有的Macromedia Flash平台,它是涵盖了支持RIA(Rich Internet Appli ...

  3. flex:1和flex:auto详解

    flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写. flex-grow属性定义项目的放大比例,默认为0,即如 ...

  4. [CSS Flex] Flex direction

    flex-direction: main two 'row' or 'column', you can use reverse also.

  5. 重新总结flex布局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）

    1.flex,主要就是按比例分配.(例如:两个div的flex:1,就大小相等) .box1{ flex:1; background-color: red; } .box2{ flex:1; back ...

  6. flex html 用flex展示html

    1. 目的 flex展示html 可以保护网页内容 2. 参考 http://stackoverflow.com/questions/260270/display-html-in-an-actions ...

  7. 微信小程序开发之搞懂flex布局2——flex container

    容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...

  8. 微信小程序开发之搞懂flex布局3——Flex Item

    Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...

  9. Flex外包公司——Flex案例展示

    Flex案例展示 做的mail系统:  http://gowebtop.com/webtop/ 在线购书网站  http://book.orzar.net/ eBay购物网站  http://www. ...

  10. [Flex+JAVA]建立Flex+java项目，并实现基本功能

    1新建JAVA WEB项目 新建后的web文件包截图 3添加Flex项目,右键,添加.更改项目类型,天剑Flex项目类型

随机推荐

  1. opencl(7) 内核执行命令入队]工作组、工作项

    1:将内核执行命令入队(该命令可被多个工作项执行) cl_int clEnqueueNDRangeKernel( cl_command_queue command_queue, cl_kernel k ...

  2. Flask 的模板渲染

    Flask 的模板渲染 渲染模板语言和django很像,都是用{{}},{%%} 注意点: 1 flask给模板传值,render_template("index.htm",use ...

  3. Springboot搭建Eureka并设置Eureka登录账号密码

    Springboot搭建Eureka并设置Eureka登录账号密码 一.创建一个springboot项目 1.可以使用Spring Initializr,用浏览器打开http://start.spri ...

  4. @uoj - 164@ 【清华集训2015】V

    目录 @description@ @solution@ @accepted code@ @details@ @description@ Picks博士观察完金星凌日后,设计了一个复杂的电阻器.为了简化 ...

  5. 设计一个简单的多线程(Fecit)_1

    D6高级编程,Fecit ,学习里面关于线程创建的一个例子.,按照那个例子做的,不过本人喜欢将线程实现部分作为单独的单元,主线程再调用它. unit Unit1; interface uses Win ...

  6. 关于MYSQL的查询时间段、删除数据、查询目标行的命令用法。

    Q1.第一次工作写命令时,写了一个把一个表的数据插入到另一个表中,运行时命令长时间处于执行状态. A.第一次处理数据库大量数据,长时间按运行属于正常现象,这与学校中的小数据不同. Q2.如何查询数据库 ...

  7. 初识Redis的数据类型HyperLogLog

    前提 未来一段时间开发的项目或者需求会大量使用到Redis,趁着这段时间业务并不太繁忙,抽点时间预习和复习Redis的相关内容.刚好看到博客下面的UV和PV统计,想到了最近看书里面提到的HyperLo ...

  8. python中的bytes和str类型

    经过一上午的查找资料.大概理清楚了bytes类型和str类型的区别. bytes类型和str类型在呈现形式有相同之处,如果你print一个bytes类型的变量,会打印一个用b开头,用单引号括起来的序列 ...

  9. laravel查询常用的方式含义.

    find($id) 传值并返回一个模型.如果不存在匹配的模型,则返回null.findOrFail($id) 传值并返回一个模型.如果不存在匹配的模型, 它会抛出异常.first() 返回在数据库中找 ...

  10. vscode 常用变量

    ${workspaceFolder} the path of the workspace folder that contains the tasks.json file ${workspaceRoo ...