1. 首页
  2. CSS
  3. CSS Flex

CSS Flex

•css•阅读 4736

关于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 >
  <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:1;
    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:2;
   }      

   
   .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: 0;
}

.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: 3; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。