<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  .flex-container {

    display: flex;

    height: 400px;

    background-color: gray;

  }

  .flex-item {

    background-color: green;

    width: 100px;

    height: 100px;

    margin: 5px;

    /*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto*/

    /*flex: auto即flex:1 1 auto;各个子盒子均等分*/

    /*flex: auto;*/

    /*flex: none即flex:0 0 auto;子盒子将不具有伸缩性*/

    /*flex:none;*/

  }

	/*flex:[number],子盒子按比例分割*/

  .flex-item:nth-child(1) {

    flex: 2

  }

  .flex-item:nth-child(2) {

    flex: 1

  }

  .flex-item:nth-child(3) {

    flex: 1

  }

  </style>

</head>

<body>

  <div class="flex-container">

    <div class="flex-item">flex item 1</div>

    <div class="flex-item">flex item 2</div>

    <div class="flex-item">flex item 3</div>

  </div>

</body>

</html>

flexbox子盒子flex属性的更多相关文章

  1. flexbox子盒子align-self属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. flexbox子盒子order属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. flexbox父盒子align-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. flexbox父盒子flex-wrap属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. flexbox父盒子align-items属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. flexbox父盒子justify-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. flexbox父盒子flex-direction属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS 弹性盒子 flex的三个属性：grow、shrink、basis

    flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...

  9. CSS3 -- FlexBox(弹性盒子)

    盒子模型 CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析. 在盒模型中主要包括width.height.border.background.padding和margin这 ...

随机推荐

  1. dapper支持操作函数和事物

    dapper除了支持基础的CURD.存储过程以外,还支持操作函数和事物. dapper操作函数的代码如下: using Dapper; using System; using System.Colle ...

  2. PCL特征点与配准（1）

    关于输入一个具体的物体的点云,从场景中找出与该物体点云相匹配的,这种方法可以用来抓取指定的物体等等,具体的代码的解释如下,需要用到的一些基础的知识,在之前的博客中都有提及,其中用到的一些方法可以翻阅前 ...

  3. Eclipse配置方法注释模板

    Java-->Code Style-->Code Templates-->Comments

  4. PHP判断字符串的包含

    PHP语言是一个功能强大的嵌入式HTML脚本语言,它的易用性让许多程序员选择使用.PHP判断字符串的包含,可以使用PHP的内置函数strstr,strpos,stristr直接进行判断.也可以通过ex ...

  5. Java设计模式（3）建造者模式（Builder模式）

    Builder模式定义:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. Builder模式是一步一步创建一个复杂的对象,它允许用户可以只通过指定复杂对象的类型和内容就可以构 ...

  6. Oracle 11g 数据库 shutdown 后立即执行 startup mount 报错的解决办法

    最新文章:Virson's Blog 今天在配置Goldengate时Capture进程提示未开启归档日志,然后立即用sys用户登录orcl数据库,然后执行了“shutdown immediate”命 ...

  7. 关于Unity中如何立即中断动画然后重新开始播放

    今天做一个FPS游戏的时候,用的是新版的动画系统,遇到一个问题. 就是用枪打敌人的时候,敌人会播放一个被击中的动画,但是如果在动画播放的过程中再射击敌人,敌人会先把第一个被击中的动画播放完,才再播放第 ...

  8. e827. 设置JSplitPane中分隔物的大小

    A divider can be no less than one pixel in size. // Create a left-right split pane JSplitPane pane = ...

  9. 互联网公司GitHub repo 语言使用情况

    转自: https://laike9m.com/blog/hu-lian-wang-gong-si-github-repo-yu-yan-shi-yong-qing-kuang,56/ 现在基本上所有 ...

  10. MyMVC配置

    <system.webServer> <validation validateIntegratedModeConfiguration="false"/> & ...