当外层容器使用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. Mac上查看当前安卓手机上打开的app的包名和主程序入口

    1.连接上手机,数据线链接或者无线连接随便 2.打开你需要查看的app 3.打开终端,输入命令: adb shell dumpsys window w |grep \/ |grep name=

  2. k8s学习-资源清单

    4.kubernetes使用 4.1.资源清单 api 文档.api 描述 4.1.2.说明 必须存在的属性 主要的对象 额外的参数项 例子 vim my-app.yml apiVersion: v1 ...

  3. 除了FastJson，你也应该了解一下Jackson（二）

    概览 上一篇文章介绍了Jackson中的映射器ObjectMapper,以及如何使用它来实现Json与Java对象之间的序列化和反序列化,最后介绍了Jackson中一些序列化/反序列化的高级特性.而本 ...

  4. javascript 面向对象学习（三）——this，bind、apply 和 call

    this 是 js 里绕不开的话题,也是非常容易混淆的概念,今天试着把它理一理. this 在非严格模式下,总是指向一个对象,在严格模式下可以是任意值,本文仅考虑非严格模式.记住它总是指向一个对象对于 ...

  5. 一起读《Java编程思想》（第四版）

    空余时间看<Java编程思想>(第四版)这本书,遇到不懂的知识点就记录在本博客内. 1.复用具体实现 Java代码复用的三种常见方式:继承.组合.代理. 1.继承:使用extends关键字 ...

  6. ImportError: cannot import name _remove_dead_weakref

    出现这个错误, 和python环境有关. 电脑有多个版本造成的. python3 有这个_remove_dead_weakref python 2.7.10 并没有_remove_dead_weakr ...

  7. jmeter在Windows下安装（含插件安装）

    [准备环境] jdk1.8 jmeter的安装包下载 [步骤] 1 把下载下来的压缩包解压,点击jmeter.bat 启动,启动后是英文界面 2 修改默认的英文界面,打开jmeter.properti ...

  8. Thunk函数的使用

    Thunk函数的使用 编译器的求值策略通常分为传值调用以及传名调用,Thunk函数是应用于编译器的传名调用实现,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体,这个临时函数就叫做Thun ...

  9. django drf插件(一)

    复习 """ 1.vue如果控制html 在html中设置挂载点.导入vue.js环境.创建Vue对象与挂载点绑定 2.vue是渐进式js框架 3.vue指令 {{ }} ...

  10. MySql数据库GROUP BY使用过程中的那些坑

    MySql数据库GROUP BY使用过程中的那些坑 GROUP BY 语句用于结合合计函数,根据一个或多个列对结果集进行分组. 特别注意: group by 有一个原则,就是 select 后面的所有 ...