关于弹性布局（学写笔记）

简介

Flexbox是Flexible box的简称（注：意思是“灵活的盒子容器”），是CSS引入的新的布局模式。

• 它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展示出来。

• 意为”弹性布局”，用来为盒状模型提供最大的灵活性。

• 任何一个容器都可以指定为Flex布局。

• 行内元素也可以使用flex布局。

基本概念

• 采用Flex布局的元素，成为Flex容器（flex container），简称‘容器’。
• 它的所有子元素自动成为容器成员，成为Flex项目（flex item）。
  容器中有主轴（main axis）和 交叉轴（cross axis）。两个轴交叉的位置叫做[main | cross]-start，
• 所有的子元素默认会沿着主轴水平排列。
• 单个项目占据主轴空间叫做main size，交叉轴空间叫做cross size
  

与传统布局对比

传统布局

• 兼容性好
• 布局繁琐
• 有局限性，不能对移动端进行很好的布局

弹性布局

• 操作方便，布局简单，移动端使用的比较广泛
• pc端浏览器支持情况比较差
• 浏览器兼容性较差，只能兼容到ie9及以上。

目前来说，pc端的布局建议采用传统方式，能兼容更多的浏览器。
移动端大部分都支持弹性布局，建议使用flex。

容器的属性（父元素）

• flex-direction：决定主轴的方向。默认是水平方向。

值	描述
row	默认值，水平方向为主轴，起点为主轴的左端。子元素从左向右排列
row-reverse	水平方向作为主轴，起点变为主轴的右端。子元素从右向左排列
column	垂直方向作为主轴，起点为主轴的上方。子元素从上向下排列
column-reverse	垂直方向作为主轴，起点为主轴的下方方。子元素从下向上排列

主轴和交叉轴就像坐标一样，只不过默认的起点是父元素的左上角。y轴方向（垂直方向）默认向下。并且拥有长度，长度为父元素的宽高。

• flex-wrap：换行属性。
  它决定了父元素内的子元素是否换行以及换行方式。默认情况下子元素在父元素内是不会换行的。

值	描述
nowrap	默认值，默认情况下子元素是不会换行的
wrap	换行，子元素会在一行显示不完整的情况下进行换行
wrap-reverse	换行，子元素会在一行显示不完整的情况下 反向 换行,就是第一行变成最后一行，最后一行在主轴的起始端

flex-flow是上面两个属性的简写默认值是，row，nowrap。

• justify-content属性，主轴方向的对齐方式。
  它决定项目在主轴上的对齐方式。

值	描述
flex-start	默认值，从主轴起始端对齐
flex-end	从主轴的末尾端对齐
center	在主轴方向剧中对齐
space-between	两端对齐，项目之间的空白部分的间隔都相等，视觉效果上空白只会在项目之间两边没有空白
space-between	项目左右两边的空白部分的宽度一样，视觉效果上空白会在项目每个两边。中间项目的空白间隔是边界项目空白的两倍。

• align-items属性（控制副轴排列）

值	描述
flex-start	副轴方向上起点对齐
flex-end	副轴方向上结尾对齐
center	副轴方向上居中
baseline	项目中的第一行文字的基线对齐
stretch	默认值，如果项目没有设置高度，或者高度被设置为auto，则项目的高度会被拉伸到父元素的高度

• align-content：多跟轴线对齐方式（轴线对齐）
  当容器进行换行以后会在副轴上出现多根轴线，这个属性就是用来控制轴线的对齐方式。

值	属性
flex-start	轴线以副轴的起点对齐
flex-end	轴线以副轴的末尾对齐
center	轴线j居中对齐
space-between	在副轴两端对齐，空白留在中间，轴线之间的空白部分间隔相等
space-around	空白部分围绕在每个轴线两侧，每侧的空白间隔相等。相邻的两个轴线间隔是边界轴线间隔的两倍

子元素的属性

• order属性：值接受数字。这个属性允许自定义项目的排列顺序。
  默认情况下子元素的排列顺序是按照HTML文档中元素的从上到下的书写顺序。当给给单个项目设置order属性时就会改变它的顺序。

排列顺序按照从小到大，没有设置时默认为0。order值一样的i情况下按照HTML书写的顺序。可以为负值。

• flex-grow：放大属性。接受数字值，默认值为0；
  就像名字一样，grow增长。项目会根据容器主轴方向是否还有剩余空间来进行相应增长。

  如果多个项目都设置了该属性，设置该属性的项目根据设置的值的比例进行增长。

• flex-shrink：缩小属性
  当容器的宽度小于项目需要的总宽度时这个属性控制着项目缩小比例默认值为1，类似于grow，将以设置的值的比例进行缩小。

• flex-basis：项目占据主轴的空间。
  这个属性接受的值与width、height一样。

官方描述：属性定义了在分配多余空间之前，项目占据的主轴空间（main
size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

实际测试，如果设置了这个属性为一个值，项目本来在主轴方向上的属性就将被替换不起作用。如：当主轴方向水平时，项目设置的width将不起作用。反之，项目的height属性不起作用。会改变成该属性的值。

• flex属性：这个属性是对-grow、-shrink、-basis属性的缩写

值	描述
直接写数字	扩大和缩小就是写的数字，basis值是auto
auto	（1 1 auto）可以扩大和缩小，basis的值auto
none	（0 0 auto）不扩大也不缩小，basis的值auto

• align-self属性;控制单个项目在副轴的排列方式，可以覆盖align-items属性。默认值是auto继承父元素的align-items属性，如果没有父元素，等同于stretch。

取6个值，除了auto，其他与align-items一样。