关于flex 请看这里  https://css-tricks.com/snippets/css/a-guide-to-flexbox/

太详细啦!!!  还通俗易懂!!! 没啥好说的

不过上面那篇文章中没有仔细说 flex-grow  flex-shrink  flex-basis  是什么含义  请移步这里 http://zhoon.github.io/css3/2014/08/23/flex.html

PS  display:box 和 display:flex-box 是display:flex 的旧版本

PS还可以参考 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

我的例子

<!DOCTYPE html>

<html lang="en">

  <head>

<meta name="description" content="[flex]">

 </head>

 <body>

   <div class="flex flex5">

     <div class="item">111</div>

     <div class="item">222</div>

     <div class="item">333</div>

     <div class="item">444</div>

   </div>

  <p>Flexbox nuovo</p>

  <div class="flex flex1">

    <div>uno</div>

    <div>due</div>

    <div>tre</div>

  </div>

  <p>flex一行三列 按比例分配</p>

  <p>flex-grow 是横向比例权重</p>

  <p>默认 父元素是flex 其子元素是按照一行排列</p>

  <div class="flex flex2">

    <div class="item">111</div>

    <div class="item">222</div>

    <div class="item">333</div>

  </div>

  <h1>flex的居中</h1>

  <p>justify-content 是控制水平方向上的位置</p>

  <p>align-items是控制垂直方向上的位置</p>

   <p>PS 这里每一个item都设置宽度为50% 但是实际上他们还是在一行中  原因见下面</p>

   <div class="flex flex3">

     <div class="item">111</div>

     <div class="item">222</div>

     <div class="item">333</div>

   </div>

   <p>关于flex-wrap</p>

   <p>有些时候我们希望同一级别的子元素根据情况来决定是占满一行还是另起一行</p>

   <p>默认情况下(指容器是flex的时候) 所有的item都会默认挤在一行内  所以设置宽度不起作用</p>

   <p>这时候就需要wrap  值为wrap的时候会另起一行</p>

   <div class="flex flex4">

     <div class="item">111</div>

     <div class="item">222</div>

     <div class="item">333</div>

   </div>

   <p>设置flex direction: row后宽度失效</p>

   <p>尽管flex direction默认是row 但是不显示的设置的话可以设置item的宽度</p>

   <div class="flex flex42">

     <div class="item">111</div>

     <div class="item">222</div>

     <div class="item">333</div>

   </div>   

   <h1>一个响应式NAV</h1>

   <div class="flex flex5">

     <div class="item">111</div>

     <div class="item">222</div>

     <div class="item">333</div>

     <div class="item">444</div>

   </div>

   <h1>Example1</h1>

   <div class="wrapper">

  <header class="header">Header</header>

  <article class="main">

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

  </article>

  <aside class="aside aside-1">Aside 1</aside>

  <aside class="aside aside-2">Aside 2</aside>

  <footer class="footer">Footer</footer>

</div>

 </body>

</html>

