Flex布局

1： Flex布局教程：语法篇 

by 阮一峰 

见：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2：   Flex布局教程：实例篇 

by 阮一峰

见： http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

> eg:

使用CSS的flexbox布局，不能实现以下哪一个效果：

正确答案: D   你的答案: D (正确)

三列布局，随容器宽度等宽弹性伸缩

多列布局，每列的高度按内容最高的一列等高

三列布局，左列宽度像素数确定，中、右列随容器宽度等宽弹性伸缩

多个宽高不等的元素，实现无缝瀑布流布局

• 添加笔记
• 求解答(39)
• 收藏
• 纠错

本题知识点

HTML/CSS

共有7条讨论添加解析

• 9
  南音

  Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。

  一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。  伸缩容器(flex  containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex  items)。

  发表于 2015-08-21 16:05:41 回复(3)
• 5
  Mr.Apple

  HTML

  <h1>不等宽不等高（定宽） </h1>

  <div class="box box1">

      <div class="flex-box" style="width:100px;height:100px;">1</div>

      <div class="flex-box" style="width:250px;height:250px;">3</div>

      <div class="flex-box" style="width:200px;height:200px;">2</div>

      <div class="flex-box" style="width:350px;height:350px;">5</div>

      <div class="flex-box" style="width:400px;height:400px;">4</div>

      <div class="flex-box" style="width:500px;height:500px;">7</div>

      <div class="flex-box" style="width:450px;height:450px;">6</div>

  </div>

  <h1>不 等宽 等高（ 定宽+变宽）</h1>

  <div class="box box2">

      <div class="left flex-box">left</div>

      <div class="center flex-box">center</div>

      <div class="right flex-box">right</div>

  </div>

  <h1>等宽 等高（变宽） </h1>

  <div class="box box3">

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

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

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

  </div>

  <h1>等宽不等高 （定宽） </h1>

  <div class="box box4">

      <div class="flex-box" style="height:100px;">1</div>

      <div class="flex-box" style="height:250px;">2</div>

      <div class="flex-box" style="height:400px;">3</div>

      <div class="flex-box" style="height:350px;">4</div>

      <div class="flex-box" style="height:300px;">5</div>

      <div class="flex-box" style="height:500px;">6</div>

      <div class="flex-box" style="height:450px;">7</div>

  </div>

  
  

  CSS

  .box {

      display: -webkit-flex;

      display: flex;

      flex-direction: row;

      flex-wrap:nowrap;

      justify-content: flex-start;

      align-items: stretch;

      align-content: flex-start;

  }

  .flex-box{

      height:200px;

      width:500px;

      background-color:#ddd;

      border:1px solid #fff;

  }

  .box1 .flex-box{

      background-color:#E0BCDB;

  }

  .box2 .flex-box{

      background-color:#E0B6B6;

       width:800px; 
  

  }

  .left{

      flex-shrink:0;//空间不足时不允许左侧缩小

  }

  .box3 .flex-box{

      background-color:#ABD9E0;

         width:900px;

  }

  .box4{

      flex-wrap: wrap;//空间不足换行

  }

  .box4 .flex-box{

      background-color:#dadada;

  }