当外层容器使用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 制作 Linux 启动盘

    本文原始地址:https://sitoi.cn/posts/28583.html 前期准备 一个 Mac 电脑 一个 U 盘(8GB 以上) 下载好 Linux 系统镜像(iso 文件) 具体步骤 挂 ...

  2. python numpy 库

    引用文章:https://blog.csdn.net/xjl271314/article/details/80409034

  3. CentOS7.6操作系统安装实例以及Linux版本、哲学思想介绍

    Linux起源1991年的10月5日,Torvalds在comp.os.minix新闻组上发布消息,正式向外宣布他自行编写的完全自由免费的内核诞生(Freeminix-like kernel sour ...

  4. OAuth + Security - 6 - 自定义授权模式

    我们知道OAuth2的官方提供了四种令牌的获取,简化模式,授权码模式,密码模式,客户端模式.其中密码模式中仅仅支持我们通过用户名和密码的方式获取令牌,那么我们如何去实现一个我们自己的令牌获取的模式呢? ...

  5. springboot使用自定义异常

    sprinboot使用自定义注解 创建自定义异常类,继承RuntimeException public class MyException extends RuntimeException {   p ...

  6. EIGRP-13-弥散更新算法-停滞在活动状态

    如果一台路由器参与到了针对某个目的地的弥散计算中(即将相应路由置为活动状态,并发送查询包),它必须首先等待所有邻居都返回响应包,之后它才能执行自已的弥散计算,接着选出新的最优路径,最后开始发送自已的响 ...

  7. Memory layout

    Text Segment       Text Segment,通常也被称为代码段. 为了防止 heap 或是 stack 的溢出,text 段常被安排在 heap 或是 stack 之后. Text ...

  8. .Net Core微服务入门全纪录（三）——Consul-服务注册与发现（下）

    前言 上一篇[.Net Core微服务入门全纪录(二)--Consul-服务注册与发现(上)]已经成功将我们的服务注册到Consul中,接下来就该客户端通过Consul去做服务发现了. 服务发现 同样 ...

  9. brother b-PAC sdk开发包

    brother b-PAC sdk开发包 https://download.brother.com/welcome/dlfp100607/bsdkw32031eu.exe https://www.br ...

  10. Python学习笔记——基础语法篇

    一.Python初识(IDE环境及基本语法,Spyder快捷方式) Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,没有编译过程,可移植,可嵌入,可扩展. IDE 1.检查Pyth ...