CSS

   .flex

   {

      /* basic styling */

      border: 1px solid #555;

      font: 14px Arial;

      /* flexbox setup */

      display: -webkit-flex;

      display: flex;

   }

   .flex1{

      width: 350px;

      height: 200px;

      flex-direction: row;

      -webkit-flex-direction: row;

   }

   .flex1 > div

   {

      -webkit-flex: 1 1 auto;

      flex: 1 1 auto;

      width: 30px; /* To make the transition work nicely.  (Transitions to/from

                      "width:auto" are buggy in Gecko and Webkit, at least.

                      See http://bugzil.la/731886 for more info.) */

      -webkit-transition: width 0.7s ease-out;

      transition: width 0.7s ease-out;

   }

   /* colors */

   .flex1 > div:nth-child(1){ background : #009246; }

   .flex1 > div:nth-child(2){ background : #F1F2F1; }

   .flex1 > div:nth-child(3){ background : #CE2B37; }

   .flex1 > div:hover

   {

        width: 200px;

   }

/*ME *********************************************/

  .item{

    flex-grow:;

    height: 200px;

  }

  .item:nth-child(1){background: pink;}

  .item:nth-child(2){background: #33ccdd;}

  .item:nth-child(3){background: #ccddcc;}

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

     flex-grow:;

   }      

   .flex3{

      justify-content: center;

      align-items: center;

   }

   .flex3 .item{

     width: 50%;

     margin: 0 10px;

   }

   .flex4{

     flex-wrap: wrap; /*这个可以使width生效*/

   }

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

     width: 100%;

   }

   /*PS 不过我们一般不这么写*/

   .flex42 {

     flex-direction: row;

     flex-wrap:wrap;

   }

   .flex42 .item{

     flex-basis:100%;

     /*或者*/

     flex: 1 0 100%;

   }

/* Nav ****************************************/

.flex5{

  flex-wrap: wrap;

  justify-content: flex-end;

}

.flex5 .item{

  height: 50px;

  width: 70px;

  flex-grow:;

}

.flex5 .item:nth-child(4){

  background:#11eeff;

}

@media all and (max-width: 300px) {

  .flex5 .item{

    width: 100%;

  }

}

/*Example1 *****************************************/

.wrapper {

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;  

  -webkit-flex-flow: row wrap;

  flex-flow: row wrap;

  font-weight: bold;

  text-align: center;

}

.wrapper > * {

  padding: 10px;

  flex: 1 100%;

}

.header {

  background: tomato;

}

.footer {

  background: lightgreen;

}

.main {

  text-align: left;

  background: deepskyblue;

}

.aside-1 {

  background: gold;

}

.aside-2 {

  background: hotpink;

}

@media all and (min-width: 300px) {

  .aside { flex: 1 auto; }

}

@media all and (min-width: 500px) {

  .main    { flex:; }

  .aside-1 { order:; }

  .main    { order:; }

  .aside-2 { order:; }

  .footer  { order:; }

}

CSS Flex的更多相关文章

  1. 【css flex】将多个<div>放在同一行

    使用style里的flex属性 默认情况下,一个div独占一行 使用css选择器给外层div加上以下flex属性,则该div的子div可以在同一行中显示, .runs-paginator-flex-c ...

  2. css flex兼容性

    我测试了一下css flex的兼容性 已经可以兼容到IE10了呀 为啥MDN上面的IE兼容性还是兼容到IE11 有点更新不及时的感觉

  3. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  4. 【转载】CSS flex属性深入理解

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2019/12/css-f ...

  5. CSS flex waterfall layout

    CSS flex waterfall layout https://github.com/YoneChen/waterfall-flexbox https://css-tricks.com/snipp ...

  6. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  7. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  8. css flex方法标题左右两边平衡线

    <html> <div class="title"> <div class="line"></div> < ...

  9. css flex 兼容ios android--商品展示 添加购物车

    https://blog.csdn.net/u010035608/article/details/52711248 <!DOCTYPE html> <html> <hea ...

随机推荐

  1. mysql--外键（froeign key）

    如果一个实体的某个字段指向另一个实体的主键,就称为外键被指向的实体,称之为主实体(主表),也叫父实体(父表).负责指向的实体,称之为从实体(从表),也叫子实体(子表) 作用:用于约束处于关系内的实体增 ...

  2. PHP比较全的友好的时间显示，比如‘刚刚’，'几秒前'等

    分享一个php友好的比较完成的时间格式化函数,包括‘刚刚’,'几秒之前',‘几分钟前’,'几小时前',几天前,几周前,几个月前等.调用方式很简单,是从ThinkSNS 里面拿出来的. /** * 友好 ...

  3. Octopress创建GitHub Pages——基于代码托管的静态博客

    Github Pages是静态网页来的,官方也半认可了它的博客用途,代码挂在github上,随时都可以更改,算是不错的一种尝试,因为它是静态的,所以在表现上会自由得多,但是,同样因为它是静态的,管理上 ...

  4. sqlserver 分页sql语句

     select * from (select *,row_number() over(order by CONTENT_ID ) as rnum from ArchiveContents) t whe ...

  5. J2SE知识点摘记(十八)

    Java容器类类库的用途是“保存对象”,并将其划分为两个不同的概念: 1)  Collection . 一组对立的元素,通常这些元素都服从某种规则.List必须保持元素特定的顺序,而Set 不能有重复 ...

  6. 可以把一堆dll文件放到程序目录下的一个自建目录里面

    窦宁波大哥哥的那篇文章的这种写法还是很有参考价值的. QString strLibPath(QDir::toNativeSeparators(QApplication::applicationDirP ...

  7. 未能从文本"Template"创建 "System.Windows.DependencyProperty"

    XXXXProperty = DependencyProperty.Register("XXXX", typeof(double), typeof(MyClass), new Pr ...

  8. poj1656---数黑格子

    题意:有white,black,test操作 black将给定范围涂黑,white将给定范围涂白,test将给定范围的黑格子数出来并且输出 思路:无论哪个操作格子范围都在  (x,y)  (x+L-1 ...

  9. mac电脑批量解压android apk文件图形化工具--apkDecode

    mac电脑apk文件解压软件,简单的用图形界面将apktools包装了下,使用起来非常简单,可以将apk文件批量解压缩,方便大家查看一些东东,仅供学习目的. 使用步骤如下: 1 下载apkDecode ...

  10. android项目的的目录结构

    然后我们看一下Helloword的程序目录: 我们可以看到 大致有的文件: 1. MainHelloWorld.java文件 2. R.java文件 3. android.jar文件 4. RES.L ...