Flex 布局

作者: 微风玉米 | 来源:发表于2017-05-08 17:56 被阅读0次

一、基本概念

理解基本概念
- Flex 布局(弹性布局)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。
- 相关词汇
  
  图中是一个 flex-direction 属性为 row 的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。
"flex axis"
1. 弹性容器(Flex container)
  
  弹性项目的父元素。通过设置display:flex;或者display:inline-flex;来定义弹性容器。
2. 弹性项目(Flex item)
  
  弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。
3. 轴(Axis)
  
  每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
4. 方向(Direction)
  
  弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。
5. 行(Line)
  
  根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。
代码示例

下述代码使用了 flex 布局，使本来在文档流布局中独占一行的块级元素 div ，变成了两个同处一行之中。

<!--
例一
-->
<style>
    .parent{
      border:solid 1px red;
      display:flex;
      background:#dde
}
    .child{
      border:solid 1px black;
      height:50px;
      width:100px;
      background:#ddd;
      margin:10px;
    }
  </style>
  <div class="parent">
    <div class="child child1"></div>
    <div class="child child2"></div>
  </div>

例一结果如下：

flex output.PNG

flex 特点
1. 块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。
2. flex 布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）。
3. flex 适用于简单的线性布局，更复杂的布局要交到 grid 布局（还没发布）。

二、flex container 的六个属性

<!--
例二
为了便于理解，用代码实践了这六个属性
-->
<style>
  * {
  margin: 0px;
  border:0px;
  padding:0px;
}
.container {
  display: flex;
  border: 1px solid;
  background: red;
}
.items {
  border: 5px solid;
  height:50px;
  width:100px;
  background:white;
}
</style>
<div class="container">
  <div class="items item1">div1</div>
  <div class="items item2">div2</div>
  <div class="items item3">div3</div>
  <div class="items item4">div4</div>
  <div class="items item5">div5</div>
  <div class="items item6">div6</div>
  <div class="items item7">div7</div>
  <div class="items item8">div8</div>
  <div class="items item9">div9</div>
</div>

例二页面展示结果：display:flex

flex-direction(方向)

这个属性表明flex布局与方向无关，它有四个取值：
- column
  
  让元素一列一列的展示。源代码 flex-container 中由上到下排列的元素，在页面中展示为从页面上方开始往下排列。
  
  在例二中 .container 加上flex-direction:column之后，页面展示效果如下:flex-direction:column
- column-reverse
  
  让元素一列一列的展示。源代码 flex-container 中由上到下排列的元素，在页面中展示为从页面下方开始往上排列。
  
  在例二中 .container 加上flex-direction:column-reverse之后，页面展示效果如下:flex-direction:column-reverse
- row——默认值
  
  让元素一行一行的展示。源代码 flex-container 中由上到下排列的元素，在页面中展示为从页面左侧开始往右排列。
  
  在例二中 .container 加上flex-direction:row之后，页面展示效果如下:flex-direction:row
- row-reverse
  
  让元素一行一行的展示。源代码 flex-container 中由上到下排列的元素，在页面中展示为从页面右侧开始往左排列。
  
  在例二中 .container 加上flex-direction:row-reverse之后，页面展示效果如下:flex-direction:row-reverse
flex-wrap(换行)

让元素换行，默认值为不换行 nowrap 。

在例二中 .container 加上flex-wrap:wrap;之后，页面展示效果如下:flex-wrap:wrap

flex-flow(上面两个的简写)

flex-flow:row wrap;
/*相当于下面的css写法*/
flex-direction:row;
flex-wrap:wrap;

justify-content(主轴方向对齐方式)

flex-container 中 items 主轴的对齐方式，主轴的方向即 flex-direction 的方向，它有五种取值:
- space-between
  
  主轴方向除去元素内容多出来的空间平均分布在两两元素之间。
  
  示例链接
- space-around
  
  主轴方向除去元素内容多出来的空间平均分布在每个元素主轴方向的前后。
  
  示例链接
- flex-start
  
  将 flex-container 中的元素挪到主轴的起点。
  
  示例链接
- flex-end
  
  将 flex-container 中的元素挪到主轴的终点。
  
  示例链接
- center
  
  将 flex-container 中的元素挪到主轴的中间。
  
  示例链接
align-items(侧轴对齐方式)

flex-container 中 items 侧轴的对齐方式，侧轴方向即主轴方向的垂直方向，有五种取值:
- stretch——默认值
  
  表示 flex-container 之中的 items 是可伸展的，所有的 item 都会拥有与侧轴方向最长的 item 同等的长度。
  
  示例链接
- flex-start
  
  将 items 挪到侧轴的起点。
  
  示例链接
- flex-end
  
  将 items 挪到侧轴的终点。
  
  示例链接
- center
  
  将 items 挪到侧轴的中间。
  
  示例链接
- baseline
  
  用文字的 baseline 对齐，比较复杂，用的较少。
  
  示例链接
align-content(多行/列内容对齐方式---用的比较少)

三、flex item 的六个属性

flex-grow ——增长比例(空间过多时)

flex-container 的空间减去 items 的空间之后剩余的空间，用 flex-grow 属性分配给 item。

示例链接
flex-shrink——收缩比例(空间不够时)
flex-basis——默认大小(一般不用)

flex——上面三个的缩写

.container{
  display:flex
}
.items:nth-child(1) {
  flex:1 3 100px;
}
/*
用于表示：如果 container 有剩余空间是将剩余空间全部给 item1, 如果 container 的空间不够时将 item1 按3的比例缩小，如果空间刚刚好则设置 item 在主轴方向的长度为 100px
*/