9.13学习
一、flex是什么？
flex是CSS3中引入的一种布局模式，也称为弹性布局。使用flex布局可以快速、灵活地实现各种复杂的布局。
在css中有三种盒子，标准盒子、IE盒子(怪异盒子)。他们的差异在于计算盒子的尺寸时的差异。
盒子描述属性值标准盒子在设置内边距或有边框的情况自身的盒子会撑大box-sizing: content-box;ie盒子(怪异盒子)在设置内边距或有边框的情况自身的盒子不会撑大（但是在内容超出了自身内容的情况下会撑大）box-sizing: border-box;
可以看到box2把自身的内容缩小了，但盒子自身的大小不变。
flex布局基于容器和子元素两个概念。如图
以下是具体代码
其中父元素必须设置display: flex;。然后子元素设置flex。可以看到boxx1和boxx3都设置了2等份，boxx2设置了8等份，最大为12等份。
二、flex的属性。
属性描述几个常用属性值flex-direction属性指定了弹性子元素在父容器中的位置 4个属性值justify-content设置主轴(x轴)上的对齐方式 5个属性值align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式(并齐)5个属性值flex-wrap是一个用于设置交叉轴（y轴）方向上的对齐方式的属性(换行) 3个属性值align-content是一个用于控制多行项目在交叉轴（y轴）方向上对齐方式的属性(用于修改 flex-wrap 属性的行为) 6个属性值flex-flowflex-direction和flex-wrap的复合属性(可同时控制主轴和交叉轴方向上的布局方式)2个属性值order弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，可以 为负值，属性设置弹性容器内弹性子元素属性属性值为数字align-self是一个用于控制单个 flex 项目在交叉轴上的对齐方式的属性(在子容器中使用)5个属性值1.flex-direction属性。
以下的属性都在父级上使用，需要在子元素使用的话我会特别标注。
row
默认值，从左往右默认的排序。
row-reverse
与 row 相同，但是以相反的顺序。
column
灵活的项目将垂直显示，正如一个列一样。
column-reverse
与 column 相同，但是以相反的顺序。
以下是这些属性使用的代码。
2.justify-content属性（x对齐方式）。
flex-start
默认值。从行首起始位置开始排列。
flex-end
从行尾位置开始排列。
center
居中排列。
space-between
均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
space-around
均匀排列每个元素，每个元素周围分配相同的空间。(a和c的最外边加起来等于ab中间的位置)
3.align-items属性（y对齐方式）。
flex-start
和上面一样，也属于默认值。默认排序。flex-end
以y轴在底部对齐。
center
以y轴在中间对齐
baseline
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
（类似于默认）stretch
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。（类似于默认个人理解）
4.flex-wrap（换行）
nowrap
默认值，弹性容器为单行，默认显示在一行。
wrap
弹性盒子为多行，该情况下子项多出的溢出的部分会被放置在新行。子项会生断行。
wrap-reverse
反转wrap排列。
5.align-content（用于修改flex-wrap属性的行为。
flex-start
从弹性盒子的起始位置开始堆叠。
flex-end
各行向弹性盒容器的结束位置堆叠。
center
各行弹性盒子的中间开始堆叠。
space-around
均匀排列每个元素，每个元素周围分配相同的空间（两边的间距加起来等于每个元素中间的间距）
space-between
各行在弹性盒容器中平均分布。
stretch
默认值。各行将会伸展以占用剩余的空间。
6.flex-flow（属性是 flex-direction 和 flex-wrap 属性的复合属性）
flex-flow
属性用于设置或检索弹性盒模型对象的子元素排列方式。flex-direction
属性规定灵活项目的方向。flex-wrap
属性规定灵活项目是否拆行或拆列。
7.order（用于子元素）
order 弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，
可以 为负值，属性设置弹性容器内弹性子元素属性
order数值最小的排前面。
8.align-self（对齐方式，在子元素上使用）
auto
默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。flex-start
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。stretch
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
三、总结
以上就是我今天的笔记总和，谢谢你的观看！
打卡9.17