CSS flex布局一（学习笔记）

一、背景

Flexbox布局组件目标是在未知容器内项目大小或者动态的情况下，用一种更有效的方式对其进行布局、排列和分配空间。
Flexbox背后的原理即是赋予容器可以改变其内部项目宽高及排列顺序以更好的填充可用空间的能力。

二、基本概念

flexbox是一套组件而不是一个单独的属性。采用flex布局的元素，称为flex容器（flex container，父元素），简称”容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称”项目”。

flex的布局方式基于flex-flow directions：项目在容器中沿着main axis（从main-start到 main-end）或者沿着cross axis（从cross-start到cross-end）进行布局

main axis：主轴是容器的基础主轴，项目都沿主轴排列。但是主轴不一定是水平的，它取决于flex-direction（见下）的设置。
main-start | main-end：项目在容器中的main-start开始，main-end结束。
main size：容器中项目的宽或高，主轴方向的大小
cross axis：垂直于主轴的交叉轴，方向取决于主轴的方向。
cross-start | cross-end：同main-start | main-end。
cross size：同main size，cross axis方向的大小。

三、容器的属性

.container{
  display: -webkit-flex; /* Safari */
  display: flex;
}

• flex-direction ：设置主轴的方向
  

.container{
   flex-direction: row | row-reverse | column | column-reverse;
}

• flex-wrap:是否折行
  

.container{
	flex-wrap: nowrap | wrap | wrap-reverse;
}

• flex-flow:flex-direction和flex-wrap的缩写
  

flex-flow: <‘flex-direction’> || <‘flex-wrap’>;

• justify-content：项目在main axis方向布局
  

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• align-items：项目在cross axis方向布局
  

.container {
  align-items:flex-start | flex-end | center | baseline | stretch;
}

• align-content：当交叉轴有空余空间时可以设置这个属性，要针对多行内容，一行无效
  

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

四、项目的属性

<div class="container">
	<div class="item" style="background-color: red;">1</div>
	<div class="item" style="background-color: lightblue;">2</div>
	<div class="item" style="background-color: yellow;">3</div>
	<div class="item" style="background-color: lightgrey;">4</div>
	<div class="item" style="background-color: pink;">5</div>
</div>

• order：项目排列顺序，默认值为0，数值越小越靠前。
  

.item:nth-of-type(1){flex-grow: 1}
.item:nth-of-type(2){flex-grow: 2;order:2;}
.item:nth-of-type(3){flex-grow: 3}
.item:nth-of-type(4){flex-grow: 4}
.item:nth-of-type(5){flex-grow: 1;order:1;}

• flex-grow：项目的扩展比例，默认值为0，数值越大，扩展越大。
  

.item:nth-of-type(1){flex-grow: 1}
.item:nth-of-type(2){flex-grow: 2}
.item:nth-of-type(3){flex-grow: 3}
.item:nth-of-type(4){flex-grow: 4}
.item:nth-of-type(5){flex-grow: 1}

• flex-shrink：指定了 flex 元素的收缩规则，flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认值为1。
  

.item:nth-of-type(1){flex-grow: 0;flex-shrink: 1;}
.item:nth-of-type(2){flex-grow: 0;flex-shrink: 1;}
.item:nth-of-type(3){flex-grow: 0;flex-shrink:1;}
.item:nth-of-type(4){flex-grow: 0;flex-shrink: 2;}
.item:nth-of-type(5){flex-grow: 0;flex-shrink: 3;}

收缩规则计算例子：http://www.runoob.com/cssref/css3-pr-flex-shrink.html

• flex-basis：用于设置或检索弹性盒伸缩基准值，默认值为auto(长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。)
  

.item {
  flex-basis: 120px | auto; 
}

• flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
详细：https://blog.csdn.net/Bambi12/article/details/88697570

• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

浏览器支持

参考文章：
http://www.runoob.com/w3cnote/flex-grammar.html
https://css-tricks.com/snippets/css/a-guide-to-flexbox/