flex弹性布局学习-实例

作者: 若沫成海 | 来源:发表于2019-05-05 17:25 被阅读0次

flex弹性布局学习-实例
css:About Flex
flex布局
弹性布局总结
CSS flex弹性布局
flex布局实现骰子
CSS3弹性布局 flexible boxes
flex布局
Flex布局
6Flex 布局

flex语法原文链接：https://blog.csdn.net/lm9948/article/details/80732702
索隆萨克同学告诉的学习flex小游戏链接：http://flexboxfroggy.com/#zh-cn
flex实例原文链接：http://www.mamicode.com/info-detail-1683579.html

任何一个容器都可以指定为flex布局，这个容器称作flex容器，其中的子元素则为flex项目

<div class="box">
  <span class="item"></span>
</div>

将div元素设为flex容器方法如下：

    .box{
      display:flex;
    }

实例：
（一）骰子的布局
（二）网格布局
1.基本网格布局
平均分布，但是需要设置项目的自动缩放。

  <div class=box>
    <div class="item">1/3</div>
     <div class="item">1/3 </div>
    <div class="item">1/3 </div>
  </div>

.box{
      display:flex;
      background: red;
    }
    .item{
      flex:1;
      background: grey;
      border: 1px solid white;
      text-align: center;
    }

2.百分比布局
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间

<div class="box">
    <div class="item u-1of1">50%</div>
    <div class="item">auto</div>
    <div class="item">auto</div>
  </div>

    .box{
      display:flex;
      background: red;
    }
    .item{
      flex:1;
      background: grey;
      border: 2px solid white;
      text-align: center;
    }
    .item.u-1of1{   
     flex:0 0 50%;
    }

(三)圣杯布局
最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

<body class="HolyGrail">
  <header>#header</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">#content</main>
    <nav class="HolyGrail-nav">#left</nav>
    <aside class="HolyGrail-ads">#right</aside>
  </div>
  <footer>#footer</footer>
</body>

如果是小屏幕，躯干的三栏自动变为垂直叠加。

@media (max-width: 768px) {
.HolyGrail-body {
  flex-direction: column;
  flex: 1;
}
.HolyGrail-nav,
.HolyGrail-ads,
.HolyGrail-content {
  flex: auto;
}
}